JavaScript & jQuery Courses in NYC: Front-end Web Development Bootcamp

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 ahve a solid grasp of JavaScript and jQuery, and you'll be able to use any plugin your heart desires.

This course has a prerequisite

Students should feel comfortable coding HTML and CSS. You should have knowledge equivalent to our Advanced HTML & CSS class.

Schedule & Enrollment: JavaScript for Front-End

18 Hours
$975

NYC or Live Online
Free retake
Expert instructors
Small classes

This course is offered by our affiliate school, Noble Desktop.
View upcoming course dates and register at nobledesktop.com.

Tuition

As one of our smaller courses, tuition for this course is due in full before the start date. The best way to save on this course is to take it as part of a certificate program.

Full Tuition

$975
Due before the class starts

What’s Included

18 hours of hands-on instruction
Live, project-based training from experts
Retake for free within 1 year
Verified digital certificate of completion

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
Top-notch curricula that have been tried and tested over many cohorts and are consistently improved for an optimal learning experience
Supplemental materials to assist both during and after the course - please refer to specific course pages to see what supplemental materials are offered
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
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.

However, if you plan to take the course live online, you may need to obtain required software. We’ll help you get set up with a free trial of paid software prior to the class. Most of our coding classes utilize freely-available open-source software. For most of our design and motion graphics courses, we will help you get set up with a free trial of Adobe Creative Cloud. If you attend the course in-person, we will have a computer already set up for you with all of the required software for no additional cost.

Do you offer any discounts for this course?

We don’t currently offer discounts as we do our best to affordably prices our courses.

Take this course as part of a certificate program and save:

Front-End Web Development Certificate

Price: $3,495 | Hours: 108 Hours
Web Design with WordPress & PHP Certificate

Price: $5,000 | Hours: 0 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

Learn the Skills Guarantee™

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

Hands-on, personalized training

Learn with real-world projects

Several students, sitting at computers, looking at the front of the classroom

Cutting edge curriculum

Step-by-step instruction to boost retention

The Career Centers instructors are highly skilled communicators who really know their craft. They are wonderful about explaining and re-explaining when necessary and I never felt rushed or foolish for asking a question.
—Diane Speros

Learn from industry experts

Gain industry knowledge from professionals

Free retake

Retake the course for free within one year

Interactive Training

Learn in Real-Time with Small Class Sizes

Attend this course in-person in NYC or Live Online via Zoom. Engage with expert instructors, ask questions, and get feedback on your exercises and projects.

Unlike other providers, these are not mass open-enrollment classes. At NYC Career Centers, you’ll learn in small groups (typically 8-15 students) and receive personalized attention.

On Campus in NYC 185 Madison Avenue, NYC

Get face-to-face interaction with an instructor and other students when you learn at our NYC campus. Courses are hands-on with a computer and software provided.

Live, interactive class
Experienced instructor in the room with you
Computer and software provided

More about our campus

Live Online Remote, from anywhere

Get the same interactivity and access to the instructor as in-person students. There are no extra fees and we’ll work with you to ensure your remote setup is perfect.

Live, interactive class
Experienced instructor teaching over Zoom
Remote setup assistance provided

More about live online training

photo of instructor leading a class in person

student taking a class live online, seated on their living room floor, leaning against a couch

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of JavaScript for Front-End

Free Retake & Class Recordings

Missed a session or need a refresher? We have you covered!

Free Retake

We offer a single free retake of the class within a year.

Class Recordings

You can also access recordings of each session in your student portal within one business day of the session’s end. Recordings are available for one month after the session.

See terms and conditions.

JavaScript for Front-End Curriculum

What You’ll Learn at a Glance

Write your own JavaScript to add animation and interactive functionality to your webpages.
Understand how to use freely available JavaScript frameworks, including the industry standard: jQuery.
Create animated slideshows with transitions such as fades or slides.
Build animated image enlargers, show/hide additional content, and more.

Course Syllabus

Download Syllabus PDF

Section 1

Fundamentals of JavaScript Code

JavaScript methods (such as alerts)
Variables
The importance of quotes
Numbers vs. strings
Concatenation

Reusing Code with Functions

Defining functions
Calling functions
Defining parameters & passing arguments

Simple Accordion with JavaScript

Targeting elements by ID
Hiding & showing elements with JavaScript

If Statements: Clearing Form Fields

Testing code in the JavaScript Console
Getting & setting properties
Using if statements
Reshowing text hints in empty form fields

Section 2

Introduction to JavaScript Objects & the DOM

Intro to objects
The global object
Breaking open & manipulating objects

Dynamically Changing Content with Custom Objects

Checking the functionality of the select menu
Getting the chosen value
Dynamically changing the state name value
Dynamically changing the rest of the values

Introduction to Arrays & the Math Object

Creating an array
Editing an array
Creating an array of welcome headings
The Math object
Using the Math object to pick random headlines

Introduction to For Loops

Creating a for loop
Using the for loop to set dropdown menus
Clearing the To menu
Optional bonus: refining the menu selection experience

Section 3

Exploring JavaScript Selectors

Intro to JavaScript selectors
Selecting multiple elements & elements without IDs
Getting a specific list item
Getting elements by class name
Getting multiple items using querySelectorAll()
Getting a single item using querySelector()
Chaining selectors together
Targeting elements by data attribute

Photo Filter Website: User Friendly Navigation

Setting up the selectors with data attributes
Getting the selectors on load
Toggling the filter buttons
Refining the filter buttons

Photo Filter Website: Getting the Photos to Filter

Creating an array to store the selectors
Getting the All button to select all filters
Getting the rest of the buttons to select the other filters
Initially hiding the photos
Getting the photos to filter

Photo Filter Website: Creating an Exclusive Filter

Adding a checkbox to toggle exclusive filtering on/off
Separating the inclusive & exclusive filters
Writing a conditional to select the appropriate filter
Programming the exclusive filter
Rerunning the filter when the checkbox is toggled
Improving the user experience

Section 4

Showing/Hiding Content with jQuery Animation

Getting started with jQuery
Running code when the document is ready
Click events
Using jQuery’s slideToggle() method
Supporting JavaScript disabled users

Sharing JavaScript Across Pages

Externalizing JavaScript
Linking to the JavaScript file

jQuery Hover Animation

Adding an outline with CSS
Using jQuery’s hover() method
Using jQuery’s animate() method

More Advanced jQuery Showing/Hiding

Adding an animation to reveal hidden content
Targeting the proper div: traversing the document
Swapping the button image with jQuery

Section 5

jQuery Lightbox: A Pop-up Image Viewer

Linking to the plugin files
Initializing the pop-up
Grouping the photos into a gallery
Adding captions
Removing the counter
Customizing the appearance

jQuery Cycle: A Simple Slideshow

Initial setup
Defining what content gets cycled
Adding more cycles & exploring options
Reversing the animation

jQuery Cycle: Adding Slideshow Controls

Preventing a possible “flash of unstyled content”
Enabling the slideshow
Adding & customizing the controls

Section 6

jQuery Cycle: Adding a Pause Button

Adding a pause/play button
Styling the pause/play button
Checking to see if the cycle is paused
Making the pause/play button work

jQuery Form Validation

Initializing the plugin & setting options
Customizing the error messages
Changing the location of the error messages
Styling the error messages

jQuery Image Carousel

Linking to the plugin files
Creating the carousel
Styling the carousel
An easy way to add prev & next buttons
Adding custom prev & next buttons
Setting how many items are shown

Frequently Asked Questions

Does this course require any prior knowledge or experience?