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ı