DocHero
Lesson 64 +10 XP

Building a Website

Building a Website

Time to put it all together! Let's build a real website step by step. You now know everything you need!

Step 1: Plan the pages

A small website might have:

  • index.html: the home page
  • about.html: about the business
  • contact.html: contact form

Step 2: Build the shared structure

Every page uses the same skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Coffee Shop</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Coffee Shop</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <!-- page-specific content here -->
  </main>
  <footer>
    <p>&copy; 2026 My Coffee Shop</p>
  </footer>
</body>
</html>

Step 3: Fill in each page

Home page content:

<main>
  <h2>Welcome!</h2>
  <p>We serve the best coffee in town. <a href="about.html">Learn more about us</a>.</p>
  <img src="coffee.jpg" alt="A cup of coffee on a table">
</main>

Step 4: Style it with CSS

/* style.css */
body { font-family: sans-serif; margin: 0; }
header { background-color: #6f4e37; color: white; padding: 20px; }
nav a { color: white; margin-right: 10px; }
main { padding: 20px; }
footer { background-color: #333; color: white; text-align: center; padding: 10px; }

Step 5: Make it responsive

Use the viewport meta (already there!) and flexible layouts so it looks good on phones.

@media (max-width: 600px) {
  nav a { display: block; margin-bottom: 8px; }
}

Step 6: Add interactivity

Add a contact form and a bit of JavaScript:

<form action="/contact" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4" required></textarea>
  <button type="submit">Send</button>
</form>

Step 7: Test, test, test!

  • Test on different screen sizes.
  • Test every link.
  • Test your forms.
  • Run the HTML through a validator.
  • Ask a friend to try it!

Step 8: Publish

Upload your files to a web host, and your site is LIVE on the internet!

TL;DR

  • Plan your pages first.
  • Use one shared skeleton (head, header, nav, main, footer).
  • Style with an external CSS file.
  • Make it responsive with viewport and media queries.
  • Add forms and JavaScript for interactivity.
  • Test everything, then publish!
  • You've got all the skills: go build something amazing!