Build practical programming and technology skills

HTML and CSS Foundations

Build accessible, responsive, and maintainable web pages with semantic HTML, modern CSS layouts, reusable components, and reliable forms.

View curriculum

FoundationDifficulty

30 hoursEstimated time

7 modules28 lessons

5 guided labsKnowledge check

Plan your learning

Path Brief

Skills you will practice

Web · Html Css Foundations
Web · How Web Pages Work
Web · Semantic Html
Web · Css Foundations
Web · The Box Model And Layout
Web · Responsive Web Design

Prerequisites

No prior experience is required; basic computer and file-management skills are helpful.

Tools

A current web browser
A code editor or terminal appropriate to the path
A safe local or virtual lab environment

Before you begin

What you need

No prior experience is required; basic computer and file-management skills are helpful.

Step-by-step curriculum

Learning modules

Complete lessons in order or open the module that matches your current goal. Your lesson progress is saved on this device.

01How Web Pages WorkBuild practical skill in how web pages work and connect it to the outcomes of HTML and CSS Foundations.4 lessons · 1 lab

Lesson 1

How Web Pages Work: Core Concepts for HTML and CSS Foundations

Understand the concepts, decisions, and vocabulary you need before applying How Web Pages Work in HTML and CSS Foundations.

25 min

Lesson 2

Set Up and Explore How Web Pages Work in HTML and CSS Foundations

Prepare the tools, data, project state, or test environment needed to explore How Web Pages Work safely and repeatably.

25 min

Lesson 3

Build a Practical How Web Pages Work Example in HTML and CSS Foundations

Create a small article page with header, nav, main, section, form labels, and footer, then inspect the accessibility tree.

30 min

Lesson 4

Debug Common How Web Pages Work Problems in HTML and CSS Foundations

Recognize common failure modes in How Web Pages Work, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Safe

Guided Lab: How Web Pages Work in HTML and CSS Foundations

HTML and CSS Foundations — How Web Pages Work lab: Create a small article page with header, nav, main, section, form labels, and footer, then inspect the accessibility tree.

Not started

02Semantic HTMLBuild practical skill in semantic html and connect it to the outcomes of HTML and CSS Foundations.4 lessons · 1 lab

Lesson 1

Semantic HTML: Core Concepts for HTML and CSS Foundations

Understand the concepts, decisions, and vocabulary you need before applying Semantic HTML in HTML and CSS Foundations.

25 min

Lesson 2

Set Up and Explore Semantic HTML in HTML and CSS Foundations

Prepare the tools, data, project state, or test environment needed to explore Semantic HTML safely and repeatably.

25 min

Lesson 3

Build a Practical Semantic HTML Example in HTML and CSS Foundations

Create a small article page with header, nav, main, section, form labels, and footer, then inspect the accessibility tree.

30 min

Lesson 4

Debug Common Semantic HTML Problems in HTML and CSS Foundations

Recognize common failure modes in Semantic HTML, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: Semantic HTML in HTML and CSS Foundations

HTML and CSS Foundations — Semantic HTML lab: Create a small article page with header, nav, main, section, form labels, and footer, then inspect the accessibility tree.

Not started

03CSS FoundationsBuild practical skill in css foundations and connect it to the outcomes of HTML and CSS Foundations.4 lessons · 1 lab

Lesson 1

CSS Foundations: Core Concepts for HTML and CSS Foundations

Understand the concepts, decisions, and vocabulary you need before applying CSS Foundations in HTML and CSS Foundations.

25 min

Lesson 2

Set Up and Explore CSS Foundations in HTML and CSS Foundations

Prepare the tools, data, project state, or test environment needed to explore CSS Foundations safely and repeatably.

25 min

Lesson 3

Build a Practical CSS Foundations Example in HTML and CSS Foundations

Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.

30 min

Lesson 4

Debug Common CSS Foundations Problems in HTML and CSS Foundations

Recognize common failure modes in CSS Foundations, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: CSS Foundations in HTML and CSS Foundations

HTML and CSS Foundations — CSS Foundations lab: Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.

Not started

04The Box Model and LayoutBuild practical skill in the box model and layout and connect it to the outcomes of HTML and CSS Foundations.4 lessons · 1 lab

Lesson 1

The Box Model and Layout: Core Concepts for HTML and CSS Foundations

Understand the concepts, decisions, and vocabulary you need before applying The Box Model and Layout in HTML and CSS Foundations.

25 min

Lesson 2

Set Up and Explore The Box Model and Layout in HTML and CSS Foundations

Prepare the tools, data, project state, or test environment needed to explore The Box Model and Layout safely and repeatably.

25 min

Lesson 3

Build a Practical The Box Model and Layout Example in HTML and CSS Foundations

Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.

30 min

Lesson 4

Debug Common The Box Model and Layout Problems in HTML and CSS Foundations

Recognize common failure modes in The Box Model and Layout, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: The Box Model and Layout in HTML and CSS Foundations

HTML and CSS Foundations — The Box Model and Layout lab: Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.

Not started

05Responsive Web DesignBuild practical skill in responsive web design and connect it to the outcomes of HTML and CSS Foundations.4 lessons · 1 lab

Lesson 1

Responsive Web Design: Core Concepts for HTML and CSS Foundations

Understand the concepts, decisions, and vocabulary you need before applying Responsive Web Design in HTML and CSS Foundations.

25 min

Lesson 2

Set Up and Explore Responsive Web Design in HTML and CSS Foundations

Prepare the tools, data, project state, or test environment needed to explore Responsive Web Design safely and repeatably.

25 min

Lesson 3

