The Life Starter
All courses/Digital

Course 09 · Digital playbook 02

Build Your First Website

Plan, design, code, test, publish, and improve a fast, accessible website using the foundations of the web.

What you’ll leave with

A live multi-section website with responsive layout, accessible markup, a real domain plan, and measurement basics.

Start course Works without an account · saves on this device
Watch first

A useful primer before lesson one.

This video is published by freeCodeCamp.org. It complements the Life Starter sequence; it does not replace the work inside the lessons.

Watch directly on YouTube
freeCodeCamp.orgFull Stack Web Development for BeginnersYouTube
Course handbook

Know the route before you begin.

This is the working brief for the full course: who it serves, what to prepare, what good work looks like, and the language you will use along the way.

Who this is for

For a beginner building and publishing a small, responsive website with HTML, CSS, and modest JavaScript. The course teaches the browser fundamentals underneath modern frameworks so you can inspect, maintain, and improve what you ship.

Prepare before lesson one
  • Install a current code editor and current mainstream browser with developer tools.
  • Create a project folder and a plain-language one-page brief for the site.
  • Gather only images, fonts, and copy you own, licensed, or have permission to use.
  • Choose one primary visitor action and one simple way to measure it.
Your final project

Finish with proof you can use.

A live multi-section site with semantic HTML, responsive CSS, accessible navigation and forms, one purposeful JavaScript interaction, optimized licensed media, metadata, a test record, and an improvement backlog tied to real visitor behavior.

Three operating principles

The rules behind the steps.

01

HTML carries meaning

Structure and native elements support accessibility, search, resilience, and maintenance before visual styling begins.

02

Responsive means content fits

Design should adapt to available space and input method, not imitate a few fashionable device dimensions.

03

Progressive enhancement

Core content and actions should work first; CSS and JavaScript then improve presentation and behavior.

Working vocabulary

Key terms worth knowing.

DOM
The browser's object representation of a document that scripts and developer tools can inspect and change.
Semantic HTML
Elements chosen for their meaning and behavior, such as nav, main, button, and form.
Breakpoint
A content-driven width where layout rules change because the current arrangement no longer works.
Accessibility tree
The interface information exposed by the browser to assistive technologies.
Deployment
The process of making built files available on a server or hosting platform at a reachable address.
Your route

Six lessons.
One finished outcome.

Work in order the first time. Each lesson makes something the next lesson can use.

  1. 1
    Up next

    Plan the page around one action

    Define audience, content hierarchy, and success before choosing technology.

  2. 2
    32 min

    Write semantic HTML

    Create a meaningful document that works before visual styling.

  3. 3
    38 min

    Build the responsive system

    Create a coherent visual system that adapts to content and screen size.

  4. 4
    29 min

    Add behavior carefully

    Use JavaScript only where interaction or state genuinely requires it.

  5. 5
    34 min

    Test and publish

    Catch functional, accessibility, performance, and metadata issues before launch.

  6. 6
    24 min

    Measure and improve

    Use real behavior and feedback to prioritize the next change.

Use the tools

Make the lesson easier to act on.

See all tools
workbook

The Life Starter toolkit

Reusable planners and trackers for practical projects.

Source transparency

Trust, then verify.

The practice sequence is original editorial synthesis. Current rules, safety details, and platform requirements should be confirmed with these primary or authoritative sources. References reviewed September 9, 2026.

MDN — Learn web developmentweb.dev — Learn accessibility
Ready when you are

Start with the first useful move.

You’ll always know what to do, what to make, and where to go next.

Start lesson one