Bölüm 1: Kişisel Profil Kartı
“Ben buradayım” demenin frontend yolu 😎
Merhaba sevgili kod yolcusu 🧭💻
HTML etiketlerini gördün, CSS’le biraz renk kattın ama hâlâ şu soruyla boğuşuyorsan:
“Ben tamam öğrendim de… nerede bu proje?”
İşte bu mini proje tam olarak bu boşluğu doldurmak için var 💥
Ne devasa, ne karmaşık… ama öğreticilik oranı çok yüksek.
Bu projeyi bitirdiğinde:
- HTML iskeleti kurmayı 🧱
- CSS ile tasarım vermeyi 🎨
- Flexbox mantığını gerçekten anlamayı 🧠
- Küçük ama gerçek bir UI bileşeni yapmayı 😎
öğrenmiş olacaksın.
🎯 Projenin Net Amacı (Ne Yapıyoruz?)
Bir kişisel profil kartı oluşturuyoruz.
Bu kart:
- Portföyde durur
- “Frontend öğreniyorum” diyenin ilk işidir
- CV linkine konur
- GitHub README’ye eklenir
Kartın içinde şunlar olacak:
👉 Yuvarlak bir avatar
👉 İsim
👉 Kısa, net bir bio
👉 Sosyal medya linkleri
Ve bonus:
- Ortalanmış
- Temiz
- Responsive
- “Junior ama bilinçli” havasında 😎
🧠 Projeye Başlamadan Önce (Mini Zihin Açıcı)
Bu projede şunu öğreneceğiz:
- HTML ne işe yarar? → yapı
- CSS ne işe yarar? → görünüm
- Flexbox neden var? → hizalama
- “Çalışıyor” ile “düzgün” arasındaki fark
Hazırsan, başlıyoruz 👇
🧱 1. Adım: HTML İskeleti (Ev Yapmadan Boya Yapılmaz)
HTML, evin betonu gibidir.
Önce sağlam kur, sonra süslersin.
📄 index.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Kişisel Profil Kartı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-card">
<img src="avatar.jpg" alt="Profil fotoğrafı">
<h2>Cansu Porsuk</h2>
<p class="bio">
Frontend öğrenen, kahvesiz kod yazamayan bir geliştirici ☕💻
</p>
<div class="social-links">
<a href="#">GitHub</a>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
</div>
</div>
</body>
</html>
🧠 Burada bilinçli yaptıklarımız:
altyazdık → erişilebilirlik + SEO- Gereksiz
divkullanmadık - Okunabilir, sade bir yapı kurduk
📌 İpucu:
HTML’in güzel görünmesi gerekmez.
Anlamlı olması yeterlidir.
🎨 2. Adım: CSS Reset (Kaosu Sıfırlıyoruz)
Tarayıcılar kafasına göre margin verir.
Biz diyoruz ki: “Dur kardeşim.”
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
🧠 box-sizing: border-box; ne işe yarar?
Padding ekleyince element büyümesin diye.
Bu satır → gelecekteki sinir krizlerini önler 😄
🧍 3. Adım: Sayfayı Ortalamak (Flexbox Sahneye Çıkıyor)
Kart ortada durmalı.
Çünkü estetik = ilk izlenim 😎
body {
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
}
🎯 Öğrenilen Flexbox mantığı:
justify-content→ yatayalign-items→ dikey
Bir kere anladın mı, geri dönüş yok 😏
🧩 4. Adım: Kart Tasarımı (Asıl Olay)
.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);
}
🎨 Burada kart hissini veren şeyler:
border-radius→ yumuşaklıkbox-shadow→ derinlikpadding→ nefes alan tasarım
🖼️ 5. Adım: Avatar (Yuvarlak Olmazsa Olmaz)
.profile-card img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 16px;
}
🧠 object-fit: cover altın bilgidir.
Fotoğraf yamulmaz, kırpılır, estetik kalır.
✍️ 6. Adım: İsim & Bio (Az ama Öz)
.profile-card h2 {
margin-bottom: 8px;
}
.bio {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
📌 Gerçek hayat kuralı:
Bio kısa olur.
Kimse kartta manifesto okumaz 😄
🔗 7. Adım: Sosyal Linkler (Flexbox Pratiği)
.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;
}
🎯 Burada öğrendiklerin:
- Inline elementleri Flexbox ile dizmek
- Hover efekti vermek
- UI hissi oluşturmak
🧪 Ortaya Çıkan Sonuç
✔️ Gerçek bir profil kartı
✔️ HTML + CSS birlikte
✔️ Flexbox mantığı oturdu
✔️ Portföye eklenebilir proje
Bu noktada şunu diyebilirsin:
“Evet, ben bir şey yaptım.” 😎
⚠️ Yeni Başlayanların En Çok Düştüğü Tuzaklar
❌ Her şeyi ortalamaya çalışmak
❌ Flexbox’ı ezberlemek
❌ Görseli kontrol etmemek
❌ “Çalışıyor” deyip bırakmak
🚀 Bonus Geliştirme Görevleri (Kendini Test Et)
- Hover’da kart büyüsün
- Dark mode ekle 🌙
- Gradient arka plan
- Mobilde kart genişlesin 📱
Bunları yapabiliyorsan → seviye atladın 🆙
🎯 Final Cümlesi
Bu proje küçük olabilir ama şunu öğretir:
HTML + CSS sadece öğrenilmez,
yapılarak öğrenilir.
