Your roadmap

How the web works, and how to write the structure every page is built on.

1. 01Welcome to the WebGet oriented in how websites are built and rendered, set up a simple workflow for writing and viewing your own pages, and learn how a page describes itself to browsers and search engines.
2. 02HTML — Building the SkeletonLearn the core HTML tags that structure a page's content, from headings and text to lists, links, images, inline formatting, and attributes.
3. 03More HTML — Forms, Tables & Semantic TagsLearn how semantic tags describe the meaning of page regions, how forms collect and validate input with a wide range of field types, and when tables (with captions, spans, and headers) are the right tool for data.

Level capstone: Personal Profile Page

Give your pages a visual voice, then teach them to make decisions.

1. 04CSS Basics — Selectors, Colors & the Box ModelLearn how CSS selects HTML elements and controls their color, spacing, size, and text using the box model and a full toolkit of selectors.
2. 05CSS Layout — FlexboxLearn how colors, units, backgrounds, display, and Flexbox work together to control both the visual detail and the overall layout of a page.
3. 06JavaScript Basics — Variables, Types & OperatorsLearn how to store and work with data in JavaScript using variables, data types, operators, and how to read and change elements on the page.
4. 07JavaScript Control Flow — Conditionals & LoopsLearn how to make decisions with if statements and switch, and repeat actions with for, while, and for...of loops in JavaScript.

Level capstone: Digital Business Card

Respond to people: layouts that adapt, pages that react to every click.

1. 08CSS Grid & Responsive DesignLearn to build two-dimensional layouts with CSS Grid and make them adapt gracefully to any screen size.
2. 09JavaScript Functions & ScopeLearn to package logic into reusable functions and understand exactly where variables can and can't be seen.
3. 10The DOM — Making Pages Come AliveUnderstand the Document Object Model as JavaScript's live map of the page, and learn to read and change it.
4. 11Events & InteractivityLearn to listen for what users do, clicks, typing, and more, and respond to it with JavaScript.
5. 12Forms & ValidationLearn to capture form data with JavaScript and validate it before it goes anywhere, giving users clear, immediate feedback.
6. 13CSS Transitions & AnimationsLearn to add smooth, purposeful motion to interface changes using CSS transitions and keyframe animations.

Level capstone: Interactive Quiz App

Work with real data from real services, and structure code that survives growth.

1. 14Arrays & Objects Deep DiveLearn to transform and reshape collections of data with map, filter, reduce, and nested object structures.
2. 15Working with APIs & JSONLearn to fetch real data from the web using JSON and the Fetch API, and render it dynamically into the page.
3. 16Asynchronous JavaScript — Promises & Async/AwaitUnderstand how JavaScript handles operations that take time, and write clean asynchronous code with async/await.
4. 17Browser Storage & Web APIsPersist data between visits using localStorage and sessionStorage, and explore browser APIs beyond the DOM.
5. 18Modern CSS ArchitectureOrganize growing stylesheets with custom properties, a naming convention like BEM, and a real dark mode.
6. 19Modern JavaScript — ES6+ Classes & ModulesOrganize larger programs with classes and modules, the same tools used to structure real applications.

Level capstone: Movie Explorer App

Ship work that is accessible, fast, tested and live on the internet.

1. 20Accessibility & PerformanceLearn to build sites that work for every visitor and load quickly on every connection, because both are core parts of professional quality, not extras.
2. 21Developer Workflow — npm, Git & Build ToolsLearn the everyday tools professional developers use to manage code, dependencies, and builds so your projects are organized, shareable, and safe to change.
3. 22Testing Your CodeLearn to write automated tests that verify your code works correctly now and keeps working as you change it later.
4. 23Deployment — Shipping Your WorkLearn to take a project from your local machine to a live, public URL that anyone in the world can visit.
5. 24Beyond Vanilla — Where Frameworks Fit InUnderstand what frameworks like React, Vue, and Svelte actually add on top of the JavaScript you already know, and prepare to bring everything together in your final portfolio.

Level capstone: The Complete Portfolio