Build Your First HTML and CSS Website

On this page

Start with one useful page

Your first site does not need a framework, animation library or database. It needs a clear promise, a short introduction and one next action. Create a folder on your own computer so you can make mistakes without affecting the public server.

bash

mkdir -p my-first-site
cd my-first-site
touch index.html styles.css

Write the HTML

Open index.html in a text editor and replace example.com, the name and the text with your own information. The page uses semantic elements so browsers and search systems can understand its basic structure.

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lin's Website — Building and SEO Notes</title>
  <meta name="description" content="Practical notes from building, publishing and growing an independent website.">
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <header><a class="brand" href="/">Lin's Website</a></header>
  <main>
    <p class="eyebrow">BUILDING IN PUBLIC</p>
    <h1>I am building a useful website from zero.</h1>
    <p class="intro">Here I publish tested notes about servers, domains, content and search growth.</p>
    <a class="button" href="mailto:hello@example.com">Say hello</a>
  </main>
  <footer>© 2026 Lin. Updated as the project grows.</footer>
</body>
</html>

Add restrained CSS

A small visual system is enough: one text color, one accent, a readable measure and generous spacing. Paste this into styles.css.

css

:root { color-scheme: light; --ink: #191815; --muted: #6f6b63; --paper: #f6f3ed; --accent: #7b5b38; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.7 system-ui, sans-serif; }
header, main, footer { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
header { padding: 32px 0; border-bottom: 1px solid #d8d1c6; }
.brand { color: inherit; font-weight: 700; text-decoration: none; }
main { min-height: 70vh; padding: 96px 0; }
.eyebrow { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .16em; }
h1 { max-width: 680px; margin: 16px 0 24px; font-family: Georgia, serif; font-size: clamp(42px, 8vw, 76px); line-height: 1.05; }
.intro { max-width: 580px; color: var(--muted); }
.button { display: inline-block; margin-top: 24px; padding: 11px 18px; border: 1px solid var(--ink); color: inherit; text-decoration: none; }
footer { padding: 28px 0 48px; border-top: 1px solid #d8d1c6; color: var(--muted); font-size: 14px; }

Preview on your computer

Double-clicking an HTML file works for a quick look, but a local HTTP server behaves more like production. Python is often already available on macOS and Linux.

bash

python3 -m http.server 8000

Open http://127.0.0.1:8000. This server is for local preview only; do not expose it as the production web server. Stop it with Ctrl+C.

Check before deployment

Read every sentence aloud, click every link, resize the window to a narrow mobile width and check the browser console for missing files. Search the folder for example.com and replace every placeholder. Keep the title specific and the description honest; neither should promise content that the page does not contain.

What I learned

My first pages became slower to finish each time I added another effect. The breakthrough was publishing one plain page that said who it was for and what I would write next. A simple page with a real point of view feels more human than a polished template filled with generic claims.

Finish line

The page is ready when it works at the local address, reads well on a phone, has no placeholder email or domain and contains one clear H1. Put the folder under version control or make a copy, then deploy it with Caddy.

Next steps

Continue with the next useful task; you do not need to read everything at once.

Back to the project path →

Build Your First Website with HTML and CSS, Then Preview It Locally