CSS Project: Build a Profile Card

This CSS project combines what you learned in the tutorial into one small, polished component: a responsive profile card. Read through it, run it, then change it using the exercises at the end.

The Finished Profile Card

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
:root { --brand: #4f46e5; --bg: #eef2ff; --card: #ffffff; --text: #1f2937; --muted: #6b7280; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --muted: #94a3b8; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); padding: 16px; }
.card { width: min(360px, 100%); background: var(--card); border-radius: 16px; padding: 28px; text-align: center; box-shadow: 0 10px 30px rgb(0 0 0 / 12%); transition: transform 0.3s ease; }
.card:hover { transform: translateY(-6px); }
.avatar { width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #ec4899); display: grid; place-items: center; color: white; font-size: 36px; font-weight: 700; }
h2 { margin: 0; }
.role { color: var(--muted); margin: 4px 0 20px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.stats strong { display: block; font-size: 1.25rem; }
.stats span { color: var(--muted); font-size: 0.8rem; }
.actions { display: flex; gap: 10px; }
.actions a { flex: 1; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.primary { background: var(--brand); color: white; }
.secondary { border: 2px solid var(--brand); color: var(--brand); }
.actions a:hover { filter: brightness(1.1); }
</style>
</head>
<body>
<div class="card">
  <div class="avatar">NA</div>
  <h2>Naeem Amin</h2>
  <p class="role">Full-Stack Developer</p>
  <div class="stats">
    <div><strong>42</strong><span>Projects</span></div>
    <div><strong>8y</strong><span>Experience</span></div>
    <div><strong>15</strong><span>Tutorials</span></div>
  </div>
  <div class="actions">
    <a class="primary" href="#">Follow</a>
    <a class="secondary" href="#">Message</a>
  </div>
</div>
</body>
</html>

How It Works

• CSS variables on :root hold the theme; a prefers-color-scheme query swaps them for dark mode
• box-sizing: border-box keeps padding inside the card width
• body uses Grid with place-items: center to center the card
• width: min(360px, 100%) keeps the card responsive on small phones
• The stats row is a three-column Grid; the buttons are a Flexbox row with flex: 1
• A transform transition lifts the card on hover

CSS Exercises

• Change --brand to a green color and watch every accent update
• Add a small "online" dot to the avatar using position: absolute
• Make the avatar spin once on card hover with a transition on transform
• Add a media query so the buttons stack vertically below 300px wide
• Add a :focus-visible outline to both buttons for keyboard users

Where to Go Next

You now know the core of modern CSS. Build a few real pages: a landing page, a blog layout and a pricing table. Then explore a framework like Tailwind CSS, or move on to the JavaScript tutorial to make your pages interactive.

Frequently asked questions

What are good CSS projects for beginners?

Profile cards, a navigation bar, a pricing table, a landing page and a responsive photo gallery are all great practice that use the core layout tools.

How can I practice CSS every day?

Recreate small parts of websites you like, use your browser DevTools to inspect their CSS, and try daily layout challenges.

Should I learn Tailwind or plain CSS first?

Learn plain CSS first. Tailwind classes map directly to CSS properties, so knowing CSS makes Tailwind easy and helps you debug it.