Overview
Your complete guide to The front end
Build step one: the interface, what the user sees and clicks. Eight lessons from absolute zero: HTML builds the structure of the page, CSS lays it out and makes it fit a phone, and JavaScript makes it respond and talk to the server, until you build a complete to-do list and an order page. You edit every example and see the result inside the lesson.
Non-technical and technical learners alike. Every part opens two ways in: a plain path built on an analogy for someone starting from zero, and a detailed path for someone who knows the basics and wants depth.
An animation, then what you need before you start, then the idea with code you run, then a worked example, then review cards and "test your understanding" questions.
Do not leave a part before you can answer its questions without guessing. Reading alone proves nothing.
Pick a topic
A look at The front end
Structure first (HTML), then looks (CSS), then the language (JavaScript), then wiring the language to the page (DOM), then the page talking to the server (fetch). Each lesson adds a layer to the same café page, and each language gets two lessons: the basics from zero, then real use.
| Part | Topic | You learn |
|---|---|---|
| 1 | Your first web page: HTML from zero | Tags, elements and attributes, the file skeleton, text, links, images, lists and tables |
| 2 | Semantic HTML: meaningful structure, forms and access for everyone | Semantic elements, forms and validation, responsive images, accessibility, page metadata |
| 3 | CSS from zero: colours, fonts and the box | Rule shape, selectors, colours, fonts and units, the box, specificity |
| 4 | CSS for layout: Flexbox, Grid and responsiveness | Flex and Grid, responsiveness and mobile first, variables and dark mode, logical properties, transitions |
| 5 | JavaScript from zero: values, decisions and loops | console.log, const and let, types, text and numbers, ===, if and else, for and while |
| 6 | JavaScript: functions, arrays and objects | Functions and arrows, arrays and map/filter/reduce, objects, destructuring and spread, JSON |
| 7 | JavaScript and the DOM: a page that responds | The DOM tree, querySelector, textContent and classList, creating elements, events and delegation, state then render, localStorage |
| 8 | Asynchronous JavaScript: timers, promises and fetch | The event loop, setTimeout, Promise, async/await, try/catch, fetch, loading states, Promise.all |
Done with this lesson?
Sign in to save your progress.