MICROLEARNING PROJECT

web development

Enter Course

Object Animation

hello!

Hello class, I am your instructor, Ashley. Today we are going to learn about JavaScript animations. This course is designed to help you understand what JavaScript is and its uses, to create a full website with visible, sliding images and material that fade in and out in animation. Click the arrow in the top right corner to view a short video showing what you can do with fade in and out content on a web page.

object animation

Project example

object animation

Project example

object animation

navigation icons

object animation

Home Button

Menu Button

Indicates Additional Info

There are two columns of buttons next to the units. These indicate that there is additional information, a link, or a quiz game.

These buttons are all located in the header and banner of each slide.

introduction

instructor info

learning outcomes

block Contents

Quiz games

navigation Help

Course Tools

course completion

object animation

INTRODUCTION

Modality %

Online

Duration

2 HOURS

Language

English

Type

Optional

Experience

JavaScript

Department

Web Development

object ANIMATION

object animation

Click for Requirements

Cuatrimestral / Semestral / Anual

Lorem ipsum dolor sit amet consectetur adipiscing elit himenaeos diam sociis, luctus fringilla gravida non pretium commodo integer nisi aenean, at iaculis lacus tempus nulla parturient condimentum tempor litora. Dis sociosqu non natoque ac ligula curabitur eleifend lobortis porta laoreet, class et aliquet nunc sapien est in vivamus diam, magna fames tellus ullamcorper congue praesent duis justo sed. Vitae porta eros non ullamcorper sapien odio velit hac, id euismod conubia luctus cubilia natoque venenatis quam, pharetra potenti fringilla rhoncus taciti magnis ad. Sociosqu tempor litora nisl tellus pharetra aliquet luctus mollis, primis venenatis pretium imperdiet diam per odio, iaculis eros fusce ut ante cubilia nam. Sapien venenatis cubilia nulla tempor platea praesent lacinia duis ornare nascetur, taciti pulvinar himenaeos non accumsan pretium per iaculis vel. Mollis ante nisl magnis primis vitae lectus ornare rhoncus penatibus litora, interdum dui natoque dignissim nibh per class potenti bibendum, non hendrerit a nascetur habitasse tempus felis habitant mauris.

Laptop / Computer
Stable internet connection
Email address
Optional: look up the platform Atom to download to your computer. This will be used as an option for coding your web pages.

introduction continued (about)

ABOUTTHE course

This course allows students to build upon their knowledge of HTML and CSS for websites and apps to produce complex, creative, and responsive designs. In addition to developing an advanced understanding of CSS and HTML, students are introduced to the concept of JavaScript, another front-end programming language.

object animation

INSTRUCTOR

Web Development

Ashley Tyler

Facilitator

Office Hours: M-F 6pm-8pmPhone: 246-810-1214Email: atyler22@students.kennesaw.eduPlease contact me with any questions. Office hours are listed, but you can email whenever you have a question and I will get back to you within 48 hours.

object animation

course tools

object animation

We will be using Atom to code the sites

Once downloaded and in Atom, Navigate to:

Packages tab
Settings view
Open
Click Editor
Enable: scroll past end/ show indent guide/ show line numbers/ soft wrap

Click Packages - type atom-html-preview 0.2.7 to install

The preview package is what you will be using to view your progress and screen capture your pages, then send them to the email listed in the introduction.

Look around the website W3 Schools to read a bit, see if you can practice a few of the examples, or just get more information/practice in some areas you have interest in.

Do the same for Bootstrap. You can build on the practice from W3 schools to copy and paste from Bootstrap.

Atom

learning outcomes

knowledge

apply knowledge

Participants will be able to gain insight and understand HTML, CSS, and javascript terms.

Term Familiarization

Practice

Participants will be able to gain knowledge in building web pages by applying usage of the terms step-by-step.

build experience

Combine

Participants will be able to hone their skills by combining the steps and begin building the website.

page creation

