HTML & CSS Ders Programı
12 haftalık bu programda önce HTML’in temellerini, ardından CSS ile sayfaları nasıl güzelleştireceğini öğreneceksin. Her ders kısa teorik anlatım, örnek kodlar ve mini görev içerir. Sırayla ilerlemeni öneririm.
-
Ders 1
VS Code & İlk HTML Sayfası
HTML yapısına giriş, VS Code kurulumu, proje klasörü oluşturma ve ilk <h1> başlığını tarayıcıda görüntüleme.
-
Ders 2
Başlıklar & Paragraflar
<h1>–<h6> başlık etiketleri, <p> paragraf, <br> ve <hr> ile satır düzeni ve metin yapısı.
-
Ders 3
Linkler, Görseller ve Butonlar
<a> ve href ile linkler, yeni sekmede açma, mail/telefon linki, <img> ile görseller ve basit <button> kullanımı.
-
Ders 4
Listeler ve Menü Yapısı
<ul>, <ol>, <li> ile sıralı ve sırasız listeler; basit yatay navigasyon menüsü tasarlama.
-
Ders 5
Tabloların Temeli
<table>, <tr>, <td>, <th> ile tablo yapısı; küçük bir <colspan> ve <rowspan> örneğiyle hücre birleştirme.
-
Ders 6
Formlar
<form>, <input>, <label>, placeholder ve required; <select>, <option>, <textarea> ile kullanıcıdan veri alma.
-
Ders 7
Semantic HTML
<header>, <main>, <section>, <article>, <aside>, <footer> ile anlamlı sayfa iskeleti, SEO ve ekran okuyucu mantığına giriş.
-
Ders 8
Mini HTML Projesi
Sadece HTML kullanarak küçük bir web sayfası: Hakkında, Hobiler, Fotoğraf ve Linkler bölümlerini içeren basit profil sitesi.
-
Ders 9
CSS Temelleri
style.css dosyasını bağlama, color ve background-color ile renkler, font-size ve font-family ile yazı tipi ayarları; ilk basit stil örnekleri.
-
Ders 10
Box Model: margin, padding, border
Kutu modeli mantığı; margin ve padding ile dış/İç boşluklar, border ile çerçeve ekleme ve sayfa düzenini hissetme.
-
Ders 11
Flexbox ile Sayfa Düzeni
display:flex, yatay/dikey hizalama, yan yana yerleşim; nav bar tasarımı ve kart düzeni gibi modern layout örnekleri.
-
Ders 12
Final Proje: Kişisel Web Sitesi
HTML + CSS kullanarak kişisel web sitesi: Menü, Hakkımda, Fotoğraf, Hobiler, Linkler, mini tablo, iletişim formu ve flexbox düzeni.