Project Vera Advanced

What she should understand

A professional-looking website usually has reusable design pieces: buttons, cards, sections, containers, grids and call-to-action blocks. Once she creates good reusable classes, building new pages becomes much faster.

Step-by-step build

1. Create a new page called advanced-home.html.
2. Add a hero section with a heading, short paragraph and button.
3. Add a three-card grid.
4. Add a two-column feature section.
5. Add a call-to-action box at the bottom.
6. Add responsive CSS so the layout becomes one column on mobile.
7. Upload and test on desktop and phone.

HTML layout

<main class="container">
  <section class="hero-section">
    <div>
      <p class="eyebrow">Project Vera Advanced</p>
      <h1>Build useful websites with calculators and smart tools</h1>
      <p>This practice page uses reusable sections, cards and buttons.</p>
      <a class="button" href="tools.html">Explore tools</a>
    </div>
  </section>

  <section class="card-grid">
    <article class="feature-card">
      <h2>Learn</h2>
      <p>Understand how websites are structured.</p>
    </article>

    <article class="feature-card">
      <h2>Build</h2>
      <p>Create calculators, quizzes and useful pages.</p>
    </article>

    <article class="feature-card">
      <h2>Improve</h2>
      <p>Optimise pages for clarity, speed and search engines.</p>
    </article>
  </section>

  <section class="split-section">
    <div>
      <h2>Reusable sections save time</h2>
      <p>Instead of starting from scratch, reuse good blocks.</p>
    </div>
    <div class="highlight-box">
      <p>Pro website builders create systems, not just single pages.</p>
    </div>
  </section>
</main>

Advanced CSS

.container {
  max-width: 1100px;
  margin: auto;
  padding: 24px;
}

.hero-section {
  background: linear-gradient(135deg, #e8f1ff, #e7fff5);
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: bold;
  color: #2563eb;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card,
.highlight-box {
  background: white;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  padding: 20px;
}

.split-section {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  margin-top: 24px;
  align-items: center;
}

@media (max-width: 800px) {
  .card-grid,
  .split-section {
    grid-template-columns: 1fr;
  }
}

Design system task

AI design prompt

Extension task