Tutorials
Short, focused articles on one idea at a time. Filter by level or type, or search for a topic.
-
Numbers and Math
Number behaviour, floating-point surprises, parsing numbers, rounding and the Math object.
-
Loading performance in HTML: preload, preconnect, async and defer
Control how the browser fetches resources with resource hints and script loading attributes.
-
Conditionals: if, else, switch and the ternary operator
Make decisions with if and else, truthy and falsy values, switch and the ternary operator.
-
Loops: for, while, for…of and for…in
Repeat work with each loop type, break and continue, and which loop suits arrays and objects.
-
Semantic layout: header, nav, main, article, section, aside and footer
Structure pages with semantic elements instead of generic divs, and how they map to landmarks.
-
HTML tables for tabular data
Build tables with table, tr, th and td, add headers, and know when a table is the wrong tool.
-
Native CSS nesting
Nest rules in plain CSS, the & selector, nesting media queries, and differences from Sass.
-
Forms: form, input, label and button
Build a working form, connect labels to inputs, and understand action, method and name.
-
Subgrid and intrinsic grid layouts
Align nested content to a parent grid with subgrid, and size tracks with min-content, max-content and fit-content.
-
Input types and built-in validation
Email, number, date, url and other input types, plus required, min, max and pattern for browser validation.
-
CSS architecture: BEM, utility-first and scoped styles
How teams keep CSS maintainable: naming conventions, utility classes, component scoping and when each fits.
-
Image loading: formats, lazy loading and fetchpriority
Choose between AVIF, WebP, JPEG, PNG and SVG, and control loading with loading, decoding and fetchpriority.
-
Modern colour: color-mix(), relative colours and light-dark()
Build palettes and dark mode from a few tokens with color-mix(), relative colour syntax and light-dark().
-
Audio and video with captions
Embed audio and video with native controls, multiple sources, and captions with the track element.
-
How browsers render CSS: style, layout, paint and composite
The rendering pipeline, what triggers layout and paint, and using DevTools to find slow styles.
-
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.
-
View transitions and scroll-driven animations
Animate between page states with the View Transitions API and link animations to scroll position without JavaScript.
-
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.