Want to create interactive content? It’s easy in Genially!

Get started free

MICROLEARNING PROJECT

Ashley Tyler

Created on October 20, 2022

Start designing with a free template

Discover more than 1500 professional designs like these:

Practical Microsite

Akihabara Microsite

Akihabara Resume

Marketing Strategy Test

Mobile Event Landing

Onboarding Department Mobile

Event Agenda Mobile

Explore all templates

Transcript

Object Animation

Enter Course

web development

object animation

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.

hello!

object animation

Project example

Indicates Additional Info
Next
Previous
Menu Button
Home Button

object animation

navigation icons

object animation

course completion

Course Tools

navigation Help

Quiz games

block Contents

learning outcomes

instructor info

introduction

menu

Click for Requirements

object animation

object ANIMATION

Web Development

Department

JavaScript

Experience

Optional

Type

English

Language

2 HOURS

Duration

Online

Modality %

INTRODUCTION

object animation

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.

ABOUTTHE course

introduction continued (about)

object animation

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.

Facilitator

Ashley Tyler

Web Development

INSTRUCTOR

Atom

  • 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

object animation

course tools

object animation

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

Create

page creation

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

Combine

build experience

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

Practice

Term Familiarization

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

apply knowledge

knowledge

01

03

04

02

learning outcomes

Unit 03 Combine

Unit 03 JavaScript Terms

Unit 03 Present Project

Unit 03 Functions

object animation

Unit 02 Build Website

Unit 01 Create Animations

Unit 02 Arrays

Unit 01 Link Pages

Unit 02 Creating Buttons

Unit 01 Creating Forms

Unit 02 CSS Terms

Unit 01 HTML Terms

block 03

block 04

block 02

block 01

B3

B2

B4

B1

block CONTENTs

object animation

Flashcards

JavaScript Quiz

CSS Quiz

HTML Quiz

Overall Terms

JavaScript Terms

CSS Terms

HTML Terms

quizzes

terms

block one

Link to install Bootstrap plugins

object animation

Contact Page Quiz

Combine

Create Buttons

Create Forms

Flashcards

Creating Buttons

Creating Forms

Practice HTML, CSS

web page

review/practice

block two

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

BREAK TIME!

object animation

No. Next Block

Yes!

Test your memory with these six pairs of cards!

FIND THE PAIRS

START

Memorize the positions

i'm ready!

Wrong
Oh no!

Memorize the positions and try again

Wrong

try again

Wrong
Oh no!

Memorize the positions and try again

Wrong

try again

Wrong
Oh no!

Memorize the positions and try again

Wrong

try again

Wrong
Oh no!

Memorize the positions and try again

Wrong

try again

Wrong
Oh no!

Memorize the positions and try again

Wrong

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?

HH:MM:SS

your time

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

Congratulations!

What block would you like to navigate to?

BREAK TIME OVER!

object animation

Play Again

object animation

Functions Quiz

Combine

Use Scripts

Flashcards

Functions

Scripts

Link Pages Together

quizzes

review/Practice

block three

Link to Greensock Plugins

object animation

Begin Building Website

Combine

Use gsap.fromTo ( )

Use GSAP

Flashcards

gsap.fromTo ( )

GSAP

Greensock

FINAL PROJECT

+ info

quizes

review/practice

block four

How Well do You Know The Terms?

FlipCard Quiz

Start

1/15

DOM

Boolean

If Else

Can have only the values of true or false.

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

1/15

Next

2/15

Style

Responsive

Max-width

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

Responsive

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

2/15

Next

3/15

CSS

Paragraph

Styles

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

Styles

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

3/15

Next

4/15

Boolean

Scrpit

If Else

Executes the true and false parts of a given condition.

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.

4/15

Next

5/15

Class

Styles

!important

Used to override all styling for that specific property.

!Important

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

5/15

Next

6/15

Loop

Concatenate

Return

Runs the same code continuously.

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.

6/15

Next

7/15

Float

Align

Left

Specifies the positioning of content.

Float

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

7/15

Next

8/15

Semantics

HTML IDs

Paragraphs

___ define and indicate the contents.

Semantics

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

8/15

Next

9/15

HTML ID

Concatenation

Array

The merging of strings together to form one string.

Concatenation

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

9/15

Next

10/15

Iframe

img src

Frame

A tag for embedding a web page or a map.

Iframe

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

10/15

Next

11/15

Loop

Function

Return

Ends an execution and sends a value back to caller.

Return

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

11/15

Next

12/15

Margins

Responsive

Max-width

The width does not stay large in smaller windows.

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.

12/15

Next

13/15

Inherit

Overflow

HTML

Clips or adds scrollbars to content too big.

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.

13/15

Next

14/14

Variables

Array

String

Sequence of letters, numbers, or symbols.

String

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

14/15

Next

15/15

Object

Form

Array

Can store multiple values in a single variable.

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.

15/15

Next

Congratulations!

You've reached the end

Try again

Try again

CSS quiz

JavaScript quiz

HTML Quiz

match game

flashcards

object animation

quiz games

greensock

please review additional resources below for more hands-on learning

bootstrap

You HAVE REACHED THE END OF THIS COURSE

w3 schools

object animation

course completion

object animation

Thank you for participating in this course.

congratulations!