Course Overview

Master modern HTML and CSS as they are written today, from semantic document structure through to container queries, cascade layers and Tailwind. This course teaches the cascade properly, so that specificity and inheritance become tools you reach for rather than problems you fight.

You will build responsive layouts with Flexbox, Grid and container queries, work with modern colour and typography, and use Tailwind's CSS-first configuration to style real components.

Who should attend

Developers who write markup and styles as part of building applications and want to stop guessing at the cascade, and front-end developers whose CSS knowledge predates Grid, container queries and Tailwind. It also suits teams adopting a utility-first workflow who want to understand the CSS underneath rather than only the class names on top.

What you'll learn

• Structure documents with semantic HTML that serves accessibility and search equally
• Understand the cascade, specificity, inheritance and cascade layers well enough to predict them
• Build responsive layouts with Flexbox, Grid, subgrid and container queries
• Work with modern colour, custom properties and fluid typography
• Create transitions, keyframe animations and view transitions
• Style components with Tailwind using its CSS-first configuration

Course Prerequisites

Students don't need prior experience with older versions of HTML4 or CSS, it is however helpful to have some experience with these languages.

Outline

CSS has a reputation for being unpredictable, which is almost always a sign that the cascade is being treated as a mystery rather than a specification. This course takes the opposite approach: understand how the browser resolves a value, and the guesswork stops.

We start with semantic markup, then work through selectors, the cascade and specificity, layout with Flexbox and Grid, and responsive design that responds to the container rather than only the viewport. Tailwind arrives last, once there is enough CSS underneath it for its utility classes to read as shorthand rather than magic.

After this course, you will be able to:

• build accessible, semantic documents that search engines and screen readers both understand
• lay out interfaces with Flexbox, Grid and subgrid
• make designs respond to their container, not just the viewport
• reason about the cascade instead of fighting it
• style components with Tailwind and configure it in CSS

HTML

This session provides a fast-paced overview of modern HTML, including best practices for structure, performance and SEO. While the focus of this course is on advanced CSS and design, you will apply and integrate HTML elements as you progress through subsequent lessons on styling and layout.

• Understand the fundamentals of modern HTML
• Explore the history of HTML: from XHTML and HTML5 to the current HTML Living Standard
• Appreciate why the standard stopped carrying a version number at all
• Learn the roles of W3C and WHATWG in defining and maintaining the standard
• Structure documents using semantic elements for accessibility and search
• Apply ARIA roles and attributes, and understand when native elements make them unnecessary
• Create and optimise forms with validation and accessible labelling
• Use modern input attributes such as inputmode and autocomplete
• Integrate media elements: audio, video and responsive embeds
• Serve responsive images with srcset and <picture>
• Work with dialog and the popover API for overlays without JavaScript libraries

Meta Tags and SEO

• Use modern meta tags to optimise content for SEO
• Configure the viewport meta tag for responsive design
• Implement Open Graph tags for sharing on social platforms
• Use X/Twitter Card meta tags to customise previews
• Provide favicons, including SVG icons and color-scheme variants
• Integrate Schema Markup (JSON-LD) for structured data and rich results
• Validate SEO and performance with Lighthouse
• Debug and test meta tags with the platform sharing validators

Tools

• Apply best practices for HTML performance and maintainability
• Use tools such as Emmet for faster authoring
• Test HTML across browsers, devices and platforms
• Learn basic performance optimisation: resource hints, lazy loading and the Core Web Vitals

CSS

CSS Basics

• Understand the formal syntax of CSS rules: selectors, properties and values
• Use CSS selectors: basic selectors, combinators and advanced selectors
• Work with pseudo-classes and pseudo-elements
• Apply :is() and :where(), and appreciate their effect on specificity
• Select on context with :has(), the long-awaited parent selector
• Explore the cascade: specificity, inheritance and source order
• Organise large stylesheets with cascade layers (@layer)
• Scope styles deliberately with @scope

CSS Measurements and Units

• Learn the measurement units: absolute, relative and viewport-based
• Use rem and em deliberately rather than interchangeably
• Prefer the dynamic viewport units dvh, svh and lvh on mobile
• Calculate values with calc(), min(), max() and clamp()
• Implement fluid typography with clamp() instead of breakpoint steps
• Work with colours: hex, RGB, HSL and the wide-gamut oklch()
• Blend and derive colours with color-mix()
• Use special CSS values: inherit, initial, unset and revert

CSS Custom Properties

• Define and consume custom properties
• Understand how custom properties inherit, and how that differs from preprocessor variables
• Provide fallbacks with the var() second argument
• Register typed properties with @property to make them animatable
• Read and write custom properties from JavaScript

Responsive Design

• Apply media queries for responsive designs
• Use breakpoints to adapt layouts to screen sizes
• Design with a mobile-first approach and progressive enhancement
• Respond to the element's own size with container queries
• Respect user preference with prefers-color-scheme and prefers-reduced-motion
• Implement dark mode, including color-scheme and light-dark()
• Work with responsive images and fluid content

CSS Box Model

• Understand the box model: content, padding, borders and margins
• Use box-sizing to control box dimensions
• Prefer logical properties (margin-inline, padding-block, inset) over physical ones
• Maintain proportions with aspect-ratio
• Control image and video fitting with object-fit and object-position

CSS Positioning and Layout

• Use CSS positioning: static, relative, absolute, fixed and sticky
• Control layering with z-index and understand stacking contexts
• Learn Flexbox for one-dimensional layout and alignment
• Use gap in Flexbox as well as Grid
• Use CSS Grid for two-dimensional layout control
• Align nested grids to their parent with subgrid
• Contrast Flexbox and Grid, and choose deliberately between them
• Centre elements using the modern techniques, and discuss why this was ever hard
• Discuss float layout as history, not technique

CSS Animations and Transitions

• Use CSS transitions to animate property changes
• Create keyframe animations for complex movement
• Apply timing functions: ease, linear and cubic-bezier
• Control playback with delays, iterations and direction
• Animate between states with view transitions
• Drive animation from scroll position with scroll-driven animations
• Honour prefers-reduced-motion in every animation you write

Common Techniques and Best Practices

• Apply best practices for consistent sizing and spacing
• Understand the role of a modern reset, and why normalize.css is no longer it
• Nest rules with native CSS nesting, no build step required
• Improve readability with text-wrap: balance and pretty
• Structure a stylesheet so that it survives other people

Tailwind CSS

Introduction to Tailwind

• Understand Tailwind CSS and the utility-first approach
• Contrast Tailwind with hand-written CSS and with component frameworks such as Bootstrap
• Install Tailwind and appreciate its Vite plugin
• Configure Tailwind in CSS with @theme, rather than a JavaScript config file
• Appreciate what Preflight resets, and how to opt out of it
• Understand how Tailwind detects the classes you use
• Discuss the trade-offs the utility-first approach actually makes

Using Tailwind

• Style components with Tailwind's utility classes
• Use responsive utilities to adapt designs across breakpoints
• Apply variants for hover, focus and other states
• Compose container-relative designs with the container query variants
• Extend the design system with custom theme tokens
• Implement dark mode the Tailwind way
• Drop to arbitrary values when the design system genuinely does not cover a case
• Apply best practices for clean, maintainable Tailwind

Frequently asked questions