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
-
Media queries: width, orientation and user preferences
Media query syntax, range syntax, and querying user preferences such as dark mode and reduced motion.
-
Skip links and focus management
Add skip links, move focus deliberately after actions, and avoid focus traps and lost focus.
-
Responsive images: srcset, sizes and picture
Serve the right image size and format for each screen with srcset, sizes and the picture element.
-
Accessible names: labels, aria-label and aria-labelledby
How assistive technology names controls, the naming order, and fixing unlabelled icon buttons.
-
Fluid typography and spacing with clamp()
Scale type and spacing smoothly between screen sizes with clamp(), and keep text zoomable.
-
Accessible forms: labels, instructions and errors
Labels, hints, required fields, grouped controls and error messages that everyone can find and fix.
-
Responsive layouts without media queries
Intrinsic layouts that adapt by themselves with flex-wrap, auto-fit and minmax().
-
Introduction to ARIA: roles, states and the first rule
What ARIA does and does not do, roles, states and properties, and why native HTML comes first.
-
Choosing breakpoints from content, not devices
Find breakpoints where the layout breaks instead of copying device widths, and how many you really need.
-
Links or buttons? Choosing the right element
Links navigate and buttons act: the difference for keyboard and screen reader users, and fixing div buttons.
-
Responsive tables and wide content
Keep tables, code blocks and embeds usable on small screens without breaking the page.
-
Testing responsive designs in DevTools and on real devices
Device emulation, zoom testing at 200 and 400 percent, real-device testing and common responsive bugs.
-
Container queries and container units
Make components respond to their container instead of the viewport, with container-type, @container and cq units.
-
Responsive navigation patterns
Menus that adapt from desktop to mobile: priority, off-canvas and disclosure patterns, with accessibility built in.
-
Dynamic viewport units: svh, lvh and dvh
Why 100vh breaks on mobile, and how small, large and dynamic viewport units fix full-height layouts.
-
Symbols and well-known symbols
Unique property keys with Symbol, and customising language behaviour with Symbol.iterator and friends.
-
Map, Set, WeakMap and WeakSet
When to use Map and Set instead of objects and arrays, and what the weak versions are for.
-
Cancellation, retries and backoff
Cancel work with AbortController, add timeouts, retry with exponential backoff and avoid race conditions.
-
Regular expressions in JavaScript
Pattern syntax, flags, testing and replacing, named groups, and when a regex is the wrong tool.
-
Designing a small JavaScript library
API design, defaults and options objects, error messages, types, versioning and publishing to npm.