Beginner
-
Loops: for, while, for…of and for…in
Repeat work with each loop type, break and continue, and which loop suits arrays and objects.
-
Functions: declarations, parameters and return values
Define and call functions, default parameters, return values and function expressions.
-
Arrow functions
Arrow function syntax, implicit returns, and how arrows differ from regular functions.
-
Arrays: creating, reading and updating
Create arrays, read and change elements, add and remove items, and check length.
-
HTML tables for tabular data
Build tables with table, tr, th and td, add headers, and know when a table is the wrong tool.
-
How browsers render CSS: style, layout, paint and composite
The rendering pipeline, what triggers layout and paint, and using DevTools to find slow styles.
-
Forms: form, input, label and button
Build a working form, connect labels to inputs, and understand action, method and name.
-
View transitions and scroll-driven animations
Animate between page states with the View Transitions API and link animations to scroll position without JavaScript.
-
Input types and built-in validation
Email, number, date, url and other input types, plus required, min, max and pattern for browser validation.
-
Image loading: formats, lazy loading and fetchpriority
Choose between AVIF, WebP, JPEG, PNG and SVG, and control loading with loading, decoding and fetchpriority.
-
Audio and video with captions
Embed audio and video with native controls, multiple sources, and captions with the track element.
-
What is HTML? How web pages are built
What HTML is, how browsers turn it into a page, and how it works with CSS and JavaScript.
-
Complex tables: caption, scope and spanning cells
Make larger tables understandable with caption, thead, tbody, scope, colspan and rowspan.
-
Your first HTML page
Create an HTML file in a code editor, open it in a browser, and use DevTools to inspect it.
-
Form controls in depth: select, textarea, checkboxes, radios and fieldset
Every common form control, grouping with fieldset and legend, and default values.
-
HTML elements, tags and attributes
How elements, opening and closing tags, void elements and attributes work, with the nesting rules that prevent bugs.
-
Better forms with autocomplete, inputmode and enterkeyhint
Help browsers fill in forms and show the right mobile keyboard with autocomplete, inputmode and enterkeyhint.
-
HTML document structure: doctype, html, head and body
The skeleton every HTML page needs, what each part does, and the lang attribute.
-
Native interactive elements: details, summary and dialog
Build disclosures and modal dialogs with no JavaScript framework, and their built-in accessibility.
-
The head element: title, charset, meta and viewport
What belongs in the head: title, character set, viewport, description, and links to CSS and icons.