Create

Participants will be able to create the entire website of their own idea and design.

object animation

course GOALS

object animation

knowledge

apply knowledge

page creation

build experience

The goal will be to learn and understand the vocabulary associated with javascript.

The goal will be to put each term into action by practicing.

The goal will be to use a combination of previous steps to successfully create one page.

The goal is to create one website, using gathered knowledge of javascript, with images and content that fade in and out with animation.

block CONTENTs

block 01

block 02

block 04

block 03

Unit 01 HTML Terms

Unit 02 CSS Terms

Unit 01 Creating Forms

Unit 02 Creating Buttons

Unit 01 Link Pages

Unit 02 Arrays

Unit 01 Create Animations

Unit 02 Build Website

object animation

Unit 03 Functions

Unit 03 Present Project

Unit 03 JavaScript Terms

Unit 03 Combine

There are two columns of buttons next to the units. These indicate that there is additional information, a link, or a quiz game. Please make sure to click the "plus" for more information before beginning.

block one

terms

quizzes

HTML Terms

CSS Terms

JavaScript Terms

Overall Terms

HTML Quiz

CSS Quiz

JavaScript Quiz

Flashcards

object animation

HTML Terms

What is HTML?
- HyperText Markup Language is the standard text language for effects to be displayed in a web browser. It describes the structure of an entire web page.

Element - The element encompasses the entire content from a start tag, to the middle content, to the end tag.

Attribute - an HTML attribute provides additional information about HTML elements, usually in name/value pairs like: name="value" (ex. href="https://www.thisisatest.com").

Headings - titles or subtitles on a webpage. Ranges from 1-6, with 1 being the largest, and 6 being the smallest. (ex. <h1>, <h6>).

Styles - adding attributes such as color, font, size, and more to an element.

Class - an attribute that is used to specify a class name, which can be shared by multiple elements or specified individually. Classes can be identified by a dot (.) in front of the word and can also be used in JavaScript.

