Programming / Beginner

Web Development

Understand the pieces of a modern website: semantic HTML for structure, CSS for presentation, JavaScript for behavior, and responsive layouts for different screens.

▤ 5 modules✓ 5 PDFs✦ 1 researched video lesson

What you’ll learn

Learning objectives

Build semantic pages with HTML

Style readable, consistent interfaces with CSS

Use JavaScript to respond to user actions

Create responsive and accessible project pages

Video lesson

Learn with freeCodeCamp.org

Open on YouTube ↗

▶

Web Development with HTML & CSS – Full Course for Beginners

freeCodeCamp.org · About 20 hours

Covers: HTML, CSS, responsive/mobile-first design, Flexbox, Bootstrap, JavaScript-powered practice, and a portfolio project

Course roadmap

Learn it in 5 modules

0 of 5 completed

MODULE 01Ready to learn

HTML structure and semantics

Start each page with a clear document structure, a single descriptive main heading, and meaningful labels. Use links for navigation and buttons for actions. Alternative text describes informative images; decorative images should not add noisy text.

View key idea and practice

Key idea

HTML elements describe the meaning and structure of content. Semantic elements communicate the role of a region, such as navigation, main content, or an article.

Worked example

A course page uses a header, navigation, main region, article for the lesson, and a labeled list for learning outcomes.

Try it

Outline a resource card using semantic HTML and identify its title, description, metadata, and action.

Suggested check

Use an article or list item for the card, a heading for the resource name, a paragraph for its description, metadata text, and an anchor or button with a specific accessible label.

MODULE 02Ready to learn

CSS foundations and layout

Use reusable classes and design tokens rather than repeated ad hoc values. Flexbox is useful for one-dimensional alignment; Grid is useful for two-dimensional composition. Check contrast and focus states while styling.

View key idea and practice

Key idea

CSS rules match elements and assign presentation such as color, spacing, typography, and layout. The box model includes content, padding, border, and margin.

Worked example

A navigation bar uses flex alignment for its logo and actions, while a content section uses a responsive grid for course cards.

Try it

Create a style rule for a course badge that remains legible in light and dark themes.

Suggested check

Define foreground and background tokens with sufficient contrast, add padding and rounded corners, and provide a visible focus outline when the badge is interactive.

MODULE 03Ready to learn

JavaScript and interaction

Use event listeners for interaction, keep state changes explicit, and validate data received from forms. Prefer semantic controls with built-in keyboard behavior instead of clickable generic containers.

View key idea and practice

Key idea

JavaScript is a programming language used in the browser to transform data and respond to events. The DOM represents the page elements scripts can update.

Worked example

A search box filters course records as a learner types, matching the course name and topic tags.

Try it

Describe the states needed for a video lesson’s play/pause control and how a screen reader should hear the action.

Suggested check

Track whether playback is active; change the button label or accessible pressed state to match. Keep focus on the same control after toggling.

MODULE 04Ready to learn

Responsive and accessible interfaces

Begin with the smallest screen, add breakpoints when content needs them, and avoid fixed widths that force horizontal scrolling. Use headings in order, labels for form fields, keyboard navigation, and reduced-motion support.

View key idea and practice

Key idea

Responsive design adapts presentation to available space and input method. Accessibility makes information and controls usable by people with varied abilities.

Worked example

A desktop course detail page places the video beside the syllabus; on a narrow screen, the video and syllabus stack in reading order.

Try it

Review a card layout for a 360-pixel screen and list three changes that improve usability.

Suggested check

Reduce columns to one, let controls wrap or stack, and ensure text/buttons remain large enough. Avoid cropping the course title or hiding essential actions.

MODULE 05Ready to learn

Project workflow and publishing

Keep components focused and reuse data rather than copying markup. Test routes and missing states, optimize images, and make every action lead somewhere real. A static site can serve public educational content without a backend.

View key idea and practice

Key idea

A website project combines source files, assets, and build tooling into pages served from a web origin. A build converts source code into browser-ready assets.

Worked example

A portfolio links project cards to detail pages, shares a common navigation component, and includes an accurate route list for deployment.

Try it

Plan the folders and pages for a small course library and name a practical way to test its build.

Suggested check

Separate course data, shared components, page components, and public assets. Run the type check and production build, then verify representative routes and asset URLs.

Take it further