Mini-project: a profile card

Your mini-project

• Time to put it all together and build a profile card.
• Here is what you are aiming for:

<style>
  .card { width: 280px; margin: 0 auto; padding: 20px; text-align: center;
          background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px; }
  h2 { color: teal; margin: 8px 0; }
</style>
<div class="card">
  <img src="/static/code/web-basics/cat.svg" alt="My avatar" width="120">
  <h2>Sam Lee</h2>
  <p>I love drawing and football.</p>
</div>

What you've learned

• HTML: headings, paragraphs, lists, links, images, tables, forms, page structure.
• CSS: colours, text, the box model, spacing, sizing, and rows with Flexbox.
• That is the real foundation of every web page. You can build things now. 🎉

Common mistakes

• Build and check one piece at a time.
• Keep the HTML structure and the CSS styling separate.

Build your card

• The card's layout is already styled, so you can focus on filling it in.
• Each task adds one piece — content, a picture, then colour. Press ▶ often!