HTML and CSS

Beginner 10 min read

The structure and the look of every web page: semantic HTML elements and the CSS that styles them.

Why it matters

Every frontend framework still produces HTML and CSS in the end. Choosing the right element makes a page usable by keyboard, screen readers and search engines for free; understanding CSS layout saves hours of fighting a framework.

Where it fits

What you will learn

Structure a page with semantic elements such as header, nav, main and button.
Style it with selectors, the box model and a flexbox or grid layout.
Make a layout adapt to small screens.

Before you start

The software delivery lifecycle✓ Learned

Structure first

HTML says what each part of a page is: a heading, a list, a link, a button. The browser gives each element behaviour — a <button> can be focused and pressed with the keyboard, a <div> cannot.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Orders</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><nav><a href="/">Home</a></nav></header>
  <main>
    <h1>Orders</h1>
    <button type="button">New order</button>
  </main>
</body>
</html>

Then the look

style.css

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

A grid that fits as many 16rem columns as the screen allows — one column on a phone, several on a desktop.

Tip: If you reach for <div onclick>, use a <button> instead. You get focus, Enter and Space, and the right meaning for screen readers without extra code.

The page has one <h1> and headings in order.
Every image has an alt text (empty for decoration).
The layout works at 375 px wide without horizontal scrolling.

Official documentation and references

Guides

MDN — Structuring content with HTML ↗ Official · MDN Web Docs
MDN — CSS styling basics ↗ Official · MDN Web Docs

Learn next

JavaScript in the browser ›✓ Learned

JavaScript in the browser✓ Learned
Web accessibility✓ Learned

Done with this topic?

Reviewed 2026-10-23. Links go to the official documentation unless marked otherwise.