Discover Classes. Earn Rewards.

JavaScript for Front-End

at Practical Programming - Flatbush - Ditmas Park

Master the art of JavaScript coding and unlock the potential of jQuery with Practical Programming's hands-on course. Learn how to add animation, interactivity, and powerful functionality to your web pages using industry-standard frameworks. Take your front-end development skills to the next level and become a coding pro.

Course Details
Price $975
Start Date

Tue, Mar 05, 6:00pm - Mar 21, 9:00pm Eastern Time ( 6 sessions )
Next start dates ( 2)

20 seats left Need more seats? See group options for 8+

Location Interactive Online Classroom
Important
Class Level Advanced
Age Requirements 15 and older
Average Class Size 3
Purchase Options
Book at School
Or
Book Now

No Booking Fees. Lowest Price Guaranteed. Earn Rewards.

Give as a Gift Save to WishList

3 people wishlisted

Start Dates (3)

Interactive Online Classroom
TBD
$975
Book
Show all 6 sessions
  • Tue, Mar 05 at 6:00pm - 9:00pm
  • Thu, Mar 07 at 6:00pm - 9:00pm
  • Tue, Mar 12 at 6:00pm - 9:00pm
  • Thu, Mar 14 at 6:00pm - 9:00pm
  • Tue, Mar 19 at 6:00pm - 9:00pm
  • Thu, Mar 21 at 6:00pm - 9:00pm
Interactive Online Classroom
TBD
$975
Book
Show all 3 sessions
  • Mon, Apr 22 at 10:00am - 5:00pm
  • Wed, Apr 24 at 10:00am - 5:00pm
  • Thu, Apr 25 at 10:00am - 5:00pm
Interactive Online Classroom
TBD
$975
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
Save to WishList Purchase a Gift Card

Class Description

Description

What you'll learn in this web development course:

In this hands-on JavaScript class, you’ll start by learning the fundamentals of JavaScript code, and then get into jQuery. jQuery is an industry standard framework that lets you quickly and easily write powerful JavaScript. You’ll learn how to work with some useful jQuery plugins, and gain an understanding of how plugins work, so you can use any plugin!

This advanced course is for people who have experience building webpages. It is a coding class, so HTML & CSS knowledge equivalent to our Web Development Level 2 class is expected.

Prerequisite
Students should feel comfortable coding HTML and CSS. You should have knowledge equivalent to our Web Development Level 2 class

What You'll Learn

  • Write JavaScript code to add animation and interactivity to your webpages.
  • Learn the fundamentals of the JavaScript language (variables, loops, arrays, functions, etc.).
  • Understand how to use free JavaScript frameworks, such as the industry standard jQuery.
  • Learn how to use jQuery plugins to quickly can add many different kinds of common functionality.
  • Create animated slideshows.
  • Build animated image enlargers, show/hide additional content, and much more.



Learn more about JavaScript for Front-End at Practical Programming.


Remote Learning

This course is available for "remote" learning and will be available to anyone with access to an internet device with a microphone (this includes most models of computers, tablets). Classes will take place with a "Live" instructor at the date/times listed below.

Upon registration, the instructor will send along additional information about how to log-on and participate in the class.

Also available in-person in NYC

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

To reschedule or cancel, email us at [email protected]

All courses include a non-refundable registration fee (10% of the undiscounted course price).

  • Students may cancel up to 11 business days before the class/program start date and receive a refund, less the registration fee.
  • Cancellations within 11 business days are not permitted; however, students may reschedule up to 4 business days before the class start date.

Note: Any refunds must be requested within 180 days from the original payment date; courses rescheduled within 11 business days of the start date are not eligible for refunds.

Reviews of Classes at Practical Programming (378)

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

School: Practical Programming

Practical Programming

Practical Programming classes and workshops for everyone who wants to learn how to code from scratch or practice Python. You will learn how to start using Python, problem solving with algorithms and make dynamic web applications.

No coding experience needed, anyone who would like to learn how to code...

Read more about Practical Programming

CourseHorse Approved

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

Ready to take this class?
BOOK NOW

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

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.

CourseHorse Gift Cards

  • Creative & unique gift for any occasion
  • Choose from thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...