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
-
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.
-
What is web accessibility, and who does it help?
Disabilities and situations that affect how people use the web, assistive technologies, and the legal and business case.
-
WCAG explained: principles and conformance levels
The POUR principles, success criteria and A, AA and AAA levels in WCAG 2.2, in plain language.
-
Writing useful alt text
When images need alt text, how to describe them for context, and when an empty alt is correct.
-
What is responsive web design?
Why one site must work at every screen size, and the three ideas behind responsive design.
-
Headings and landmarks for screen reader navigation
How screen reader users jump between headings and landmarks, and how to structure pages so that works.
-
The viewport meta tag and mobile rendering
What the viewport meta tag does, why pages look tiny without it, and settings that harm accessibility.
-
Colour contrast and not relying on colour alone
Contrast ratios for text and interface elements, checking them, and showing meaning with more than colour.
-
Mobile-first CSS
Write base styles for small screens and enhance for larger ones with min-width queries.
-
Keyboard accessibility: focus order and visible focus
Make every control reachable and operable by keyboard, keep a logical focus order, and style focus visibly.
-
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.
-
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.
-
Timers: setTimeout, setInterval and requestAnimationFrame
Schedule work, cancel timers, and animate smoothly with requestAnimationFrame.
-
Values and references: copying and mutation bugs
Why changing a copied object changes the original, comparing objects, and writing code that avoids accidental mutation.
-
Prototypes and inheritance
The prototype chain behind objects and classes, Object.create, and how property lookup works.