Last updated Jun 26, 2026

Project: Build a Profile Card

Putting it all together: This final lesson combines everything — structure, images, text, the box model, borders, shadow, and colour — into one real component: a profile card.

What is happening

A <div class="card"> groups the content (containers)
border-radius and box-shadow shape the card
The image is made circular with border-radius: 50%
The "Follow" link is styled to look like a button

Read the CSS in the editor, then make it yours: change the name, colours, and photo, and press Run.

What you have learned

You can now build and style a real web page: headings, text, links, images, lists, tables, forms, and containers, all styled with colours, fonts, the box model, borders, Flexbox, and hover effects.

Where to go next

JavaScript — make your pages interactive (our web course)
Practise by rebuilding a card or header from a site you like
Explore CSS Grid for full-page layouts

💡 Keep going: the best way to learn web design is to copy things you admire, then tweak them until they are your own.

Try it Yourself

<style>
  body { font-family: Arial, sans-serif; background:#f0f4ff; }
  .card { background:white; width:240px; border-radius:16px; padding:22px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12); text-align:center; margin:16px auto; }
  .card img { border-radius:50%; width:90px; height:90px; }
  .card h2 { margin:12px 0 2px; }
  .card p { color:#666; font-size:14px; margin:0; }
  .card a { display:inline-block; margin-top:14px; background:#2965f1; color:white;
    text-decoration:none; padding:8px 20px; border-radius:20px; }
</style>
<div class="card">
  <img src="https://picsum.photos/100" alt="Profile photo">
  <h2>Sam Lee</h2>
  <p>Web Developer</p>
  <a href="#">Follow</a>
</div>

Output

◀ Styling Buttons & Hover Take the quiz ★