HTML & CSS: Build Your First Webpage Step by Step

What you need

Only two free things: a text editor (VS Code is perfect) and a web browser. Create a file called index.html — this is your webpage.

Step 1 — The HTML skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, I am learning web development!</h1>
    <p>This is my very first webpage.</p>
  </body>
</html>

Save the file and open it in your browser. You just built a webpage — HTML gives the page its structure: headings, paragraphs, images and links.

Step 2 — Add more building blocks

• <h1> to <h6> — headings, biggest to smallest
• <p> — a paragraph of text
• <a href="..."> — a clickable link
• <img src="..."> — an image
• <ul> and <li> — a bullet list

Step 3 — Style it with CSS

CSS controls how things look. Add this inside your <head>:

<style>
  body { font-family: sans-serif; background: #0b0f0c; color: #eef6f0; text-align: center; }
  h1 { color: #4ade80; }
</style>

Refresh the page — dark background, green heading. That instant cause-and-effect is why web development is so satisfying to learn.

Step 4 — Your mini project

Make a personal profile page: your name as a heading, a short paragraph about you, a list of three skills, and one link. Ugly is fine — finished is what matters.

Go deeper — layout with Flexbox

Real pages arrange boxes in rows and columns. Flexbox does this in three lines:

.row { display: flex; gap: 16px; }
.card { flex: 1; padding: 16px; border: 1px solid #333; border-radius: 12px; }

Put three .card boxes inside a .row and they sit side by side, equally wide — the same idea behind most card layouts you see online, including this website.

Practice task (1 hour)

Extend your profile page: add a skills section with three cards in a Flexbox row, one image, and a footer with your name. Then change only the CSS colours and fonts — and notice how the same HTML can look completely different.

Common mistakes to avoid

• Forgetting to close tags — the browser forgives, but layouts break strangely
• Styling everything with one giant style block instead of reusable classes
• Never opening the page on a phone — always check small screens