HTML Complete Course
Build semantic, accessible web pages from your first file to native dialogs, safe embeds and fast loading.
- Beginner
- 25 lessons
- 10 hours
Web development
Courses
CSS Complete Course
Style and lay out modern websites, from your first rule to cascade layers, Grid and scroll-driven animation.
- Beginner
- 34 lessons
- 16 hours
Responsive Web Design
Build pages that work on every screen, from a 320 pixel phone to a wide desktop monitor.
- Beginner
- 13 lessons
- 6 hours
Web Accessibility Essentials
Build and test websites that disabled people can use, from alt text to WCAG 2.2 audits.
- Beginner
- 22 lessons
- 12 hours
JavaScript Complete Course
Learn modern JavaScript from your first script to closures, async code, modules and the event loop, with projects you build as you go.
- Beginner
- 54 lessons
- 23 hours
Tutorials
-
CSS architecture: BEM, utility-first and scoped styles
How teams keep CSS maintainable: naming conventions, utility classes, component scoping and when each fits.
-
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.
-
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().
-
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.
-
The popover attribute
Show menus, tooltips and pickers with the popover attribute and popovertarget, without JavaScript.