Start learning
Search the libraryStart learning

Search the library

What would you like to learn?

Type two or more characters to search.

You can also browse all tutorials or topics.

Learning path · Ready to start

Web Foundations

Understand how websites work and how HTML, CSS, and JavaScript fit together.

Who this path is for

People creating their first web page, WordPress users who want to understand the code underneath a theme, and learners who want a clean mental model before choosing a framework.

Prerequisites

  • Basic confidence using files and folders
  • A modern web browser

What you will be able to do

  • Explain the different jobs of HTML, CSS, and JavaScript
  • Write a complete HTML document with meaningful page structure
  • Predict how common selectors, the cascade, and inheritance affect a page
  • Size elements with the box model without causing page-level overflow
  • Build and test a mobile-first Flexbox layout

A note on completion

This is a practical learning path, not a certified course. The time above is calculated from the lessons currently published and will grow as useful lessons are added.

Suggested order

Current lessons

Work through these lessons in order. Each one makes the next idea easier to place.

  1. How HTML, CSS, and JavaScript Work TogetherSee the separate jobs of HTML, CSS, and JavaScript, then combine them in one small page you can run locally.14 min
  2. HTML Document Structure Explained for BeginnersLearn what doctype, html, head, body, metadata, headings, and paragraphs do by building a complete beginner-friendly HTML page.18 min
  3. Semantic HTML for BeginnersLearn how header, nav, main, section, article, footer, links, and buttons give a web page useful structure and meaning.22 min
  4. CSS Selectors, the Cascade, and InheritanceLearn how CSS selectors target elements, how the cascade resolves competing rules, and which styles children can inherit.28 min
  5. The CSS Box Model Explained for BeginnersUnderstand CSS content, padding, borders, margins, box-sizing, width, and max-width through one clear visual example.24 min
  6. Build a Responsive Layout with CSS FlexboxBuild a flexible responsive layout with display flex, gap, wrapping, alignment, flexible widths, and a content-led breakpoint.30 min

After lesson 6

Build the capstone project

Combine the path's ideas in one complete page. Use the project as a guided build, not as a test you must pass.

After the current lessons

Put the idea into a small build

Continue to JavaScript Essentials when you are ready to add behavior to the sound HTML and CSS foundation you practiced in the capstone.