JavaScript Foundations
JavaScript Foundations picks up where CSS Foundations left off. The Summit Trail Outfitters site you built is structured and styled — now you will make it interactive. By the final module you will have shipped five production-quality features: a mobile navigation toggle, a tour category filter, a photo gallery lightbox, a contact form with full validation and success feedback, and a tour favorites list powered by localStorage.
What you will learn
Section titled “What you will learn”- How JavaScript runs in the browser and how to connect it to your HTML
- Variables, data types, operators, and template literals
- Control flow — if/else, loops, and conditional logic
- Functions — declarations, expressions, arrow functions, scope, and return values
- DOM manipulation — selecting, reading, modifying, creating, and traversing elements
- Events — click, input, keyboard, form submission, and event delegation
- localStorage and JSON for persisting data across page reloads
- Building and shipping complete, accessible interactive features from scratch
Prerequisites
Section titled “Prerequisites”This course assumes you have completed CSS Foundations or have equivalent knowledge. You should be comfortable writing HTML and CSS, working with a code editor, and using the browser to view your work.
The Summit Trail Outfitters project
Section titled “The Summit Trail Outfitters project”All exercises and capstones build on Summit Trail Outfitters — the same site from HTML and CSS Foundations, now made interactive. You can browse the reference source on GitHub or view the live reference site.
Modules
Section titled “Modules”01 — Getting Started with JavaScript
Section titled “01 — Getting Started with JavaScript”- What Is JavaScript?
- The Browser Console
- Your First Script
- Linking JavaScript to HTML
- How the Browser Runs JavaScript
- Developer Tools for JavaScript
02 — Variables and Data Types
Section titled “02 — Variables and Data Types”- Variables and Declaration
- Strings and String Methods
- Numbers and Math
- Booleans, null, and undefined
- Template Literals
- Operators
- Arrays
- Objects
03 — Control Flow
Section titled “03 — Control Flow”04 — Functions
Section titled “04 — Functions”- Function Declarations
- Parameters and Return Values
- Function Expressions
- Arrow Functions
- Scope
- Arrays and Objects as Function Data
05 — DOM Manipulation
Section titled “05 — DOM Manipulation”- What Is the DOM?
- Selecting Elements
- Reading and Changing Text Content
- Modifying Classes and Attributes
- Creating and Inserting Elements
- Traversing the DOM
06 — Events and Interactivity
Section titled “06 — Events and Interactivity”- Introduction to Events and addEventListener
- Click Events
- Input and Change Events
- The Event Object
- Event Delegation
- Handling Forms
- localStorage and JSON