HTML & CSS Tutorial

Build and style your first web page — semantic HTML, the box model, Flexbox, and responsive layout.

1 min read 178 words Updated Mar 1, 2026

Every website is HTML for structure and CSS for style. This tutorial builds a real, responsive page.

Semantic HTML

<header>
  <nav><a href="/">Home</a></nav>
</header>
<main>
  <article>
    <h1>Hello</h1>
    <p>A semantic page is readable by browsers and screen readers.</p>
  </article>
</main>
<footer>© 2026</footer>

The box model

Every element is a box: content + padding + border + margin. Use box-sizing: border-box so padding doesn’t blow out widths.

* { box-sizing: border-box; }

.card {
  width: 300px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

Layout with Flexbox

.row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

Responsive with media queries

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

@media (max-width: 600px) {
  .row { flex-direction: column; }
}

A complete minimal page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero { padding: 64px 20px; text-align: center; background: #f0f4ff; }
  </style>
</head>
<body>
  <section class="hero"><h1>Welcome</h1></section>
</body>
</html>

Prefer CSS Grid for 2D layouts and Flexbox for 1D rows/columns. Both beat floats.