Dersin Ayrıntıları
YarıyılKoduAdıT+U+LKrediAKTSSon Güncelleme Tarihi
2VTK 108İleri Web Tasarımı1+2+02429.09.2026
Dersin Detayları
Dersin Dili Türkçe
Dersin Düzeyi Ön Lisans
Bölümü / Programı Web Tasarımı ve Kodlama
Öğrenim Türü Örgün Öğretim
Dersin Türü Zorunlu
Dersin Öğretim Şekli Yüz Yüze
Dersin Amacı İleri Web Tasarımı dersi, öğrencilerin modern, duyarlı, erişilebilir ve kullanıcı odaklı web arayüzleri geliştirmelerini amaçlamaktadır. Ders kapsamında ileri düzey HTML ve CSS teknikleri, Bootstrap 5 grid sistemi, yardımcı sınıflar ve arayüz bileşenleri, responsive tasarım, form yapıları, temel                        JavaScript                        etkileşimleri, erişilebilirlik, performans iyileştirme, tarayıcı uyumluluğu ve web projelerinin yayımlanması ele alınmaktadır. Öğrenciler ders süresince farklı ekran boyutlarına uyum sağlayan, görsel bütünlüğe sahip, kullanılabilir ve yayına hazır web projeleri geliştirir.
Dersin İçeriği İleri düzey HTML ve CSS uygulamaları, responsive web tasarımı, mobil öncelikli tasarım yaklaşımı, Bootstrap 5 kurulumu, grid sistemi, container, breakpoint, flex ve yardımcı sınıflar, navigasyon yapıları, kartlar, tablolar, formlar, modal pencereler, carousel, accordion ve diğer arayüz bileşenleri, temel                        JavaScript                        destekli etkileşimler, kullanıcı deneyimi ve erişilebilirlik ilkeleri, tarayıcı uyumluluğu, performans iyileştirme, proje düzeni, kod organizasyonu, hata ayıklama ve web projelerinin yayına hazırlanması konuları uygulamalı çalışmalar ve proje geliştirme süreçleriyle ele alınmaktadır.
Dersin Yöntem ve Teknikleri Anlatım, uygulama, proje tabanlı öğrenme ve proje sunumu.
Ön Koşulları Yok
Dersin Koordinatörü Yok
Dersi Verenler Öğr.Gör. Afife ÇİFTCİ OLGUN afife.ciftci@ankarabilim.edu.tr
Dersin Yardımcıları Yok
Dersin Staj Durumu Yok

Ders Kaynakları
Kaynaklar Bootstrap 5 Resmî Dokümantasyonu.
Erdinç, F. Yeni Başlayanlar İçin HTML5, CSS3 ve JavaScript.
web.dev – Duyarlı Web Tasarımı, Erişilebilirlik ve Performans Kaynakları.
W3C Web Erişilebilirliği Girişimi Kaynakları.
MDN Web Dokümantasyonu.
W3Schools Web Geliştirme Eğitimleri.
Ders Notları Erdinç, F. Yeni Başlayanlar İçin HTML5, CSS3 ve                        JavaScript                       .
Bootstrap Documentation.
MDN Web Docs.
W3Schools Web Development Tutorials.
web.dev – Responsive Web Design, Accessibility and Performance Resources.
W3C Web Accessibility Initiative Resources.
Dökümanlar https://getbootstrap.com/docs https://developer.mozilla.org https://www.w3schools.com https://web.dev https://www.w3.org/WAI
Ödevler 2 Ödev 1 Proje
Sınavlar 1 Ara Sınav 1 Final Sınavı

Ders Yapısı
Mühendislik Bilimleri %30
Mühendislik Tasarımı %20
Alan Bilgisi %50

Planlanan Öğrenme Aktiviteleri ve Metodları
Etkinlikler ayrıntılı olarak "Değerlendirme" ve "İş Yükü Hesaplaması" bölümlerinde verilmiştir.

