🎨

    HTML & CSS

    Master web development with HTML & CSS — 50 lessons from your first webpage to professional-grade layouts.

    Sign in to track your progress through this course

    👋 New to web development? Perfect place to start.

    HTML & CSS is the foundation of everything on the web. Start with Lesson 1 — no experience needed.

    Start Your First Lesson
    1

    Beginner Track

    ✦ Start Here ~2–3 hours

    Learn the fundamentals of HTML structure and CSS styling — build your very first webpage.

    Introduction to Web Development

    What HTML and CSS are, how the web works, and what you'll build

    Start

    HTML Basics & Structure

    Write your first HTML page — headings, paragraphs, and page structure

    Start

    HTML Elements & Attributes

    Links, images, lists, buttons — the building blocks of every webpage

    Start

    CSS Basics & Selectors

    Apply styles to HTML elements using selectors, classes, and IDs

    Start

    CSS Styling & Colors

    Control fonts, colours, backgrounds, and borders to make pages look great

    Start

    CSS Box Model & Display

    Understand margin, padding, border, and how elements take up space

    Start
    2

    Intermediate Track

    ~3–4 hours

    Master layouts with Flexbox and Grid, make sites responsive, and add CSS animations.

    CSS Layouts & Box Model

    Combine display, position, and the box model to build real layouts

    Start

    Flexbox Mastery

    Align and distribute elements with CSS Flexbox — the modern layout tool

    Start

    CSS Grid System

    Create complex two-dimensional layouts with CSS Grid

    Start

    Responsive Design

    Make your sites look perfect on phones, tablets, and desktops with media queries

    Start

    CSS Animations & Transitions

    Add smooth motion and interactivity to your pages with CSS

    Start
    3

    Expert Track

    ~2–3 hours

    Go beyond the basics with advanced selectors, transforms, custom properties, and web accessibility.

    Advanced CSS Selectors

    Target elements precisely with pseudo-classes, combinators, and attribute selectors

    Start

    CSS Transforms & 3D

    Rotate, scale, skew, and create 3D effects with CSS transforms

    Start

    CSS Custom Properties

    Build reusable design systems with CSS variables and dynamic theming

    Start

    Web Accessibility (A11y)

    Make your websites usable by everyone, including screen reader users

    Start
    4

    Advanced Track

    ~10–14 hours

    Deep-dive techniques for professional CSS engineers — architecture, performance, animations, and modern layout systems.

    Advanced HTML5 Semantic Architecture

    Use header, main, article, section, aside correctly for SEO and a11y

    Start

    Accessibility (A11y) Deep Dive & ARIA Roles

    ARIA labels, roles, live regions, and keyboard navigation patterns

    Start

    Mastering Complex Forms & Validation Patterns

    Build multi-step forms, custom validation, and error states

    Start

    Advanced Input Types, Sliders, Color Pickers, & Custom Controls

    HTML5 input types and styling custom form controls from scratch

    Start

    Responsive Typography with clamp(), fluid units, & viewport math

    Scale type fluidly across viewports with clamp(), vw, and container units

    Start

    CSS Flexbox: Advanced Patterns & Real Layouts

    Sticky footers, holy grail, card grids — real-world flex patterns

    Start

    CSS Grid Level 2: Subgrid, Masonry & Complex Layouts

    Subgrid, masonry layout, and named template areas in depth

    Start

    Container Queries & Modern Responsive Techniques

    Style components based on their container size, not the viewport

    Start

    CSS Cascade, Layers, Specificity & Inheritance (Deep Dive)

    Understand exactly how the browser resolves conflicting styles

    Start

    Advanced Selectors: :has(), :is(), :where(), nth-child mastery

    Use modern selectors to write less CSS and target elements precisely

    Start

    Building Scalable Design Systems with CSS Variables

    Create token-based design systems with custom properties and themes

    Start

    Responsive Images: srcset, sizes, picture, art direction

    Serve the right image at the right size for every device

    Start

    CSS Transitions & State Animations

    Animate hover, focus, and state changes smoothly with CSS transitions

    Start

    CSS Keyframe Animations & Motion Design

    Build complex, looping animations with @keyframes and timing functions

    Start

    Scroll-based Animations (scroll-behavior, scroll-timeline)

    Animate elements as the user scrolls using CSS scroll-timeline

    Start

    Custom Properties (CSS Variables) for Themes & Dynamic UI

    Build dark mode, themes, and dynamic UI changes with CSS variables

    Start

    Dark Mode Design with prefers-color-scheme

    Implement dark mode that respects system preferences automatically

    Start

    Advanced Positioning: sticky, fixed, absolute, smart layouts

    Master all position values and build sticky headers, sidebars, and overlays

    Start

    CSS Shapes & Clip-Path for Creative Layouts

    Create circles, polygons, and text wrapping around custom shapes

    Start

    Filters, Blend Modes & Modern Visual Effects

    Apply blur, grayscale, drop shadows, and mix-blend-mode effects

    Start

    CSS Architecture: BEM, OOCSS, SMACSS Patterns

    Organise large CSS codebases with proven naming and structuring patterns

    Start

    Building Reusable UI Components in Pure CSS

    Cards, modals, navbars, accordions — built and documented for reuse

    Start

    HTML Canvas Essentials (Drawing, Animation, Images)

    Draw shapes, text, and images with the HTML5 Canvas API

    Start

    SVG Mastery: Paths, Gradients, Filters, Animation

    Write and animate SVG inline for scalable, interactive graphics

    Start

    Responsive Navigation Patterns (Mobile/Tablet/Desktop)

    Hamburger menus, mega navs, and responsive nav patterns

    Start

    Modern Layout Techniques (Split screens, grids, hero headers)

    Recreate real-world page layouts with modern CSS techniques

    Start

    Complex Tables: Styling, Responsiveness & Accessibility

    Make data tables beautiful, responsive, and screen-reader friendly

    Start

    Print Stylesheets & Export-Friendly Layouts

    Create clean print layouts and PDF-export-friendly pages

    Start

    CSS Performance Optimization & Rendering Pipelines

    Reduce layout thrashing, use will-change, and keep CSS fast

    Start

    Progressive Enhancement & Graceful Degradation

    Build features that work for everyone, enhanced for modern browsers

    Start

    Custom Scrollbars & UI Chrome Styling

    Style scrollbars, selection highlights, and browser UI chrome with CSS

    Start

    Building Accessible Modals, Dialogs & Overlays

    Create modals that trap focus, handle Escape, and work with screen readers

    Start

    CSS Logical Properties for International Layouts

    Use logical properties for RTL-compatible, internationalisation-ready layouts

    Start

    Building Full Responsive Pages Without Frameworks

    Build a complete, polished responsive page using only vanilla HTML and CSS

    Start

    Final Project: Portfolio Website

    Build and deploy your own personal portfolio website from scratch

    Start

    Cookie & Privacy Settings

    We use cookies to improve your experience, analyze traffic, and show personalized ads. You can manage your preferences below.

    By clicking "Accept All", you consent to our use of cookies for analytics and personalized advertising. You can customize your preferences or reject non-essential cookies.

    Privacy Policy • Terms of Service