Build a Practical Responsive Web Design Example in HTML and CSS Foundations

Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.

30 min

Lesson 4

Debug Common Responsive Web Design Problems in HTML and CSS Foundations

Recognize common failure modes in Responsive Web Design, use the relevant diagnostics, and verify the correction.

25 min

Guided lab · 55 min · Moderate

Guided Lab: Responsive Web Design in HTML and CSS Foundations

HTML and CSS Foundations — Responsive Web Design lab: Build a two-column component that collapses cleanly on a narrow viewport and preserves readable spacing.

Not started

06Forms and User InputBuild practical skill in forms and user input and connect it to the outcomes of HTML and CSS Foundations.4 lessons

Lesson 1

Forms and User Input: Core Concepts for HTML and CSS Foundations

Understand the concepts, decisions, and vocabulary you need before applying Forms and User Input in HTML and CSS Foundations.

25 min

Lesson 2

Set Up and Explore Forms and User Input in HTML and CSS Foundations

Prepare the tools, data, project state, or test environment needed to explore Forms and User Input safely and repeatably.

25 min

Lesson 3

Build a Practical Forms and User Input Example in HTML and CSS Foundations

Build a form or request validator with valid, missing, malformed, and boundary inputs.

30 min

Lesson 4

Debug Common Forms and User Input Problems in HTML and CSS Foundations

Recognize common failure modes in Forms and User Input, use the relevant diagnostics, and verify the correction.

25 min

07Reusable Components and Page QualityBuild practical skill in reusable components and page quality and connect it to the outcomes of HTML and CSS Foundations.4 lessons

Lesson 1

Reusable Components and Page Quality: Core Concepts for HTML and CSS Foundations

Understand the concepts, decisions, and vocabulary you need before applying Reusable Components and Page Quality in HTML and CSS Foundations.

25 min

Lesson 2

Set Up and Explore Reusable Components and Page Quality in HTML and CSS Foundations

Prepare the tools, data, project state, or test environment needed to explore Reusable Components and Page Quality safely and repeatably.

25 min

Lesson 3

Build a Practical Reusable Components and Page Quality Example in HTML and CSS Foundations

Build a reusable card or form component with two variants, responsive behavior, keyboard-visible focus, and no page-specific selector overrides.

30 min

Lesson 4

Debug Common Reusable Components and Page Quality Problems in HTML and CSS Foundations

Recognize common failure modes in Reusable Components and Page Quality, use the relevant diagnostics, and verify the correction.

25 min

Portfolio integration

Capstone Project

Build a Responsive Small-Business Website

Combine the path skills in a portfolio-ready project with clear functional requirements, tests, verification evidence, and operating notes.

GuidedIndependentPortfolio

Acceptance criteria

The core workflow works from start to finish.
Invalid input or failure states are handled clearly.
The result is tested and documented.
A reviewer can reproduce the setup and verification.

Continue in Programming

Related Programming

Skill assessment

HTML and CSS Foundations

Path Brief

Skills you will practice

Prerequisites

Tools

What you need

Learning modules

How Web Pages Work: Core Concepts for HTML and CSS Foundations

Set Up and Explore How Web Pages Work in HTML and CSS Foundations

Build a Practical How Web Pages Work Example in HTML and CSS Foundations

Debug Common How Web Pages Work Problems in HTML and CSS Foundations

Guided Lab: How Web Pages Work in HTML and CSS Foundations

Semantic HTML: Core Concepts for HTML and CSS Foundations

Set Up and Explore Semantic HTML in HTML and CSS Foundations

Build a Practical Semantic HTML Example in HTML and CSS Foundations

Debug Common Semantic HTML Problems in HTML and CSS Foundations

Guided Lab: Semantic HTML in HTML and CSS Foundations

CSS Foundations: Core Concepts for HTML and CSS Foundations

Set Up and Explore CSS Foundations in HTML and CSS Foundations

Build a Practical CSS Foundations Example in HTML and CSS Foundations

Debug Common CSS Foundations Problems in HTML and CSS Foundations

Guided Lab: CSS Foundations in HTML and CSS Foundations

The Box Model and Layout: Core Concepts for HTML and CSS Foundations

Set Up and Explore The Box Model and Layout in HTML and CSS Foundations

Build a Practical The Box Model and Layout Example in HTML and CSS Foundations

Debug Common The Box Model and Layout Problems in HTML and CSS Foundations

Guided Lab: The Box Model and Layout in HTML and CSS Foundations

Responsive Web Design: Core Concepts for HTML and CSS Foundations

Set Up and Explore Responsive Web Design in HTML and CSS Foundations

Build a Practical Responsive Web Design Example in HTML and CSS Foundations

Debug Common Responsive Web Design Problems in HTML and CSS Foundations

Guided Lab: Responsive Web Design in HTML and CSS Foundations

Forms and User Input: Core Concepts for HTML and CSS Foundations

Set Up and Explore Forms and User Input in HTML and CSS Foundations

Build a Practical Forms and User Input Example in HTML and CSS Foundations

Debug Common Forms and User Input Problems in HTML and CSS Foundations

Reusable Components and Page Quality: Core Concepts for HTML and CSS Foundations

Set Up and Explore Reusable Components and Page Quality in HTML and CSS Foundations

Build a Practical Reusable Components and Page Quality Example in HTML and CSS Foundations

Debug Common Reusable Components and Page Quality Problems in HTML and CSS Foundations

Capstone Project

Build a Responsive Small-Business Website

Acceptance criteria

Test your understanding

Related Programming

Check your starting point

Plan the capstone

Explore related paths