Dersin Ayrıntıları

Yarıyıl	Kodu	Adı	T+U+L	Kredi	AKTS	Son Güncelleme Tarihi
1	VTK 101	Web Editörlüğü	1+2+0	2	3	30.07.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ı	Bu derste öğrencilerin modern web editörlerini ve geliştirme ortamlarını tanımaları, Visual Studio Code, Cursor ve Windsurf editörlerini web geliştirme sürecinde etkin biçimde kullanmaları amaçlanmaktadır. Ders kapsamında öğrenciler; HTML5 ve CSS teknolojilerini kullanarak temel web sayfaları oluşturur, web editörlerinin sunduğu kod düzenleme, hata ayıklama, yapay zekâ destekli kod önerileri ve geliştirme araçlarından yararlanarak web geliştirme becerilerini kazanırlar.
Dersin İçeriği	Bu ders kapsamında modern web editörleri ve geliştirme ortamları (Visual Studio Code, Cursor ve Windsurf), editör kurulumu ve yapılandırılması, çalışma alanı (Workspace) yönetimi, eklenti kullanımı, Live Server, Emmet, yapay zekâ destekli kod geliştirme araçları, HTML5 sayfa yapısı, metinler, bağlantılar, görseller, tablolar, listeler, formlar, CSS seçicileri, kutu modeli, konumlandırma, menü tasarımı, geçiş efektleri, animasyonlar ve duyarlı (responsive) web tasarımı uygulamalı olarak ele alınmaktadır.
Dersin Yöntem ve Teknikleri	Anlatım, uygulama, proje ve sunum.
Ö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	Duckett, J. HTML and CSS: Design and Build Websites. MDN Web Docs W3Schools Visual Studio Code Documentation Cursor Documentation Windsurf Documentation
Ders Notları	Duckett, J. HTML and CSS: Design and Build Websites. MDN Web Docs. W3Schools. Visual Studio Code Documentation. Cursor Documentation. Windsurf Documentation.
Dökümanlar	https://developer.mozilla.org https://code.visualstudio.com/docs https://docs.cursor.com https://docs.windsurf.com
Ödevler	2 Ödev 1 Proje
Sınavlar	1 Ara Sınav - 1 Final Sınavı

Ders Yapısı

Mühendislik Bilimleri	%35
Mühendislik Tasarımı	%40
Alan Bilgisi	%25

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	1	14
Ödevler	2	4	8
Ara Sınavlar	1	7	7
Uygulama	14	2	28
Proje	1	10	10
Yarıyıl Sonu Sınavı	1	9	9
Toplam İş Yükü			AKTS Kredisi : 3 90

Dersin Öğrenme Çıktıları: Bu dersin başarılı bir şekilde tamamlanmasıyla öğrenciler şunları yapabileceklerdir:

Sıra No	Açıklama
1	Visual Studio Code, Cursor ve Windsurf geliştirme ortamlarını kurar ve web geliştirme sürecine uygun şekilde yapılandırır.

Beceri
2	Modern web editörlerini kullanarak HTML5 ve CSS ile temel web sayfaları oluşturur.
3	Web editörlerinin sunduğu Emmet, Live Server ve yapay zekâ destekli kod geliştirme araçlarını etkin biçimde kullanır.
5	Güncel web editörlerini kullanarak mobil uyumlu temel web projeleri geliştirir.

Yetkinlik
4	Web sayfalarını geliştirir, test eder, hata ayıklama işlemlerini gerçekleştirir ve gerekli düzenlemeleri yapar.

Ders Konuları

Hafta	Konu	Ön Hazırlık	Dökümanlar
1	Modern Web Editörlerine Giriş (Visual Studio Code, Cursor ve Windsurf), Kurulum ve Geliştirme Ortamının Hazırlanması	Web editörleri ve geliştirme ortamları hakkında temel bilgilerin incelenmesi.	Ders sunumları, Visual Studio Code, Cursor ve Windsurf dokümantasyonları.
2	Visual Studio Code, Cursor ve Windsurf Özellikleri, Emmet, Live Server, Yapay Zekâ Destekli Kod Yazımı ve İlk HTML Sayfası	HTML temel yapısı ve editör özelliklerinin incelenmesi.	Ders notları, VS Code, Cursor ve Windsurf dokümantasyonları.
3	HTML Temelleri, Başlıklar, Paragraflar, Bağlantılar, Görseller ve Listeler	HTML etiketleri ve temel web sayfası yapısının incelenmesi.	HTML5 dokümantasyonu ve ders sunumları.
4	HTML Tabloları, Form Elemanları ve HTML5 Çoklu Ortam Bileşenleri	HTML tabloları ve formlar hakkında temel bilgilerin incelenmesi.	HTML5 dokümantasyonu ve ders notları.
5	CSS'ye Giriş, Seçiciler, Metin ve Arka Plan Biçimlendirme	CSS temel kavramlarının incelenmesi.	CSS ders notları ve MDN Web Docs.
6	CSS Kutu Modeli, Display, Float ve Position Özellikleri	CSS kutu modeli ve yerleşim özelliklerinin incelenmesi.	CSS ders notları.
7	CSS Menü Tasarımları, Font Awesome, Google Fonts ve Geçiş Efektleri	CSS menü tasarımları ve yazı tipleri hakkında ön çalışma yapılması.	CSS ders notları ve Font Awesome dokümantasyonu.
8	Vize Sınavı	İlk yedi haftanın tekrar edilmesi.	Ders notları.
9	İlk Web Sitesi Projesinin Oluşturulması	HTML ve CSS konularının tekrar edilmesi.	Proje yönergesi ve ders notları.
10	Responsive Web Tasarımı ve Media Query Kullanımı	Responsive tasarım temel kavramlarının incelenmesi.	CSS ders notları.
11	Responsive Web Sitesi Uygulamaları	Responsive tasarım uygulamalarının incelenmesi.	Ders notları.
12	İleri CSS Teknikleri ve Animasyonlar	CSS animasyonları ve ileri seviye özelliklerin incelenmesi.	CSS ders notları.
13	Yapay Zekâ Destekli Kod Düzenleme ve Web Projesi Geliştirme Uygulamaları	Yapay zekâ destekli geliştirme araçlarının incelenmesi.	Cursor ve Windsurf dokümantasyonları.
14	Proje Geliştirme, Optimizasyon ve Düzenleme Çalışmaları	Proje çalışmalarının gözden geçirilmesi.	Proje yönergesi.
15	Proje Sunumu, Genel Değerlendirme ve Tekrar	Proje sunumlarının hazırlanması.	Proje dosyaları ve ders notları.
16	Final Sınavı	Dersin tüm konularının tekrar edilmesi.	Ders notları.
17	Final Sınavı	Dersin tüm konularının tekrar edilmesi.	Ders notları.

Dersin Program Çıktılarına Katkısı

	P1	P3	P4	P7	P12	P13	P15	P16
Ö1	5	5			4			3
Be2	5	5	3		5	5	3	4
Be3	5	5	4	3	4	3	4	5
Be5	5	5	4		4	5	4	5
Ye4	4	4	5		3	3	5	3

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