Tutorials
Short, focused articles on one idea at a time. Filter by level or type, or search for a topic.
-
Errors, exceptions and debugging
Understand PHP’s error types, configure error display for development and production, use try/catch with exceptions, and debug with var_dump and logs.
-
What is responsive web design?
Why one site must work at every screen size, and the three ideas behind responsive design.
-
The viewport meta tag and mobile rendering
What the viewport meta tag does, why pages look tiny without it, and settings that harm accessibility.
-
Responsive images: srcset, sizes and picture
Serve the right image size and format for each screen with srcset, sizes and the picture element.
-
Fluid typography and spacing with clamp()
Scale type and spacing smoothly between screen sizes with clamp(), and keep text zoomable.
-
Responsive layouts without media queries
Intrinsic layouts that adapt by themselves with flex-wrap, auto-fit and minmax().
-
Choosing breakpoints from content, not devices
Find breakpoints where the layout breaks instead of copying device widths, and how many you really need.
-
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.
-
Headings and landmarks for screen reader navigation
How screen reader users jump between headings and landmarks, and how to structure pages so that works.
-
Keyboard accessibility: focus order and visible focus
Make every control reachable and operable by keyboard, keep a logical focus order, and style focus visibly.
-
Skip links and focus management
Add skip links, move focus deliberately after actions, and avoid focus traps and lost focus.
-
Accessible names: labels, aria-label and aria-labelledby
How assistive technology names controls, the naming order, and fixing unlabelled icon buttons.
-
Accessible forms: labels, instructions and errors
Labels, hints, required fields, grouped controls and error messages that everyone can find and fix.
-
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.