Discover Classes. Earn 10% Rewards.

JavaScript for Front-End

Enhance your webpages with interactive functionality and create stunning animations using the industry standard GreenSock Animation Platform. Build your JavaScript skills and learn how to easily add logic and interactivity to your projects in this hands-on course at Noble Desktop. There is a prerequisite of experience with coding webpages.

  • Advanced
  • 18 and older
  • $975
  • Earn 10% Rewards
  • Price Lock
  • 185 Madison Ave, New York, NY & Virtually Online
  • 21 hours over 3 sessions
Book at School

Express Checkout – $975


Proceed to Checkout

No Booking Fees. Lowest Price Guaranteed. Earn 10% Rewards.

Give as a Gift

Start Dates (2)

  • $975
  • 21 hours over 3 sessions
20 left
Book
Show all 3 sessions
  • Mon, Jul 22 at 10:00am - 5:00pm
  • Tue, Jul 23 at 10:00am - 5:00pm
  • Wed, Jul 24 at 10:00am - 5:00pm
20 left
Book
Show all 3 sessions
  • Mon, Nov 04 at 10:00am - 5:00pm
  • Tue, Nov 05 at 10:00am - 5:00pm
  • Wed, Nov 06 at 10:00am - 5:00pm
Showing 12 of 2

Class Description

Description

What you'll learn in this javascript class:

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.

Create Animations with GreenSock

The GreenSock Animation Platform (GSAP) is the industry standard framework for web animation. Learn to animate just about anything in a webpage, such as scrolling animations (including parallax effects), animate logos, banner ads, and much more.

Prerequisite: This advanced course is for people who have experience coding webpages. Students should feel comfortable coding HTML and CSS. You should have knowledge equivalent to our Advanced HTML & CSS class.

Learn more about JavaScript for Front-End at Noble Desktop.

Syllabus

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

Refund Policy

  • Students may cancel up to 14 days before the class/program start date and receive a refund, less the registration fee (10% of the undiscounted course price). 
  • Cancellations within 14 days are not permitted, but students may reschedule up to three business days before the class start date.
  • For cancellations and reschedules, please email us at [email protected]"

Reviews of Classes at Noble Desktop (374)

(4.6-star rating across 374 reviews)
  • JavaScript for Front-End

    Anonymous review on 11/11/2016
  • JavaScript for Front-End

    Reviewed by Yukiko N. on 11/3/2014
See reviews for other classes at Noble Desktop
loading...
Hide Reviews

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

Noble Desktop

Noble Desktop is a renowned educational institution that specializes in providing comprehensive training in various creative and technology-related fields. Established in 1990 and headquartered in New York City, Noble Desktop has earned a stellar reputation for its high-quality courses and innovative...

Read more about Noble Desktop

CourseHorse Approved

This school has been carefully vetted by CourseHorse and is a verified NYC educator.

Noble Desktop

Noble Desktop

All classes at this location

We are located in New York City on 34th street and Madison Avenue, a few blocks from Penn Station, Port Authority and Times Square. You may also attend this class live online (virtual training) via Zoom. We will reach out with additional information, including the Zoom info and class files.

Also available virtually online

Reviews of Noble Desktop at coursehorse.com

Give This Course as a Gift Card

  • Thousands of classes
  • No expiration
  • Unique and memorable gifts for any occasion
  • Personalized
  • Explore a passion, gain a new skill, discover a new hobby, engage in a memorable experience
  • Instant delivery
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™

Buy a Gift Card

Book this Class as a Group Event

Booking this class for a group? Find great private group events

Or see all Coding Group Events

Explore group events and team building activities ranging from cooking, art, escape rooms, trivia, and more.

  • Price Lock Guarantee

    Secure your booking now and we'll match any price drop within 48 hours across all booking platforms, ensuring you never miss out on savings!

  • Earn 10% Reward Points

    Maximize your savings with every purchase. Unlock rewards on every transaction, ensuring you get the most value out of your experience!

  • No Added Fees

    Enjoy hassle-free transactions without worrying about additional charges. With us, what you see is what you pay - no surprises!

  • Curated Courses

    Discover a curated selection of courses handpicked by experts in the field. Dive into quality content that suits your learning needs and interests!

CourseHorse Gift Cards

  • Creative & unique gift for any occasion
  • Thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...