DocHero
Lesson 7 +25 XP

Project 1: My First Web Page

Project 1: My First Web Page

Time to build something real! This first project is tiny on purpose: you create a complete, valid HTML page from memory.

The goal

Make a single page that greets the reader and shows off your name.

What you practice

  • <!DOCTYPE html> and the <html> root
  • <head> vs <body>
  • <h1> and <p>
  • HTML comments

Starter skeleton

Every page starts like this, always:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my very first web page.</p>
  <!-- I will add more to this page later -->
</body>
</html>

Steps

  1. Write the <!DOCTYPE html> first, nothing before it.
  2. Wrap everything in <html>.
  3. Put a <title> in <head> - it shows on the browser tab.
  4. Put your greeting in <body>.
  5. Open the file in a browser. Pat yourself on the back!

Checklist

  • [ ] Doctype is the very first line
  • [ ] Every tag has an opening and closing tag
  • [ ] The page has a <title>
  • [ ] There is one <h1> and at least one <p>

TL;DR

A valid page is a fixed skeleton: doctype, <html>, <head>, <body>. Everything you can see lives in <body>.