What you’ll learn

Chapter 1The frontend toolkit – How a page is built: regions, classes, the box model and which CSS rule wins.
Page regions: header, main, footer · Classes: one style for many elements · The box model and box-sizing · Which rule wins? Specificity · Boss: a profile card
Chapter 2Layout with Flexbox – Putting elements in a row, distributing, wrapping and growing them – all the way to a finished navigation bar.
display: flex – elements in a row · Distributing and aligning: justify-content and align-items · Spacing and wrapping: gap and flex-wrap · Letting things grow: flex: 1 · Boss: a navigation bar
Chapter 3Layout with Grid – Columns and rows at once: fr units, repeat, named areas and grids that adapt by themselves.
display: grid – defining columns · Writing it shorter: repeat() · Naming areas: grid-template-areas · Grids that adapt by themselves: auto-fit and minmax · Boss: a dashboard grid
Chapter 4Responsive design: one page for every device – Viewport, mobile first, media queries and fluid sizes – so your page looks good on phones and laptops.
The viewport: don’t let phones shrink the page · Mobile first with min-width · Hiding things on small screens: max-width · Fluid sizes: max-width, clamp and images · Boss: a responsive product page
Chapter 5A design system with CSS variables – Defining colours and spacing in one place, dark mode, components with variants and states like :hover.
CSS variables: one colour everywhere · A spacing scale · Dark mode with prefers-color-scheme · Components with variants · Boss: a button set with states
Chapter 6Forms and accessibility – Labelled fields, built-in validation, visible focus and help for screen readers – forms everyone can use.
Every field needs a label · Built-in validation: required, type and minlength · Visible focus with :focus-visible · Describing images and icons: alt and aria-label · Boss: an accessible contact form
Chapter 7JavaScript in the browser: the DOM – Finding elements, changing text, toggling classes and building new elements from data.
Finding elements: querySelector and textContent · All at once: querySelectorAll and forEach · Switching classes: classList · Building new elements from data · Boss: a leaderboard from data
Chapter 8Events: pages that react – Catching clicks, input and keys, controlling a list with a single listener and building tabs.
The first event listener · Typing along live: the input event · Catching keys: keydown · One listener for many: event delegation · Boss: building tabs
Chapter 9Loading data with fetch – Fetching data from an API, writing it readably with async/await, showing loading states and catching errors.
Fetching data: fetch and json · More readable with async and await · Loading, done, empty: showing states · When things go wrong: response.ok and try/catch · Boss: a top list from the API
Chapter 10HTML + CSS: structure meets style – HTML builds the page, CSS styles it – and classes, ids and <link> connect the two.
The <style> block in the <head> · Classes connect HTML and CSS · id for one, class for many · Your own CSS file with <link> · Boss: a stylish profile card
Chapter 11HTML + JavaScript: the page comes alive – With <script> JavaScript reaches into the page: find elements, change texts, react to clicks and input.
The <script> tag brings JavaScript into the page · querySelector: find elements like in CSS · Reacting to clicks: addEventListener · Reading input: value · Boss: a small to-do list
Chapter 12HTML + JavaScript: processing forms – HTML collects input in forms, JavaScript processes it: submitting, reading choices, validating and reacting live.
Submitting a form: submit · Reading choices: select and checkbox · Validating input and showing errors · Reacting live: the input event · Boss: validating a sign-up form
Chapter 13HTML + CSS + JavaScript: all together – JavaScript toggles CSS classes, sets styles, shows and hides things and remembers data in the browser.
JavaScript toggles CSS classes · element.style: setting styles directly · Showing and hiding with hidden · Remembering in the browser: localStorage · Boss: a colourful quiz
Chapter 14JavaScript + HTML: building lists from data – Data lives in JavaScript arrays, the page shows it as HTML: creating elements, rendering lists, filtering, searching and sorting.
Creating elements: createElement and append · Data to HTML: map and join · Filtering with buttons: filter and data attributes · Live search: input, filter and includes · Boss: a product catalogue
Chapter 15JavaScript + JSON: data from the web – JSON is the language programs use to exchange data. fetch gets it from an API, JavaScript shows it on the page.
JSON: text becomes data · JSON.stringify: data becomes text · fetch: getting data from an API · Bringing API data onto the page · Boss: loading with an error case
Chapter 16State in the browser: saving and redrawing – Remembering data in localStorage, storing objects as JSON, showing a state with a render function and filtering it.
Remembering things: localStorage · Storing lists and objects: JSON · One state, one render function · Filtering: the same data, a different view · Boss: a wish list that remembers
Chapter 17Animations and transitions – Smooth transitions with transition, movement with transform, your own animations with @keyframes – and respect for “reduced motion”.
Smooth transitions: transition · Moving without jank: transform · Your own animations: @keyframes · Being considerate: prefers-reduced-motion · Boss: a lively product card
Chapter 18React: components and props – Interfaces from building blocks: components, props, children, lists with key and showing content only when needed.
A component is a function · Props: filling components with values · Passing content through: children · Lists with map and key · Boss: product cards with badges
Chapter 19React: state and events – Values that change: useState, lists in state, expanding and collapsing content and passing state to child components.
useState: a value that changes · Lists in state: never change, always rebuild · Expanding and collapsing · Lifting state up · Boss: a shopping cart with a total
Chapter 20React: effects and data – Loading data in useEffect, showing loading and error states and writing your own hooks that make logic reusable.
Loading data with useEffect · Showing a loading state · Catching errors: catch · Your own hooks: reusing logic · Boss: filtering loaded data
Chapter 21Project: a landing page – A real home page for a product: hero section, benefits, prices, footer – and at the end everything together, responsive.
The hero section: the first impression · Benefits in a grid · Price cards with a recommendation · The footer: links and small print · Boss: the whole landing page
Chapter 22Project: a shop with a shopping cart – Loading products from the API, marking sold-out items, adding to the cart, calculating the total and saving the cart.
Loading and showing products · Marking sold-out items · Adding to the shopping cart · Calculating the sum · Boss: the finished mini shop
Chapter 23Project: a weather dashboard – Loading the current weather, switching the city with a select box, showing a three-day forecast, catching unknown cities and combining everything into a dashboard.
The current weather · Choosing the city · The three-day forecast · Catching unknown cities · Boss: the weather dashboard
Chapter 24Project: your portfolio – Your own portfolio page: project cards from data, a filter by technology, a contact form with validation and a saved colour scheme.
Project cards from data · Filtering by technology · A contact form with validation · Remembering the colour scheme · Boss: your portfolio

Final project: Your portfolio

A responsive portfolio page with project cards, a filter, a contact form and saved settings.

How it works

Every lesson starts with short explanation pages. Then you practise with multiple-choice questions, fill-in-the-gap tasks, putting code in order and writing your own code – with hints and instant feedback. Free, without ads, on phone, tablet and PC.

Learn Frontend development now