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
-
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.
-
Headings and paragraphs
Use h1 to h6 to outline content and paragraphs for text, and why heading levels matter for readers and search engines.
-
Embedding content safely: iframe, sandbox and allow
Embed maps, videos and other sites with iframe, and limit what they can do with sandbox, allow and referrerpolicy.
-
Native CSS nesting
Nest rules in plain CSS, the & selector, nesting media queries, and differences from Sass.
-
Text-level semantics: strong, em, code, mark and more
Elements that give meaning to text, such as strong, em, code, kbd, abbr, time and mark, and when to use each.
-
Metadata for sharing and search: canonical, Open Graph and icons
Head metadata that controls how pages appear in search and social shares, and what SEO plugins handle for you.
-
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.
-
Lists: ordered, unordered and description lists
When to use ul, ol and dl, nesting lists, and the start and reversed attributes.
-
CSS architecture: BEM, utility-first and scoped styles
How teams keep CSS maintainable: naming conventions, utility classes, component scoping and when each fits.
-
Links: absolute and relative URLs, fragments and new tabs
Write links with the a element, relative and absolute paths, links to page sections, email links, and safe new-tab links.
-
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().
-
Images: src, alt text, width and height
Add images with img, write useful alt text, and set width and height to prevent layout shift.
-
How browsers render CSS: style, layout, paint and composite
The rendering pipeline, what triggers layout and paint, and using DevTools to find slow styles.