Proje: Kartvizit sayfası

5 derslik projenin genel bakışı: bağlantılar ve listelerle kişisel kartvizit sayfası.

Proje: Kartvizit sayfası

Bu 5 derslik projede bir kartvizit sayfası yapacaksın. Her derste sayfaya bir parça ekleyecek, son derste tam bir kartvizit elinde olacak.

Projede şunları kullanacaksın:

Belge iskeleti (DOCTYPE, html, head, body)
lang, charset, viewport, title
h1 (ad-soyad) ve h2 (ünvan)
ul ile iletişim listesi, a ile mailto/tel bağlantıları
ol ile beceri listesi, harici bağlantılar
hr ile bölüm ayrımı

Hazırsan başlayalım.

Proje yol haritası

Projeyi adım adım şöyle kuracağız:

İsim ve unvan: Sayfa iskeletini kur, head'i doldur, h1 ve h2 ekle.
İletişim listesi: ul ve li ile e-posta/telefon bağlantıları ekle.
Beceriler ve bağlantılar: ol ile beceri listesi, harici bağlantıları yeni sekmede aç.
Proje sonu: hr ile ayır, son bölümü ekle, kartviziti tamamla.

Her dersin başlangıç kodu önceki dersin çözümünü içerir; sen sadece yeni parçayı eklersin.

Hedef kartvizit

Proje sonunda elinde şu yapı olacak:

İsim ve unvan: h1 (ad-soyad) ve h2 (ünvan)
İletişim: ul içinde mailto ve tel bağlantıları
Beceriler: ol içinde sıralı liste
Harici bağlantı: yeni sekmede açılan portföy bağlantısı
Sonuç: hr ve kısa bir kapanış paragrafı

Bu yapıyı 5 derste adım adım kuracaksın.

Uygulama Boş belge iskeletiyle başla

Projeye başlarken boş bir HTML belge iskeleti yaz. İçinde DOCTYPE, <html>, <head>, boş <body> bulunsun. lang, meta, başlıkları sonraki derslerde ekleyeceğiz.

Örnek çözümü göster

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Kendini test et

Proje grubunda başlangıç kodu nasıl çalışır?
- Her dersin başlangıç kodu önceki dersin çözümünü içerir
- Her ders boş bir sayfayla başlar
- Başlangıç kodu yoktur, her şey sıfırdan yazılır
- Başlangıç kodu yalnızca son derste görünür
Cevabı göster

Her dersin başlangıç kodu önceki dersin çözümünü içerir — Doğru. Projede başlangıç kodu her adımda birikir; sen sadece yeni parçayı eklersin.
Dersleri ekledikleri parçayla eşleştir

İsim ve unvan

h1 ve h2 başlığı
İletişim listesi

ul + mailto/tel
Beceriler ve bağlantılar

ol + harici bağlantı
Proje sonu

hr + kapanış paragrafı

Sıradaki ders: İsim ve unvan

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler