JavaScript for Front-End

In this hands-on JavaScript class, you’ll start by learning the fundamentals of JavaScript code to add logic and interactivity to webpages. You’ll write plain vanilla JavaScript as well as learn how to use pre-made JavaScripts (slideshows, tabbed panels, etc.) to save yourself time and be able to quickly add amazing functionality with relatively little work.

What You Will Learn

• Write JavaScript code to add animation and interactivity to webpages
• Learn the fundamentals of the JavaScript language (variables, loops, arrays, functions, etc.)
• Understand how to use free pre-made JavaScripts to quickly add many different kinds of common functionality
• Create animated slideshows and build animated image enlargers
• Learn to animate any content within a webpage, including SVG, using GreenSock (GSAP)

Course Outline

Section 1

Fundamentals of JavaScript Code

• JavaScript methods (such as alerts and console.log)
• Variables
• Using Chrome’s DevTools: The JavaScript Console
• The importance of quotes
• Numbers vs. strings
• Concatenation
• Booleans
• Error messages & troubleshooting JavaScript

The DOM & Getting/Setting Properties

• Selecting HTML elements with getElementById()
• Manipulating selected elements
• Getting & setting properties (such as adding a class)

Functions & Event Handlers

• Defining & calling functions
• Defining parameters & passing arguments
• Using an event listener

Section 2

Arrays, Math Object, & Displaying a Random Testimonial

• Creating an array
• Editing an array
• The Math object
• Picking a random item from an array

For Loops

• Creating a for loop
• Using the for loop to set menus
• The JavaScript Keyword This
• Using a For Loop In the Product Chooser

External JS Files: Sharing JavaScript Across Pages

• Externalizing JavaScript
• Linking to the JavaScript file

If Else, the Date Object, & Creating Elements

• Conditional Logic: Using if-else statements
• Single (=) vs. Double (==) Equal Signs
• The Date Object
• Creating Elements in a Page with JavaScript

Section 3

JavaScript Objects

• Intro to objects
• Defining an Object
• Accessing & manipulating objects

Dynamically Changing Content with Custom Objects

• Referencing the Menu
• Listening For When the Menu is Changed & Getting the Chosen Value
• Loading in Data from an External File
• Dynamically Changing Info on the Page

Using a JavaScript Library: Tabs

• Using premade JavaScript Libraries
• Creating tabbed sections within a webpage

Section 4

Using a JavaScript Library: Slideshow/Carousel

• Setting Up the HTML Content
• Linking to the Provided Files
• Initializing the Script
• Customizing the Script Using Provided Options
• Tweaking Some CSS

Intro to the GreenSock Animation Platform (GSAP)

• Loading the GSAP JavaScripts
• Anatomy of a GSAP Tween
• The gsap.from() Method
• Tweening Multiple Properties
• Easing

GSAP Timelines: Animating Multiple Elements in Sequence

• Animating Multiple Elements
• Creating & Using a Timeline
• Cleaning Up the Syntax with Chaining
• Timeline repeat & repeatDelay Properties

Section 5

GreenSock: Staggered Animations & Animating SVG

• Animating SVG
• Transform Origin
• Stagger: Animating Multiple Elements from a Single Tween

GreenSock: Animating an HTML5 Ad (Google Banner Ads)

• Linking to the Google Hosted Version of GreenSock
• Creating a Timeline & Animating Multiple Scenes
• X & Y versus xPercent & yPercent
• Timeline Labels & Using Seeking to Jump to a Specific Part of a Timeline

GreenSock: Preventing Flash of Unstyled Content on Load

• Using Chrome’s DevTools to Simulate a Slow Network
• Preventing Flash of Unstyled Content on Load
• Checking Your Ad Using the Google Ads HTML5 Validator

Section 6

GreenSock: Intro to Scrolling Animations (ScrollTrigger)

• Setting Up a ScrollTrigger
• Toggle Actions
• Turning on Markers
• Scrubbing: Linking an Animation to the Scrollbar
• Starting & Ending Scroll Positions

GreenSock: Parallax Animation

• Setting Up the HTML
• Styling the Parallax Layers
• Adding the Depth Info
• Using GSAP to Make the Parallax Work

GreenSock: ScrollTrigger on Multiple Alternating Elements

• Making ScrollTrigger Work with Each Element Individually
• Alternating Directions For Each Row
• Fixing Unwanted Horizontal Scrolling