MICROLEARNING PROJECT

web development

Object Animation

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

navigation icons

Home Button

Menu Button

Previous

Next

Indicates Additional Info

object animation

menu

block Contents

introduction

Quiz games

instructor info

Course Tools

course completion

learning outcomes

navigation Help

object animation

INTRODUCTION

object ANIMATION

Duration

Type

Optional

2 HOURS

Modality %

Experience

Online

JavaScript

Department

Language

English

Web Development

Click for Requirements

object animation

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

Office Hours: M-F 6pm-8pm Phone: 246-810-1214 Email: atyler22@students.kennesaw.edu Please 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.

Ashley Tyler

Facilitator

Web Development

object animation

course tools

• 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.

• 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

Atom

object animation

learning outcomes

01

02

03

04

knowledge

apply knowledge

build experience

page creation

Practice

Term Familiarization

Combine

Create

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

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

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

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

object animation

block CONTENTs

B1

B2

block 01

block 02

Unit 01 HTML Terms

Unit 01 Creating Forms

Unit 02 CSS Terms

Unit 02 Creating Buttons

Unit 03 JavaScript Terms

Unit 03 Combine

B4

B3

block 04

block 03

Unit 01 Link Pages

Unit 01 Create Animations

Unit 02 Arrays

Unit 02 Build Website

Unit 03 Functions

Unit 03 Present Project

object animation

block one

terms

quizzes

HTML Terms

HTML Quiz

CSS Terms

CSS Quiz

JavaScript Terms

JavaScript Quiz

Overall Terms

Flashcards

object animation

block two

review/practice

web page

Practice HTML, CSS

Create Forms

Creating Forms

Create Buttons

Creating Buttons

Combine

Flashcards

Contact Page Quiz

Link to install Bootstrap plugins

object animation

BREAK TIME!

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

No. Next Block

Yes!

FIND THE PAIRS

Test your memory with these six pairs of cards!

START

i'm ready!

Memorize the positions

Wrong

Oh no!

Wrong

Memorize the positions and try again

try again

Wrong

Oh no!

Wrong

Memorize the positions and try again

try again

Wrong

Oh no!

Wrong

Memorize the positions and try again

try again

Wrong

Oh no!

Wrong

Memorize the positions and try again

try again

Wrong

Oh no!

Wrong

Memorize the positions and try again

try again

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

Where is the pair?

Congratulations!

your time

HH:MM:SS

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

object animation

BREAK TIME OVER!

What block would you like to navigate to?

Play Again

object animation

block three

review/Practice

quizzes

Link Pages Together

Use Scripts

Scripts

Combine

Functions

Functions Quiz

Flashcards

object animation

block four

review/practice

quizes

Greensock

Use GSAP

GSAP

Use gsap.fromTo ( )

gsap.fromTo ( )

Combine

Flashcards

Begin Building Website

+ info

FINAL PROJECT

Link to Greensock Plugins

FlipCard Quiz

How Well do You Know The Terms?

Start

1/15

Can have only the values of true or false.

If Else

Boolean

DOM

1/15

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).

Next

2/15

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

Max-width

Responsive

Style

2/15

Responsive

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

Next

3/15

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

Styles

Paragraph

CSS

3/15

Styles

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

Next

4/15

Executes the true and false parts of a given condition.

If Else

Scrpit

Boolean

4/15

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.

Next

5/15

Used to override all styling for that specific property.

!important

Styles

Class

5/15

!Important

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

Next

6/15

Runs the same code continuously.

Return

Concatenate

Loop

6/15

Loop

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.

Next

7/15

Specifies the positioning of content.

Left

Align

Float

7/15

Float

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

Next

8/15

___ define and indicate the contents.

Paragraphs

HTML IDs

Semantics

8/15

Semantics

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

Next

9/15

The merging of strings together to form one string.

Array

Concatenation

HTML ID

9/15

Concatenation

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

Next

10/15

A tag for embedding a web page or a map.

Frame

img src

Iframe

10/15

Iframe

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

Next

11/15

Ends an execution and sends a value back to caller.

Return

Function

Loop

11/15

Return

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

Next

12/15

The width does not stay large in smaller windows.

Max-width

Responsive

Margins

12/15

Max-Width

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

Next

13/15

Clips or adds scrollbars to content too big.

HTML

Overflow

Inherit

13/15

Overflow

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

Next

14/14

Sequence of letters, numbers, or symbols.

String

Array

Variables

14/15

String

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

Next

15/15

Can store multiple values in a single variable.

Array

Form

Object

15/15

Array

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.

Next

Congratulations!

You've reached the end

Try again

Try again

object animation

quiz games

flashcards

match game

HTML Quiz

CSS quiz

JavaScript quiz

object animation

course completion

You HAVE REACHED THE END OF THIS COURSE

please review additional resources below for more hands-on learning

greensock

bootstrap

w3 schools

object animation

congratulations!

Thank you for participating in this course.