Week 2: HTML, CSS and Real Website Layouts

Goal: Cover the original Week 3 and Week 4: make pages look good and organise them like a real website.

Build this week: Create a styled 3-page mini website with shared CSS.

Skills: CSS, Layout, Navigation, Cards, Header, Footer, Responsive basics

What she should understand

Most beginner pages look plain because they only use HTML. Real websites use CSS to control colours, spacing, layout, buttons and mobile behaviour. A shared CSS file lets multiple pages use the same design.

Step-by-step build

Create assets/style.css.
Link the CSS file from every HTML page.
Add a header and navigation menu to every page.
Add a main area with cards.
Add a footer.
Create a new page called tools.html.
Upload all files and test every link.

Add this to every page head

<link rel="stylesheet" href="assets/style.css">

Starter CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f8ff;
  color: #1f2937;
  line-height: 1.6;
}

header {
  background: #102a43;
  color: white;
  padding: 24px;
}

nav a {
  color: white;
  font-weight: bold;
  margin-right: 14px;
}

main {
  max-width: 900px;
  margin: auto;
  padding: 24px;
}

.card {
  background: white;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
}

.button {
  display: inline-block;
  background: #2563eb;
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
}

footer {
  background: #102a43;
  color: white;
  text-align: center;
  padding: 16px;
}

Reusable page layout

<header>
  <h1>Project Vera Practice</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="tools.html">Tools</a>
  </nav>
</header>

<main>
  <section class="card">
    <h2>Welcome</h2>
    <p>This is a styled section of my website.</p>
    <a class="button" href="tools.html">View tools</a>
  </section>
</main>

<footer>
  <p>Project Vera Practice Website</p>
</footer>

Create a tools page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tools | Project Vera Practice</title>
  <meta name="description" content="Helpful calculators and tools created during Project Vera.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/style.css">
</head>
<body>
  <header>
    <h1>Project Vera Practice</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="tools.html">Tools</a>
    </nav>
  </header>

  <main>
    <h1>My Website Tools</h1>

    <section class="card">
      <h2>Coming Soon: Calculators</h2>
      <p>This page will later link to my JavaScript calculators.</p>
    </section>
  </main>

  <footer>
    <p>Project Vera Practice Website</p>
  </footer>
</body>
</html>

Responsive improvement

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

  main {
    padding: 16px;
  }
}

Extension task

Create a homepage with three cards: Learn, Build and Improve. Each card should have a heading, paragraph and button.