HTML & CSS

HTML & CSS Fundamentals

Build structured, styled, responsive, accessible pages from scratch.

beginner8 lessons4 modules6h total

Helpful before you begin (optional -- you can start this course now): How Computing & the Web Work

Who it's for

Learners who understand what a web page is and want to build one properly, including the accessibility and layout rules that separate a working page from a good one.

What you'll be able to do

  • Write semantic HTML that describes meaning rather than appearance
  • Build accessible forms with correctly associated labels and validation
  • Control layout with the box model, Flexbox, and CSS Grid
  • Make a page adapt to any screen size using mobile-first media queries

Not started — 8 lessons, no account required.

Start this course

Practice this course →Add to a study plan →Interview questions

Structuring content with HTML

The elements that give a document meaning, not just shape.

  1. HTML Document Structure & Basic Elements

    Learn the anatomy of every HTML page — doctype, html, head, and body — plus everyday elements like headings, paragraphs, and comments.

    18 min
  2. Semantic HTML: Links, Images, Lists & Tables

    Move beyond generic divs — structure pages with semantic landmarks, and add links, images, lists, and tables correctly.

    20 min
  3. Forms, Validation & Accessibility Foundations

    Build usable forms with properly linked labels, built-in browser validation, and the accessibility basics every page needs.

    22 min

Styling and the cascade

How selectors compete, and how an element's size is really calculated.

  1. CSS Selectors and the Cascade

    Learn how CSS selectors target elements, and how specificity and the cascade decide which rule wins when several match.

    20 min
  2. The CSS Box Model

    Understand content, padding, border, and margin — the four layers that determine every element's rendered size and spacing.

    18 min

Modern layout

One-dimensional and two-dimensional layout systems.

  1. Flexbox Layout

    Arrange elements along a row or column with Flexbox, controlling alignment, spacing, and wrapping with a handful of properties.

    22 min
  2. CSS Grid Layout

    Lay out rows and columns together with CSS Grid, placing and spanning items across a two-dimensional track system.

    22 min

Responsive design

Making one page work on every screen.

  1. Responsive Design: Media Queries & Mobile-First Layout

    Write CSS that adapts to any screen size using mobile-first thinking, min-width media queries, and relative units.

    22 min

Where to go next

Optional -- these build well on what you just learned, but any course can come next.