Değerlendirme Ölçütleri
Yarıyıl Çalışmaları Sayısı Katkı
Ara Sınav 1 % 30
Ödev 2 % 10
Proje 1 % 20
Yarıyıl Sonu Sınavı 1 % 40
Toplam :
5
% 100

 
AKTS Hesaplama İçeriği
İş Yükü Sayısı Süre Toplam İş Yükü (Saat)
Ders Süresi 14 1 14
Sınıf Dışı Ç. Süresi 14 2 28
Ödevler 2 9 18
Ara Sınavlar 1 6 6
Laboratuvar 14 2 28
Proje 1 16 16
Yarıyıl Sonu Sınavı 1 10 10
Toplam İş Yükü   AKTS Kredisi : 4 120

 
Dersin Öğrenme Çıktıları: Bu dersin başarılı bir şekilde tamamlanmasıyla öğrenciler şunları yapabileceklerdir:
Sıra NoAçıklama
1 Duyarlı (responsive) web tasarımı, mobil öncelikli tasarım ve kırılım noktalarının (breakpoints) kullanımına ilişkin temel ilkeleri açıklar.
3 Bootstrap arayüz bileşenlerini ve temel JavaScript destekli etkileşimleri kullanarak işlevsel ve kullanıcı odaklı web arayüzleri geliştirir.
4 Web arayüzlerini kullanılabilirlik, erişilebilirlik, tarayıcı uyumluluğu ve performans ölçütlerine göre değerlendirerek iyileştirir.
Beceri 
2 Bootstrap grid sistemi, flex yapısı ve yardımcı sınıfları kullanarak farklı ekran boyutlarına uyum sağlayan sayfa düzenleri oluşturur.
5 Yapay zekâ destekli araçlardan yararlanarak modern web standartlarına uygun, düzenli dosya yapısına sahip ve yayına hazır web projeleri geliştirir, test eder ve iyileştirir.

 
Ders Konuları
HaftaKonuÖn HazırlıkDökümanlar
1 İleri Web Tasarımına Giriş, Responsive Tasarım, Mobil Öncelikli Yaklaşım ve Bootstrap 5 Kurulumu Responsive tasarım ve Bootstrap hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
2 Bootstrap Container Yapısı, Breakpoint’ler, Grid Sistemi, Satır ve Sütun Düzenleri Bootstrap grid sistemi hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
3 Bootstrap Flex, Display, Position, Sizing, Spacing ve Shadow Yardımcı Sınıfları Bootstrap yardımcı sınıfları hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
4 Typography, Renkler, Görseller, Tablolar, Butonlar ve İçerik Düzenleme Sınıfları Bootstrap içerik bileşenleri hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
5 Navbar, Nav, Dropdown, Breadcrumb ve Responsive Navigasyon Tasarımı Bootstrap navigasyon bileşenleri hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
6 Card, List Group, Accordion, Alert, Badge ve Collapse Bileşenleri Bootstrap arayüz bileşenleri hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
7 Carousel, Modal, Offcanvas, Tooltip, Popover ve Spinner Bileşenleri Bootstrap etkileşimli bileşenleri hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
8 Ara Sınav İlk yedi haftanın tekrar edilmesi. Ders notları.
9 Bootstrap Form Yapıları, Form Düzenleri, Doğrulama ve Kullanıcı Geri Bildirimleri Bootstrap form yapıları hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
10 Pagination, Progress, Scrollspy ve Temel JavaScript Destekli Bootstrap Etkileşimleri Bootstrap etkileşimleri hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
11 Kullanıcı Deneyimi, Web Erişilebilirliği, Semantik Yapı ve Tarayıcı Uyumluluğu Web erişilebilirliği hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
12 Performans İyileştirme, Görsel Optimizasyonu, Kod Düzeni ve Yeniden Kullanılabilir Bileşenler Performans iyileştirme yöntemleri hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
13 Proje Planlama, Arayüz Tasarımı, Sayfa Yapısı ve Responsive Proje Geliştirme Proje geliştirme süreci hakkında ön araştırma yapılması. Ders sunumu, ders notları ve ilgili kaynaklar.
14 Yapay Zekâ Destekli Web Projesi Geliştirme; Kod Düzenleme, Test, Hata Ayıklama ve İyileştirme Uygulamaları
15 Projelerin Yayına Hazırlanması, Proje Sunumları ve Genel Değerlendirme Projelerin sunuma hazır hâle getirilmesi. Ders sunumu ve ders notları.
16 Final Sınavı Final sınavına hazırlık. Ders notları.
17 Final Sınavı Final sınavına hazırlık. Ders notları.

 
Dersin Program Çıktılarına Katkısı
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 P13 P14 P15 P16
Ö1 5 3 5 5 3
Ö3 5 5 4 5 5 5
Ö4 4 4 5 4 4 5 4
Be2 5 5 4 5 5 4
Be5

  Katkı Düzeyi: 1: Çok Düşük 2: Düşük 3: Orta 4: Yüksek 5: Çok Yüksek