# JavaScript for Front-End Canonical URL: ## Overview 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. 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. ## What you'll learn - Write JavaScript code to add animation and interactivity to webpages - Learn the fundamentals of the JavaScript language (variables, loops, arrays, functions, etc.) - Understand how to use free pre-made JavaScripts to quickly add many different kinds of common functionality - Create animated slideshows and build animated image enlargers - Learn to animate any content within a webpage, including SVG, using GreenSock (GSAP) ## 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](/classes/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 - Jul 13, 2026 – Jul 15, 2026 — NYC - Sep 22, 2026 – Sep 24, 2026 — NYC ## Instructors ### Dan Rodney — School Director, Instructor, & Senior Course Developer Dan Rodney has been a designer and web developer for over 20 years, creating coursework and leading innovative training initiatives at Noble Desktop. He teaches courses covering Figma, HTML & CSS, Adobe Photoshop, InDesign, Illustrator, and Power BI. Dan has also been at the forefront of integrating AI into design and business workflows, spearheading Noble Desktop’s latest AI course offerings. In addition to teaching and curriculum development, he writes custom scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more) and works with automation and AI-driven tools in his free time. You can find Dan on X (Twitter), LinkedIn, Facebook, and at danrodney.com. Learn more about [Dan Rodney's](/dan-rodney) background and expertise. ### Brian McClain — Program Director & Senior Instructor Brian McClain is an experienced instructor, curriculum developer, and web developer. Brian served as Director for a coding bootcamp before joining Noble Desktop in 2022, where he is now a lead instructor and course developer for both JavaScript and Python. He teaches Web Development, JavaScript, Python for Data Science, Machine Learning, and AI. Prior to Noble, he taught Python Data Science and Machine Learning as an Adjunct Professor of Computer Science at Westchester County College. Brian is also an active industry professional in the field of generative AI app development. His website and iOS app, Artmink, provides appraisals of art and antiques from user-uploaded images. ### Colin Jaffe — Instructor Colin Jaffe is a programmer, writer, and teacher with a passion for creative code, customizable computing environments, and simple puns. He loves teaching code, from the fundamentals of algorithmic thinking to the business logic and user flow of application building—he particularly enjoys teaching JavaScript, Python, API design, and front-end frameworks. Colin has taught code to a diverse group of students since learning to code himself, including young men of color at All-Star Code, elementary school kids at The Coding Space, and marginalized groups at Pursuit. Colin lives in Brooklyn with his wife, two kids, and many intricate board games. ### Greyson Frazier — Instructor Greyson Frazier is a Software Engineer with over a decade of experience building applications using JavaScript, React, Node.js, Angular, TypeScript, Java, AWS, Tailwind, and Next.js. He holds a Bachelor of Science in Computer Science from Rutgers University and previously worked as a software engineer at Capital One, where he developed scalable, enterprise-level applications. Greyson is an experienced instructor who has previously taught at Code Immersives and Coding Temple. He is passionate about creating hands-on, supportive learning environments and has developed curriculum designed to make complex technical concepts approachable and practical for students. Based in Bloomfield, NJ, Greyson stays current with evolving web development frameworks, particularly React and Next.js, and is dedicated to helping students develop the skills needed to succeed in today’s technology landscape. ### Chett Tiller — Instructor Chett Tiller is an experienced web developer who has brought his expertise with React, Node, and full-stack development to multiple companies over his career. After transitioning six years ago to an instructor, first at the Flatiron School and now at Noble Desktop, Chett has brought his passion for full-stack engineering to hundreds of students and guided them on their journeys from fledgling developers to their first job offers. When Chett isn't busy teaching students or writing curriculum, he builds online products for local volunteer organizations and dabbles in game development. ## FAQ ### Do I need to bring anything to the class? No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout. ## Reviews > I was introduced to Noble Desktop years ago by an employer. At the time, we were implementing a new workflow and there was no one on staff qualified to train the team. I was so impressed with the instructor and the class, that I signed up for additional classes on my own… everything from JavaScript to WordPress to UX/UI Design. These days the ability to remain employable is entirely dependent on the need to continually upgrade one’s skillset. No one provides better, more comprehensive (and well-documented) instruction and technical training than Noble Desktop. It’s also a great place to meet other people in my chosen field (and other industries) whom I might not have the opportunity to meet otherwise. > > — Abbe Eckstein, Freelance Art Director ## Pricing **Tuition:** $975