HTML/CSS - 10

HTML/CSS - 10: Build Your First Mini Website

You have now practiced the main building blocks of a simple webpage. This final lesson brings them together into one small project.

Your goal is to create a personal-style homepage. It does not need to be about you personally — you can invent a character, a club, a hobby page, or a fictional project.

Try to include headings, paragraphs, formatted text, links, an image, a list, CSS inside <style>, and at least one <div> used as a layout container.

Your challenge: Build a complete mini homepage using the skills from Lessons 1–9.

How to approach the project

Do not try to build everything at once. Start with the HTML structure first. Add your main heading, sections, paragraphs, list, link, and image. Once the content appears correctly, begin adding CSS.

A simple page might have sections such as About, My Favorites, and Contact. Each section can be placed inside a <div class="card"> to give the page a clear layout.

Project check: Before looking at the example solution, see if your page contains at least one example of each skill from the list in the editor.

Experiment: Once the page works, change one design choice at a time. Try a different heading color, change the card width, increase the padding, or give one piece of text a special class.

Remember: A working website does not have to be complicated. A few well-structured HTML elements and a small amount of CSS are enough to create a complete page.

<style>

  h1 {
    text-align: center;
  }

  .card {
    background-color: #111;
    border: 2px solid #8A8A8A;
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
  }

  .highlight {
    color: white;
  }

</style>

<h1>The Midnight Waffle Club</h1>

<div class="card">

  <h2>About the Club</h2>

  <p>
    Welcome to the
    <strong>Midnight Waffle Club</strong>,
    a completely fictional group for people who believe
    breakfast should never have a bedtime.
  </p>

  <img
    src="space-waffles.webp"
    alt="Waffles floating through space"
    width="500">

</div>

<div class="card">

  <h2>Club Rules</h2>

  <ul>
    <li>Bring your imagination</li>
    <li>Respect the syrup</li>
    <li>Never underestimate a waffle</li>
  </ul>

</div>

<div class="card">

  <h2>Secret Message</h2>

  <p class="highlight">
    The next meeting begins at
    <mark>midnight</mark>.
  </p>

  <p>
    <a href="https://example.com">Visit our fictional club page</a>
  </p>

</div>