| Hafta | Konular | Ön Hazırlık |
|---|
| 1 | Konu Anlatımı: Derse Giriş, HTML, CSS ve JS nedir? Frontend ve Backend Developer Ne demek? | 1. Web Sayfasının nasıl çalıştığının araştırılması. 2. Front-end ve back-end in ne işe yaradığının araştırılması. |
| 2 | Konu Anlatımı: HTML e Giriş, HTML de sıklıkla kullanılan tagler, HTML de tablolar Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. Konu Anlatımı: CSS in temelleri, CSS yazım kuralları, CSS görsel kuralları Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. Kısa Sınav 1 (25-30 dk.): Ders sonunda, ikinci haftada işlenen konuları içeren bir kısa sınavın yapılması | 1. HTML, CSS ve JS in web sayfası geliştirilmesindeki rolü 2. Sık kullanılan HTML taglerinin araştırılması. 3. Kısa Sınav 1: HTML de temel kavramlar. 4. HTML & CSS, Jon Duckett Bölüm 1-6 sayfa 12-143 5. Ders Notları. |
| 3 | Konu Anlatımı: CSS in temelleri, CSS yazım kuralları, CSS görsel kuralları Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. Kısa Sınav 2 (25-30 dk.): Ders sonunda, üçüncü haftada işlenen konuları içeren bir kısa sınavın yapılması | 1. CSS in temel yapısının, ne işe yaradığının ve HTML ile bağlantısının nasıl sağlandığının araştırılması. 2. Kısa Sınav 2: CSS de temel kavramlar. • HTML & CSS, Jon Duckett Bölüm 10-12 sayfa 226-299 • Ders Notları. |
| 4 | Sınıf-içi Uygulama (140 dk.): HTML ve CSS ile öğrenilen kavramlardan ilk web sayfasının yapılması. Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. | 1. HTML ve CSS kullanılarak öğrencilerin ilk web sayfası tasarımını yapması. • Ders Notları |
| 5 | Konu Anlatımı: Kutu Modeli ve CSS de İleri Tasarım, Renkler, Fontlar, Bağlantı ve Tuşlar Sınıf-içi Uygulama (60 dk.): Kutu Modeli ve CSS de İleri Tasarım Konuları ile ilgili bilgisayar uygulaması Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. Kısa Sınav 3 (25 dk.): Ders bitiminde, beşinci haftada işlenen konuları içeren bir kısa sınavın yapılması | 1. Kutu Modelinin İşlevi’nin araştırılması. 2. CSS de Renkler, Fontlar ve Bağlantılar üzerinde yapılabilecek şekillendirmelerin araştırılması. 3. Kısa Sınav 3: Kutu Modeli, CSS de İleri Tasarım. • HTML & CSS, Jon Duckett Bölüm 13 sayfa 300-329 • Ders Notları |
| 6 | Konu Anlatımı: Gösterim ve Yerleşim, Gridler ve Yerleşim, Flexbox ile yerleşim Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. Kısa Sınav 4 (15 dk.): Ders bitiminde, altıncı haftada işlenen konuları içeren bir kısa sınavın yapılması | 1. CSS ile web elementlerinin sayfaya yerleştirilmesi için alternatif yöntemlerin araştırılması. 2. Kısa Sınav 4: Gösterim ve Yerleşim, Gridler ve Yerleşim, Flexbox ile yerleşim. • CSS in Depth Bölüm 4 sayfa 93-118, Bölüm 6 sayfa 153-178 • Ders Notları |
| 7 | Konu Anlatımı: Gridlerin Temelleri Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. | 1. Grid yönteminde kullanılabilecek özelliklerin araştırılması, flexbox ile benzerlik ve farklılıkların ortaya konması. • CSS in Depth Bölüm 5 sayfa 119-152 • Ders Notları |
| 8 | Ara Sınav 1 | |
| 9 | Sınıf-içi Uygulama (120 dk.): HTML ve CSS de görünüm ve yerleşim, flexbox ve grid ile ilgili bir uygulama yapılması. Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. | 1. HTML ve CSS de görünüm ve yerleşim, flexbox ve grid ile ilgili bir uygulama yapılması. Ders Notları |
| 10 | Konu Anlatımı: JavaScripte Giriş, Koşullu İfadeler, Fonksiyonlar Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. | 1. JS in tarihçesinin, ne için kullanıldığının, temel veri yapılarının, koşullu ifadelerin ve fonksiyonların nasıl tanımlandığının araştırılması. • JavaScript The Definitive Guide Bölüm 1-6, Bölüm 9 • Ders Notları |
| 11 | Sınıf-içi Uygulama (120 dk.): JavaScripte Giriş konusunda uygulamalar yapılması Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. Kısa Sınav 5 (25 dk.): Ders sonunda, onuncu ve onbirinci haftalarda işlenen konuları içeren bir kısa sınavın yapılması. | 1. JavaScripte Giriş konusunda uygulamalar yapılması. 2. Kısa Sınav 5: JS e Giriş • Ders Notları |
| 12 | Konu Anlatımı: HTML’de formlar Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. | 1. HTML de Formlar, Listeler, Tek ya da Çoktan Seçmeli Tuşların Nasıl Oluşturulduğunun Araştırılması. • HTML & CSS, Jon Duckett Bölüm 7 sayfa 144-175 • Ders Notları |
| 13 | Konu Anlatımı: Doküman nesne modeli (DOM), JS ve DOM, JS de DOM olayları Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. Kısa Sınav 6 (25 dk.): Ders sonunda, on ikinci ve on üçüncü haftalarda işlenen konuları içeren bir kısa sınavın yapılması. | 1. DOM un ne olduğunun araştırılması. 2. DOM olayları ile JS olaylarının bağdaştırılması. 3. Kısa Sınav 6: HTML de Formlar ve DOM 4. JavaScript The Definitive Guide Bölüm 15 5. Ders Notları |
| 14 | Konu Anlatımı: JavaScript Diziler, Objeler, Döngüler Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. | 1. JavaScript Diziler, Objeler, Döngüleri anlamak • Ders Notları |
| 15 | Sınıf-içi Uygulama (150 dk.): Uçtan uca bir web programlama projesinin oluşturulması ve uygulanması. Sınıf-içi Tartışma (5 dk.): Öğrenilen kavramların pekiştirilmesi ve gerçek hayattaki karşılıkları ile ilgili tartışma. | 1. Derste öğrenilen tüm yöntemler kullanılarak oluşturulan uçtan uca bir web programlama projesinin sunulması. • Ders Notları |
| 16 | Final | |
