# JavaScript for Front-End

Canonical URL: <https://www.careercenters.com/courses/javascript-jquery>

## Overview

#### Once You've Built Your Site's Layout and Style, It's Time to Add Functionality.  Enter: JavaScript.

In this hands-on JavaScript class, you’ll start by learning the fundamentals of JavaScript, before diving into jQuery. jQuery is an industry-standard framework that lets you quickly and easily write powerful JavaScript. We'll teach you to use some of the most popular jQuery plugins to help you get the most out of JavaScript.  By the end of this course, you'll have a solid grasp of JavaScript and jQuery, and you'll be able to use any plugin your heart desires.

## What you'll learn

- Write JavaScript to add animation and interactivity to your webpages
- Work with the DOM to get and set element properties
- Write functions and attach event handlers
- Use arrays, the Math object, and loops
- Share JavaScript across pages with external JS files
- Work with conditionals and the Date object
- Use jQuery and plugins to add common functionality quickly

## Prerequisites

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](/courses/web-development-level2) class.

## Curriculum

### 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

## Schedule
- Jan 19, 2027 – Jan 21, 2027 — NYC
- May 24, 2027 – May 26, 2027 — NYC
- Sep 20, 2027 – Sep 22, 2027 — NYC

## FAQ

### Is this course open to beginners?

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.

### Do you offer payment plans or student financing for this course?

This course does not qualify for payment plans or student financing. See our Payment Plan FAQ to find related programs that qualify.

### Can I take this course online (remote learning)?

No upcoming live online dates are currently available. Please contact us about future availability.

### What happens if I need to miss a session?

You have some options: You can watch a recording of the session. We will provide any course materials. Contact us to confirm whether remote attendance is available for your session. You can use your free retake to make up any missed class time.

### What’s included with my tuition?

A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement Expert instructors who are industry professionals and experienced educators that are driven to help you succeed Access to industry-standard software during your training Comprehensive learning materials including proprietary workbook developed by industry experts A 1-year free retake policy which allows students to retake any part of the course or program for free to refresh the materials and gain additional practice 30-day access to class recordings to review material at your own pace A certificate of completion to verify your accomplishment

### Are there any additional fees or expenses?

There are no extra fees or taxes for our courses. The price you see on this page is the maximum you’ll pay us.

### Do you offer any discounts for this course?

Take this course as part of a certificate program and save: Front-End Web Development Certificate Price: $3,495 | Hours: 108 Hours Full-Stack Web Development Certificate Price: $7,995 | Hours: 420 Hours Software Engineering Certificate Price: $10,995 | Hours: 510 Hours Web Design Certificate Price: $4,995 | Hours: 162 Hours

## Pricing

**Tuition:** $975