🟢 HTML + CSS Mini Projects Series

Episode 1: Personal Profile Card

The frontend way of saying “I’m here” 😎

Hello dear code traveler 🧭💻
You’ve seen HTML tags, added some color with CSS, but if you’re still struggling with this question:

“Okay, I learned it… but where’s the project?”

This mini project exists exactly to fill that gap 💥
Not huge, not complicated… but extremely educational.

When you finish this project, you’ll have learned how to:

Build an HTML structure 🧱
Style it with CSS 🎨
Truly understand the logic of Flexbox 🧠
Create a small but real UI component 😎

🎯 The Clear Goal of the Project (What Are We Building?)

We’re creating a personal profile card.

This card can be:

Shown in your portfolio
The first real work of someone saying “I’m learning frontend”
Added to your CV
Placed in your GitHub README

Inside the card, we’ll have:

👉 A circular avatar
👉 Name
👉 A short and clear bio
👉 Social media links

And bonus features:

Centered
Clean
Responsive
With a “junior but conscious developer” vibe 😎

🧠 Before We Start (A Mini Mind-Opener)

In this project, we’ll learn:

What HTML does → structure
What CSS does → appearance
Why Flexbox exists → alignment
The difference between “it works” and “it’s done properly”

If you’re ready, let’s begin 👇

🧱 Step 1: HTML Skeleton (You Don’t Paint Before Building the House)

HTML is like the concrete of a house.
First, you build it strong — then you decorate.

📄 index.html

&lt;!DOCTYPE html>
&lt;html lang="tr">
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>Personal Profile Card&lt;/title>
  &lt;link rel="stylesheet" href="style.css">
&lt;/head>
&lt;body>

  &lt;div class="profile-card">

    &lt;img src="avatar.jpg" alt="Profile photo">

    &lt;h2>Cansu Porsuk&lt;/h2>

    &lt;p class="bio">
      A frontend learner who can’t code without coffee ☕💻
    &lt;/p>

    &lt;div class="social-links">
      &lt;a href="#">GitHub&lt;/a>
      &lt;a href="#">LinkedIn&lt;/a>
      &lt;a href="#">Twitter&lt;/a>
    &lt;/div>

  &lt;/div>

&lt;/body>
&lt;/html>

🧠 What we did intentionally here:

Wrote alt text → accessibility + SEO
Avoided unnecessary divs
Built a clean, readable structure

📌 Tip:
HTML doesn’t need to look pretty.
It just needs to make sense.

🎨 Step 2: CSS Reset (Resetting the Chaos)

Browsers add margins however they like.
We say: “Stop right there.”

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

🧠 What does box-sizing: border-box; do?

It prevents elements from growing when padding is added.
This line alone prevents future headaches 😄

🧍 Step 3: Centering the Page (Flexbox Enters the Stage)

The card should be centered.
Because aesthetics = first impression 😎

body {
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;

  display: flex;
  justify-content: center;
  align-items: center;
}

🎯 Flexbox logic learned here:

justify-content → horizontal
align-items → vertical

Once you get it, there’s no going back 😏

🧩 Step 4: Card Design (The Real Deal)

.profile-card {
  background-color: #fff;
  width: 320px;
  padding: 24px;
  border-radius: 16px;
  text-align: center;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

🎨 What gives the “card” feeling?

border-radius → softness
box-shadow → depth
padding → breathing space

🖼️ Step 5: Avatar (It Has to Be Circular)

.profile-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}

🧠 object-fit: cover is gold.

The image doesn’t stretch, it crops cleanly and stays aesthetic.

✍️ Step 6: Name & Bio (Short but Effective)

.profile-card h2 {
  margin-bottom: 8px;
}

.bio {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

📌 Real-life rule:
Keep bios short.
Nobody reads a manifesto on a profile card 😄

🔗 Step 7: Social Links (More Flexbox Practice)

.social-links {
  display: flex;
  justify-content: space-between;
}

.social-links a {
  text-decoration: none;
  color: #0077cc;
  font-weight: bold;
}

.social-links a:hover {
  color: #005999;
}

🎯 What you learned here:

Aligning inline elements with Flexbox
Adding hover effects
Creating a UI feel

🧪 The Final Result

✔️ A real profile card
✔️ HTML + CSS working together
✔️ Flexbox logic clicked
✔️ Portfolio-ready project

At this point, you can honestly say:

“Yes, I built something.” 😎

⚠️ Common Beginner Traps

❌ Trying to center everything
❌ Memorizing Flexbox instead of understanding it
❌ Not controlling images
❌ Saying “it works” and stopping there

🚀 Bonus Challenges (Test Yourself)

Make the card scale on hover
Add dark mode 🌙
Use a gradient background
Make the card wider on mobile 📱

If you can do these → you’ve leveled up 🆙

🎯 Final Sentence

This project may be small, but it teaches one big truth:

HTML + CSS aren’t learned by reading —
they’re learned by building. 😎