JavaScript for Front-End

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.

Course Syllabus

Section 1

• Fundamentals of JavaScript Code
• Reusing Code with Functions
• Simple Accordion with JavaScript
• If Statements: Clearing Form Fields

• Introduction to JavaScript Objects & the DOM
• Dynamically Changing Content with Custom Objects
• Introduction to Arrays & the Math Object
• Introduction to For Loops

• Exploring JavaScript Selectors
• Photo Filter Website: User Friendly Navigation
• Photo Filter Website: Getting the Photos to Filter
• Photo Filter Website: Creating an Exclusive Filter

• Showing/Hiding Content with jQuery Animation
• Sharing JavaScript Across Pages
• jQuery Hover Animation
• More Advanced jQuery Showing/Hiding

• jQuery Lightbox: A Pop-up Image Viewer
• jQuery Cycle: A Simple Slideshow
• jQuery Cycle: Adding Slideshow Controls

• jQuery Cycle: Adding a Pause Button
• jQuery Form Validation
• jQuery Image Carousel