HTML ID - a hashtag attribute used to specify a unique ID for only that HTML element. Can be used for a specific style in a style sheet or in JavaScript to access and manipulate that element. (ex. “#john”).

Continued...

CSS Terms

What is CSS?
- Cascading Style Sheets. CSS is the language used to style elements written in a markup language, such as HTML, for a web page. It is a rule-based language that defines styles such as the design, layout and variations in display for different devices and screen sizes.

Colors - CSS colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, and HSLA values.

Backgrounds - properties that are used to add background effects for elements. The CSS properties used are: background-color, background-image, background-repeat, background-attachment, background-position, and background (shorthand property.

!Important - used to add more importance to a property/value and override all previous styling rules for that specific property.

Float - Float specifies the positioning and formatting of content, such as left or right, and can be used to wrap text around images.

Padding - creates space around content, inside and away from borders.

Continued...

JavaScript Terms

What is Javascript?
- JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, calculate, manipulate and validate data. It is the world’s most popular programming language for the web. JavaScript can update and change both HTML and CSS. The example [document.getElementById("demo").innerHTML = "Hello JavaScript";] "finds" an HTML element (with the HTML id="demo"), and changes the element content (innerHTML) to "Hello JavaScript"

DOM - Document Object Model. When a web page is loaded, the browser creates a Document Object Model of the page that allows JavaScript to access and change all the elements of an HTML document. The HTML DOM treats an HTML document as a logical tree structure representing parts of the document.

Method - A JavaScript method is a property of an object containing a function definition. Methods are functions stored as object properties; and actions that can be performed on objects.

Properties - the values associated with a JavaScript object, consisting of name:value (or key:value) pairs. They can usually be changed, added, and deleted, but some are read only. Properties are the most important part of any JavaScript object.

Concatenate - the concatenation of two or more strings is the operation of merging them together to form one string. For example, the concatenation of 1, 234, and 56 is 123456. The term "concatenation" literally means to merge two things together. Also known as string concatenation.

Return - a statement that ends function execution and sends a value back to where it was called. (ex. Hello John)

(ex. <script> document.getElementById("demo").innerHTML = myFunction("John"); function myFunction(name) {return "Hello " + name;}</script> output is Hello John)

Variable - anything that can vary; containers for storing data values declared with a var, let, or const keyword. All JavaScript variables must be identified with unique names called identifiers, which are case-sensitive. It's good practice to declare all variables at the beginning of a script.In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.

Strings - a sequence (starting in position 0) of one or more characters that may consist of unchanging letters, numbers, or symbols. Strings are used to manipulate text and store the characters, written inside double or single quotes.

Objects - a container for a collection of key:value pairs, called properties, and type that define their characteristics, such as color, height, length, name, etc. All objects have characteristics, properties, and methods (actions).

Arguments - two or more real values inside parentheses passed into a function, called from outside. It is only available within a function.
(ex. a function of def add(x, y): return x + y; if from outside called as add(2, 3), then 2, 3 are the arguments.)

Continued...

Click the "Play" button to access the link to W3Schools, which has an explanation of most of the vocabulary and live examples. You can access the site's tabs - HTML, CSS, Javascript - and the terms are on the left, along with many others if you'd like to explore.

HTML Quiz

This quiz is a link to another site.
Once complete, you can close the tab or navigate back to the course's home page.

CSS Quiz

This quiz is a link to another site.
Once complete, you can close the tab or navigate back to the course's home page.

JavaScript Quiz

This quiz is a link to another site.
Once complete, you can close the tab or navigate back to the course's home page.

To further your understanding of the vocabulary terms, flashcards have been provided. They will be available at the end of every review section in each block. These can also be accessed any time by clicking the Quiz Games link on the menu page.

Continued HTML Terms

Iframe - a tag used to embed a web page or map into a web page.

Responsive - web pages respond to all devices by automatically adjusting for any device’s screen size and viewports.

semantics - clearly describe an element’s meaning to define and indicate the contents, such as <header>, <table>, and <nav>.

Symbols - mathematical, technical, or currency characters not present on a normal keyboard. A name or number can be specified. (ex. copyright-&#169 or © registered-&#174 or ® trademark-&#8482 or &trade).

Form - used to collect user input. The element is a container for different types of inputs, such as: text fields, checkboxes, and buttons.

Input - a tag that specifies where a user can enter data. It only contains attributes and is used within the <form> element to declare input controls, such as a text field or a submit button. (ex. <input type=”text”> or <input type=”button”>).

Lists - two main types; unordered lists (<ul>) are marked with bullets, and ordered lists (<ol>) are marked with numbers or letters.

End

Continued CSS Terms

Display - specifies how an element is displayed, the default value for most is block or inline. “display: none;” is commonly used with JavaScript to hide and show elements without deleting them./li>

Max-width - makes a site usable on small devices by making sure the width does not stay large when the window is smaller.

Position - a property that specifies a static, relative, fixed, absolute or sticky positioning method for an element. The top, bottom, left, and right properties will not work properly unless the position property is set first.

Z-index - a property that specifies the positive or negative stack order of an element, placing it in front of, or behind, others.

Overflow - a property that controls content that is too big to fit and specifies whether to clip the content or to add scrollbars.

End

Continued JavaScript Terms

Function - similar to a procedure, a set of statements that performs a task. To perform a task, there needs to be an input/output relationship to take the input and return an output; executed when something invokes, or calls the function.

Array - an object that can store multiple values in a single variable. Each item in an array has a numeric index that allows you to access it, starting at index zero. It is common practice to declare arrays with the const keyword. (ex. const words = ['hello', 'world', 'welcome']; words is the array).

Boolean - A JavaScript Boolean is a logical data type that can have only the values true or false, often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops). Common comparison operators are two equal signs (= =) means equal to, and the greater than (>) and less than (<) signs. (ex. Display the value of 10 > 9:<script>document.getElementById("demo").innerHTML = 10 > 9;</script>)

If Else - The if-else statement executes a block of code of both the true part and the false part of a given condition. If the condition is true, the “if” is executed and if the condition is false, the “else” is executed.

Loop - used to run the same code over and over again, each time with a different value. Often used with arrays, loops perform repeated tasks based on a condition return of true or false. A loop will continue running until a specified condition returns false.

Script - used to define executable code or data, either containing script statements, or pointing to an external script file through the src attribute. Recommended to be placed at the bottom of HTML documents for better performance.

Parameter - a parameter is a named variable listed in the function definition, used to call outside arguments into the function. (ex. a function of def add(x, y): return x + y; then x, y are parameters.)

End

block two

review/practice

web page

Practice HTML, CSS

Creating Forms

Creating Buttons

Flashcards

Create Forms

Create Buttons

Combine

Contact Page Quiz

object animation

Link to install Bootstrap plugins

Create a basic HTML page. You can come up with your own idea, or if you can't think of anything, create an About Me page. You can either create your CSS inside the style tag, or create a CSS file and link it in the head tag. (ex. <link href="my.css" rel="stylesheet" type="text/css">) Below is your criteria:

A header title

A main image (profile picture if creating 'about me')

Three sections with headers

You can play around with this basic structure and add more if you like.

Click the "Play" button to watch a video about combining HTML and CSS.

Screen capture your page and send to the email listed in the Instructor slide.

Creating Forms

In this block, you are introduced to W3Schools and Bootstrap.

With W3Schools, you can practice the built-in examples. Click the "Play" button to practice. Take note of the HTML and CSS coding used.

With Bootstrap, you can practice copying the examples and configure in ways that suit you best. You can also copy into W3Schools for quicker access. Just delete W3's code, copy and paste the basic tags below, then copy Boostrap examples and paste in between the body tags.

Before copying from Bootstrap to paste into Atom, you will need to download and install their CSS & JavaScript plugins. I recommend the bundle so you can copy and paste what you feel at any given moment.

The link has been provided to install.

Basic HTML Tags <!DOCTYPE html> <html> <style> </style> <body> </body> </html>

Creating Buttons

In this block, you are introduced to W3Schools and Bootstrap.

With W3Schools, you can practice the built-in examples. Click the "Play" button to practice. Take note of the HTML and CSS coding used.

Though the link navigates to the Input page, you can see an example of the coding with the "submit" button provided. Inputs are used to create fields and buttons.

Forms

Now it's time to put your practice to the test.

The Play button takes you to the Bootstrap Forms section, where there is an overview and eight sections to choose from.

After downloading and installing Bootstrap CSS and JS plugins for working in Atom, you can begin creating.

Copy any two forms and paste them. If pasting into W3Schools, you will need to create your own CSS.

Do this as many times as needed, and as many of them as you like to become familiar with creating forms.

Buttons

The "Play" button takes you to the Bootstrap Buttons section. There are many examples to choose from, so for now focus on the "Block buttons" section.

After downloading and installing Bootstrap CSS and JS plugins for working in Atom, you can begin creating.

Copy four button examples and paste them. You can choose one from outside of the "Block buttons" section. If pasting into W3Schools, you will need to create your own CSS.

Be sure to practice creating different sizes and colors as well.

Now it's time to combine inputs, forms and buttons. This can be done in W3Schools for quicker access.

Combine your knowledge by creating a standard page with forms and button(s).

It does not have to be pretty, and it does not have to be cohesive.

You can create in W3Schools, or in Atom. Screen capture what you created and send to me.

Click the "Play" button for more information on creating inputs.

Now it's time to combine inputs, forms and buttons to create an actual page.Create a contact page with properly measured input forms and a submit button. Click the "Play" button to see ideas for various input text fields and button combinations. Without JavaScript, the buttons would not work. But if you installed Bootstrap plugins, they should work.

Create a Contact Us page with inputs for
- First Name, Last Name
- Email address
- Subject
- Message

Create a submit button

There should also be business info and a map.

Screen capture your page, save it as your first and last name, then email to me.

Yes!

No. Next Block

object animation

BREAK TIME!

You're halfway there! Would you like to take a break and play a game?

START

FINDTHE PAIRS

Test your memory with these six pairs of cards!

i'm ready!

Memorize the positions

try again

Wrong

Memorize the positions and try again

Oh no!

Wrong

try again

Wrong

Memorize the positions and try again

Oh no!

Wrong

try again

Wrong

Memorize the positions and try again

Oh no!

Wrong

try again

Wrong

Memorize the positions and try again

Oh no!

Wrong

try again

Wrong

Memorize the positions and try again

Oh no!

Wrong

Where is the pair?

HH:MM:SS

Where is the pair?

HH:MM:SS

Where is the pair?

HH:MM:SS

Where is the pair?

HH:MM:SS

Where is the pair?

HH:MM:SS

Where is the pair?

HH:MM:SS

Congratulations!

GREAT JOB!See if you can beat your time next tine!

yourtime

HH:MM:SS

Play Again

object animation

BREAK TIME OVER!

What block would you like to navigate to?

block three

review/Practice

quizzes

Link Pages Together

Scripts

Functions

Flashcards

Use Scripts

Combine

Functions Quiz

object animation

Create a web site with three pages: home, about, contact.

Your pages can be about you, an interest, or a hobby. This is for practice, so it does not have to look professional.

Click the "Play" button for a video about how to combine pages if you need a refresher.

Send all files (html, images, etc.) to me in one zip file titled your name.

Scripts

This block introduces JavaScript language. You will now begin practicing scripts. You have created buttons, but what action should a button take? JavaScript gives a button directions to take certain actions.

With W3Schools, you can practice the JavaScript examples. Click the "Play" button to practice. Take note of the coding used.

Below is a detailed explanation of the button.

This is the element:<p id=”demo”> Javascript can change HTML content.</p> This is a button: <button type=”button” onclick=‘document.getElementById(“demo”).innerHTML = “Hello Javascript!” ‘> Click Me!</button> 1. 'Onclick' tells to execute an action when the button is clicked 2. 'Document' tells javascript to access an object (the document) 3. The dot(.) notation is followed by telling javascript to retrieve, with the command getElementById 4. That tells it to get the ID of the element labeled demo in the body a. This allows access to that element’s inner HTML property 5. Another dot(.) notation followed by the property (innerHTML) a. Tells the browser to look b/w the tags inside an element and put content in itb. This is basically saying put “hello javascript!” inside/or replace the id demo 6. The “=” assigns a value to the property 7. Hello javascript is the content to replace/or put the paragraph id inside the innerHTML 8. Click me is the (value) action button to replace “javascript can change…” when clicked 9. Basically the space is assigned a new value

Functions

This block introduces JavaScript language. You will now begin practicing functions, which are placed in between <script> tags.

With W3Schools, you can practice the functions examples. Click the "Play" button to practice. Take note of the coding used.

To further your understanding of the vocabulary terms, flashcards have been provided. They will be available at the end of every review section in each block. These can also be accessed at any time by clicking the Quiz Games link on the menu page.

Use Scripts

You've practiced and read the breakdown of a script. You will now begin using scripts, which house functions.

JavaScript can be created on its own separate page with a link to it, or it can be created within the HTML document.

Click the "Play" button to use the HTML script examples to create.

Screen capture your progress and send to me when complete.

Now combine creating a function within a script tag.

You have now practiced creating buttons with HTML, CSS, and scripts.

Create your own hamburger menu for a web page.

Below is an example menu button. You can copy, paste, and customize it to fit your page. The CSS is also provided.

Click the "Play" button to view a short video for creating an animated menu button. You are free to use any example or create your own.

It does not have to link to any pages at the moment.

Screen capture your progress and send it to me.

<body> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Menu</button> <div id="myDropdown" class="dropdown-content"> <br> <a href="#home">Home</a> <a href="#about">About</a> <a href="#Music">Music</a> </div> </div> </body> <script> function myFunction() {  document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </html> CSS /*** MENU BUTTON ***/ .dropbtn { color: white; padding: 6px; font-size: 16px; border: none; cursor: pointer; height: 30px; position: inherit; right: 0; } .dropbtn:hover, .dropbtn:focus { background-color: #B7B7B7;} .dropdown { position: absolute; right: 0; display: inline-block; margin-right: 60px;} .dropdown-content { display: none; margin-left: 1100px; background-color: #f1f1f1; min-width: 90px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;} .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block;} .dropdown a:hover {background-color: #ddd;} .show {display: block;} /*** END MENU BUTTON ***/

Now create a function using HTML script.

You will create a page that has a hamburger menu at the top.

The topic is your favorite food. If you don't have a favorite food, the many foods you like will suffice. (ex. candy, late-night snack, burgers, most often eaten, etc.).

Below is an example HTML and function for a menu button. You can copy, paste, and customize it to fit your page. The CSS is also provided.

Click the "Play" button to view further information about the onclick feature.

Combine all files into a zip file and send it to the email in the instructor slide.

block four

review/practice

quizes

+ info

FINAL PROJECT

Greensock

GSAP

gsap.fromTo ( )

Flashcards

Use GSAP

Use gsap.fromTo ( )

Combine

Begin Building Website

object animation

Link to Greensock Plugins

You will continue working on building your website by combining all the things you've learned so far.

When your project is complete, please combine all files into one zip file and send it to the email in the Instructor slide.

Greensock Introduction

In this block, you are introduced to the website Greensock. This site will help with forming animations.

Click the "Play" button to visit GSAP's Getting Started page to learn about GSAP. This page is full of many animations that you can incorporate into your pages. There is also a video explaining the animation examples.

To use the contents of the website, plugins must be used. A link to the site's plugins has been provided.

GSAP

In this block, you are introduced to GSAP. This is what we will be focusing on to create animations.

Click the "Play" button to watch a video about how to use GSAP to code animations.

from.To()

Though there are various types of animations, we will bring our focus down to the from.To() feature.

Using from.To() simply means to go from (this) to (this); (from 0 opacity to fade in 100 percent opacity)

Click the "Play" button to watch a video about how to use from.To() to animate.

Coding for the course introduction's example video is pasted below. You are welcome to copy as a starting point, just replace the hashtags with the names of your images you set in the body.

</body> <script> gsap.timeline() .to("#title",{y:-900, duration:4}) .from("#van",{delay:1, opacity:0, x:600, duration:4}) .to("#title",{opacity:0, duration:.5}, "<2") .from("#john",{opacity:0, x:-150, duration:2.5}, "<1") .from("#ben",{opacity:0, x:200, duration:2.5}, "<1") .to("#van",{x:400, opacity:0, duration:2, rotation:360}) .to("#john",{x:-400, opacity:0, duration:2, rotation:-360}, "<.2") .to("#ben",{x:400, opacity:0, duration:2, rotation:360}, "<.2") .from("#land",{opacity:0, y:-900, duration:1.5, scale:.5}) .from("#info",{opacity:0, y:-900, duration:3, scale:.5}, "<.2") </script> </html>

To further your understanding of the vocabulary terms, flashcards have been provided. They will be available at the end of every review section in each block. These can also be accessed at any time by clicking the Quiz Games link on the menu page.

Using GSAP

Just as with W3Schools and Bootstrap, you can practice creating pages with animations using the Greensock examples.

Click the "Play" button to view the second Getting Started page.

Pick any three animations from either Getting Started pages to copy, paste, and use in Atom. The images don't matter, just show an understanding of the process.

Save your work in a zip file and send it to me.

Create

You've created examples from Greensock, now create a web page using from.To(), but with your own images and coding.

This should be a full page with transitions and fades. You are welcome to go back to earlier created pages and animate those images in a cohesive way.

Save all files in a zip file and send it to me.

Combine animations

Now that you've had a chance to practice with animations, create a car show website with as many animations that look cohesive as you can. If you would like to create multiple pages, feel free to do so.

The site should have a home page and a contact us page.

Another link for animations, Easing, has been provided. This enables bounce and other easing animations. Click on any of the examples, from Power0 to Custom, choose type (easIn, easeOut, easeInOut), and click "RUN" to see a demonstration.

Bounce can be applied to various objects, such as a drop pin on a contact page. You can adjust the "y" value to a positive number for dropping down instead of up.

Save your files in a zip file and send to me when complete.

Now it's time to start working on your final project. Review all that you've learned and try to think of creative ways to incorporate most of it. You will need to come up with an idea for your page. Here are a few suggestions:

A favorite band's home page
A hobby
Movie genre
Fitness page
Type of food, or a restaurant page

These are your minimum requirements:

Minimum of three animations.
A hamburger menu.
A landing page.
Non copyright images
A title with a Google font

RESOURCES AND TEACHING MATERIALS

BIBLIOGRAPHY

ADDITIONAL MATERIALS

webgraphy

object animation

https://www.genial.ly
https://www.genial.ly
https://www.genial.ly
https://www.genial.ly
https://www.genial.ly
https://www.genial.ly

Magna Lorem. (1989). Lorem ipsum dolor sit (2.a ed., Vol. 3). Cordoba, ESPAÑA: Dolorelabore.
Magna Lorem. (1989). Lorem ipsum dolor sit (2.a ed., Vol. 3). Cordoba, ESPAÑA: Dolorelabore.
Magna Lorem. (1989). Lorem ipsum dolor sit (2.a ed., Vol. 3). Cordoba, ESPAÑA: Dolorelabore.
Magna Lorem. (1989). Lorem ipsum dolor sit (2.a ed., Vol. 3). Cordoba, ESPAÑA: Dolorelabore.
Magna Lorem. (1989). Lorem ipsum dolor sit (2.a ed., Vol. 3). Cordoba, ESPAÑA: Dolorelabore.
Magna Lorem. (1989). Lorem ipsum dolor sit (2.a ed., Vol. 3). Cordoba, ESPAÑA: Dolorelabore.
Magna Lorem. (1989). Lorem ipsum dolor sit (2.a ed., Vol. 3). Cordoba, ESPAÑA: Dolorelabore.

Lorem ipsum dolor sit amet consectetur adipiscing elit himenaeos diam sociis, luctus fringilla gravida non pretium.

Commodo integer nisi aenean, at iaculis lacus tempus nulla parturient condimentum tempor litora.
Dis sociosqu non natoque ac ligula curabitur eleifend lobortis porta laoreet, class et aliquet nunc sapien est in vivamus diam.
Magna fames tellus ullamcorper congue praesent duis justo sed.
Vitae porta eros non ullamcorper sapien odio velit hac, id euismod conubia luctus cubilia natoque venenatis quam.
Pharetra potenti fringilla rhoncus taciti magnis ad.

Start

FlipCard Quiz

How Well do You Know The Terms?

Can have only the values of true or false.

If Else

Boolean

DOM

1/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

1/15

A JavaScript Boolean is a logical data type that can have only the values true or false, often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops).

Boolean

Pages respond to all devices by automatically adjusting for any screen size.

Max-width

Responsive

Style

2/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

2/15

Responsive means web pages respond to all devices by automatically adjusting for any device’s screen size and viewports.

Responsive

Adding attributes such as color, font, size to an element.

Styles

Paragraph

CSS

3/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

3/15

Adding a style means adding attributes such as color, font, size, and more to an element.

Styles

Executes the true and false parts of a given condition.

If Else

Scrpit

Boolean

4/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

4/15

The if-else statement executes a block of code of both the true part and the false part of a given condition. If the condition is true, the “if” is executed and if the condition is false, the “else” is executed.

If Else

Used to override all styling for that specific property.

!important

Styles

Class

5/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

5/15

The !important rule is used to add more importance to a property/value and override all previous styling rules for that specific property.

!Important

Runs the same code continuously.

Return

Concatenate

Loop

6/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

6/15

Loops are used to run the same code over and over again, each time with a different value. A loop will continue running until a specified condition returns false.

Loop

Specifies the positioning of content.

Left

Align

Float

7/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

7/15

Float specifies the positioning and formatting of content, such as left or right, and can be used to wrap text around images.

Float

___ define and indicate the contents.

Paragraphs

HTML IDs

Semantics

8/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

8/15

Semantics clearly describe an element’s meaning to define and indicate the contents, such as <header>, <table>, and <nav>.

Semantics

The merging of strings together to form one string.

Array

Concatenation

HTML ID

9/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

9/15

The concatenation of two or more strings is the operation of merging them together to form one string.

Concatenation

A tag for embedding a web page or a map.

Frame

img src

Iframe

10/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

10/15

An iframe is a tag used to embed a web page or map into a web page.

Iframe

Ends an execution and sends a value back to caller.

Return

Function

Loop

11/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

11/15

A return is a statement that ends function execution and sends a value back to where it was called.

Return

The width does not stay large in smaller windows.

Max-width

Responsive

Margins

12/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

12/15

Max-width makes a site usable on small devices by making sure the width does not stay large when the window is smaller.

Max-Width

Clips or adds scrollbars to content too big.

HTML

Overflow

Inherit

13/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

13/15

Overflow is a property that controls content that is too big to fit and specifies whether to clip the content or to add scrollbars.

Overflow

Sequence of letters, numbers, or symbols.

String

Array

Variables

14/14

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

14/15

A sequence, (starting in position 0), of characters that may consist of unchanging letters, numbers, or symbols.

String

Can store multiple values in a single variable.

Array

Form

Object

15/15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

15/15

An array is an object that can store multiple values in a single variable. Each item in an array has a numeric index that allows you to access it, starting at index zero.

Array

Try again

You've reached the end

Congratulations!

Try again

quiz games

object animation

flashcards

match game

HTML Quiz

JavaScript quiz

CSS quiz

course completion

CONTINUOUS EVALUATION WEIGHTING

object animation

ADDITIONAL MATERIALS

Lorem ipsum dolor sit amet consectetur adipiscing elit himenaeos diam sociis, luctus fringilla gravida non pretium.

Commodo integer nisi aenean, at iaculis lacus tempus nulla parturient condimentum tempor litora.
Dis sociosqu non natoque ac ligula curabitur eleifend lobortis porta laoreet, class et aliquet nunc sapien est in vivamus diam.
Magna fames tellus ullamcorper congue praesent duis justo sed.
Vitae porta eros non ullamcorper sapien odio velit hac, id euismod conubia luctus cubilia natoque venenatis quam.
Pharetra potenti fringilla rhoncus taciti magnis ad.

course completion

object animation

w3 schools

You HAVE REACHED THE END OF THIS COURSE

bootstrap

please review additional resources below for more hands-on learning

greensock

congratulations!

Thank you for participating in this course.

object animation

MICROLEARNING PROJECT

More creations to inspire you

ANIMAL ALPHABET

EXPLORER'S EMPORIUM ADVENTURE LEAGUE

LIKED THAT? READ THIS!

EDMODO CLASS CHEMISTRY

SOCIOLOGY IN EDUCATION

LAW SCHOOL ORIENTATION HOMEPAGE

IDEAS FOR YOUR DIGITAL STORY

Transcript