The Life Starter
Sign up
All courses/Digital

Course 09 · Digital course 02

Build Your First Website

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

Before you start

Download the Website build starter pack from Resources and unzip all files. Use a current browser and plain-text code editor; keep reference and editable copies.

See everything you’ll need

Download and unzip · Browser and text editor · GitHub account for the required live launch. Download the starter pack

What you’ll leave with

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

Start course Start without an account. Sign in to save lesson progress across devices.

Your project

Start with the practice files. Build your project one lesson at a time.

Practice files are free without an account. Sign in to save your project record in My Proof: a description, checklist, and optional work link. Keep the original files in your own app or notebook; saving a project record does not upload them.

  1. Get your materialsDownload practice filesRunnable HTML/CSS/JavaScript, complete six-lesson guide, ten test cases, live deployment steps and a simulated visitor fixture.
  2. Make your projectView the project checklist Work in your own notebook, document, or software. Use the supplied practice examples when you prefer.
  3. Keep a private recordSave a project record Sign in to save a description and checklist, then return to update them.
Optional course overview

Watch an introduction.

This overview from freeCodeCamp.org introduces ideas you’ll practice in the lessons.

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

Know the route before you begin.

Here’s what you’ll need and what you’ll make. You can return to this guide during any lesson.

Who this is for

For a beginner building and publishing a responsive multi-section website with HTML, CSS and a purposeful JavaScript interaction. The included runnable pack and six-lesson README supply the complete path; external videos are optional.

Prepare before lesson one
  • Download the Website build starter pack from Resources and unzip all files. Use a current browser and plain-text code editor; keep reference and editable copies.
  • Local practice needs no server or package installation. Public launch requires a GitHub account able to create a public repository and enable Pages; allow additional setup and deployment waiting time.
  • Use the supplied fictional text and original SVG, which may be reused for the course. No personal data or real booking service is required.
  • Record tests and fixture-based measurements honestly; real visitor observation and optional services add elapsed fieldwork.
Your final project

Finish with proof you can use.

A live multi-section site built from your edited supplied HTML/CSS/JavaScript: semantic structure, responsive CSS, accessible navigation and local session-plan form, optimized reusable SVG, metadata/404, test and deployment/rollback record, domain plan, simulated visitor scorecard and improvement backlog. The form calculates locally and sends no booking. Optional real visitor observations are labeled separately.

Save a project record in My Proof
See project checklist and review criteria
  • A one-page brief, content outline, and low-fidelity mobile wireframe.
  • A complete, navigable HTML page with the stylesheet disabled.
  • A responsive stylesheet and component pattern sheet for buttons, cards, type, and spacing.
  • One complete interaction with keyboard support and all four user-facing states.
  • A live site plus a signed launch checklist covering content, function, access, speed, and metadata.
  • A clearly labeled simulated visitor scorecard, one prioritized experiment and a template for optional real monthly observations.
Three ideas to help you along the way
Three useful ideas

The rules behind the steps.

01

HTML carries meaning

Native landmarks, links, labels and controls make the content understandable before styling.

02

Responsive means content fits

Flexible widths, wrapping and content-driven grids preserve reading and control use.

03

Progressive enhancement

Content and a written calculation work first; JavaScript improves the session-planning interaction.

What do these words mean?
Key words

Key terms worth knowing.

Semantic HTML
Elements chosen for their meaning and native behavior.
DOM
The browser representation of the document that JavaScript can read and update.
Deployment
Making tested files available at a reachable public URL.
Percentage point
The difference between two percentages; 80% minus 60% is 20 percentage points.
Your route

6 lessons.
One useful project.

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

    Use HTML elements that match the content

    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

Tools to help you practice.

See all tools
ZIP · practice files

Website build starter pack

Runnable HTML/CSS/JavaScript, complete six-lesson guide, ten test cases, live deployment steps and a simulated visitor fixture.

Text worksheet

Your implementation worksheet

Setup, supplied steps, worked results and checks, plus space for your own implementation evidence.

Source transparency

Sources and further study.

Explore the references behind the lessons and take your learning further. Source notes explain access and reuse.

MDN — Learn web development
web.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