Lesson 10 - About me project

What you'll learn

Combine HTML sections and images
Use cards and flexbox
Make it responsive

Explain like I'm 10

This is your poster page about you.

<section>
  <h2>About me</h2>
  <p>I like soccer and art.</p>
</section>

Project brief & requirements

Build a simple personal page that includes these sections: header/nav, hero/profile, about, hobbies or projects, contact, and footer. Keep it semantic and responsive.

Header with site title and nav
Hero/profile with image and short intro
Cards for hobbies or projects
Contact section with links or form

Suggested structure

<header>...</header>
<main>
  <section class="hero">...</section>
  <section class="about">...</section>
  <section class="cards">...</section>
  <section class="contact">...</section>
</main>
<footer>...</footer>

Step-by-step build plan (checkpoints)

Create HTML structure and headings.
Add hero/profile image and intro text.
Create cards for hobbies/projects and style with flexbox.
Make layout responsive (stacking at a chosen breakpoint).
Polish spacing, fonts, and add alt text for images.

Semantic HTML skeleton

<!doctype html>
<html lang="en">
<head>...</head>
<body>
  <header> <nav> </nav> </header>
  <main>
    <section class="hero"> <img> <h1> </section>
    <article class="about"></article>
    <section class="cards"></section>
    <section class="contact"></section>
  </main>
  <footer></footer>
</body>
</html>

CSS snippets for layout

/* reusable card */
.card { border:1px solid #e6e6e6; padding:12px; border-radius:10px; }

/* cards row */
.cards { display:flex; gap:16px; flex-wrap:wrap; }
.card { flex:1 1 200px; }

/* responsive breakpoint */
@media (max-width:700px) { .cards { flex-direction:column; } }

Keeping styles consistent

Use reusable classes (e.g., .card, .btn, .container) and avoid repeating values. Create variables in a central CSS file if desired.

Rubric / checklist

Structure: header, main, footer present
Semantics: headings, sections, articles used
Spacing: consistent margins and gaps
Responsive: stacks appropriately
Images: have alt text; links work

Common mistakes & fixes

Forgetting alt on images — add descriptive text.
Using non-semantic tags — prefer article/section over many divs.
Inconsistent spacing — use shared classes and variables.

Extensions

Add a projects section with links to live demos.
Add a Back-to-top link in the footer.
Add a theme switch (light/dark) using a small JS toggle.

Checklist & personalization

Make it yours: change colors, text, photos and hobbies. When done, run the rubric above.

Mini challenge

Add a footer with a fun message.
Make the page background a soft color.

Lesson 10: About me project