HTML + CSS ile İlk Kişisel Web Sitesi Projesi

Proje Özeti

Ne geliştirilecek?

Öğrencinin ilgi alanlarını, hedeflerini ve projelerini semantik HTML ve responsive CSS ile sunduğu örnek uygulama.

Amaç

Neden uygulanmalı?

İçerik yapısı ile görsel sunumu ayırarak erişilebilir ve farklı ekranlara uyumlu ilk web sayfasını oluşturmak.

Problem / İhtiyaç

Çözüm hangi ihtiyaçtan doğuyor?

İçerik yapısı ile görsel sunumu ayırarak erişilebilir ve farklı ekranlara uyumlu ilk web sayfasını oluşturmak.

Öğrenme Kazanımları

Semantik HTML kurar.
Başlık, paragraf, liste, görsel ve bağlantı kullanır.
Renk, boşluk ve kenarlık düzenler.
Media query yazar.
Kişisel veri güvenliğine dikkat eder.

Sınıfta Uygulama

Hedef Kitle: Web geliştirmeye yeni başlayan öğrenciler
Önerilen Süre: 3–4 ders saati
Çalışma Biçimi: Bireysel
Öğretmen Hazırlığı: Örnek klasör hazırlamak; telif, görsel ve kişisel veri paylaşımı sınırlarını açıklamak.

Derse Giriş Etkinliği

Öğrencilerden “HTML + CSS ile İlk Kişisel Web Sitesi hangi gerçek ihtiyaca cevap verebilir?” sorusuna kodu görmeden çözüm adımları önermeleri istenir.

20 dk: HTML
30 dk: İçerik
40 dk: CSS
25 dk: Responsive
20 dk: Gizlilik kontrolü
15 dk: Sunum

Ön Koşullar

Dosya ve klasör oluşturma
Metin editörü kullanımı

Kullanılacak Araçlar ve Teknolojiler

HTML5
CSS3
Semantik Etiketler
Responsive Tasarım

Gerekli Malzemeler

Kod editörü
Web tarayıcısı
index.html
style.css
images/ klasörü

Uygulama Aşamaları

Proje klasörünü oluştur.
header, main, section ve footer yapısını kur.
Güvenli tanıtım içeriğini yaz.
CSS dosyasını bağla.
Renk ve spacing ekle.
Dar/geniş ekranda test et.

Örnek Kod veya Teknik İçerik

Klasör yapısı

index.html style.css images/

Örnek HTML

İsim ve içerikler güvenli bilgilerle değiştirilmelidir.

html

<!doctype html>
<html lang="tr"><head><meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Öğrenci Portfolyom</title><link rel="stylesheet" href="style.css" /></head>
<body><header><h1>Merhaba, ben Ada</h1><p>Kodlama öğreniyorum.</p></header>
<main><section><h2>İlgi Alanlarım</h2><ul><li>Web tasarımı</li><li>Robotik</li></ul></section>
<section><h2>Projelerim</h2><p>İlk web sayfamı geliştiriyorum.</p></section></main>
<footer><a href="https://example.com">Güvenli bir kaynak</a></footer></body></html>

Örnek CSS

Akışkan genişlik ve media query temel responsive davranışı sağlar.

css

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; color: #172033; background: #f4f7fb; }
header, main, footer { width: min(100% - 2rem, 760px); margin-inline: auto; }
header { padding-block: 4rem 2rem; }
section { margin-block: 1rem; padding: 1.5rem; border: 1px solid #dbe3ef; border-radius: 1rem; background: white; }
a { color: #5b3fd1; }
@media (max-width: 600px) { header { padding-top: 2.5rem; } section { padding: 1rem; } }

Öğrenci Görevi

Uygula ve geliştir

En az iki ilgi alanı, bir proje fikri ve bir öğrenme hedefi içeren; yalnızca güvenli bilgiler kullanan sayfa hazırla.

Beklenen Sonuç

Başarı nasıl görünecek?

Öğrenci, “En az iki ilgi alanı, bir proje fikri ve bir öğrenme hedefi içeren; yalnızca güvenli bilgiler kullanan sayfa hazırla.” görevini tamamlayan çalışan bir ürün sunar; sonucunu test senaryoları, gözlemler ve teknik kararlarını açıklayan kısa bir değerlendirmeyle kanıtlar.

Değerlendirme Ölçütleri

Toplam: 100 puan

Ölçüt	Puan
Semantik HTML	20
İçerik düzeni	20
CSS tasarımı	20
Responsive test	15
Erişilebilirlik ve gizlilik	15
Sunum	10

Geliştirme Fikirleri

Proje kartları
CSS Grid
Koyu tema
Erişilebilir navigasyon

Test Senaryoları

CSS dosyasını bağla. adımını beklenen ve sınır bir değerle doğrula.
Renk ve spacing ekle. adımını beklenen ve sınır bir değerle doğrula.
Dar/geniş ekranda test et. adımını beklenen ve sınır bir değerle doğrula.

Sık Karşılaşılan Hatalar

Yanlış CSS yolu
Kapanmayan etiketler
Alt metin eklememek
Sabit genişlikle taşma
Hassas bilgi paylaşmak

Hata Ayıklama Önerileri

Yanlış CSS yolu: İlgili bağlantı veya girdiyi tek başına test et, sonucu kaydet ve yalnız bir değişkeni değiştir.
Kapanmayan etiketler: İlgili bağlantı veya girdiyi tek başına test et, sonucu kaydet ve yalnız bir değişkeni değiştir.
Alt metin eklememek: İlgili bağlantı veya girdiyi tek başına test et, sonucu kaydet ve yalnız bir değişkeni değiştir.
Sabit genişlikle taşma: İlgili bağlantı veya girdiyi tek başına test et, sonucu kaydet ve yalnız bir değişkeni değiştir.
Hassas bilgi paylaşmak: İlgili bağlantı veya girdiyi tek başına test et, sonucu kaydet ve yalnız bir değişkeni değiştir.

Güvenlik Notları

Telefon, adres, okul/sınıf veya konum paylaşılmamalıdır.
Gerçek fotoğraf zorunlu tutulmamalıdır.
Puanlamayı okunabilirlik ve düzene dayandırın.

Öğretmen Notları

Telefon, adres, okul/sınıf veya konum paylaşılmamalıdır.
Gerçek fotoğraf zorunlu tutulmamalıdır.
Puanlamayı okunabilirlik ve düzene dayandırın.

Öğrenci Öz Değerlendirme Soruları

Çözümümün doğru çalıştığını hangi testlerle gösterdim?
Karşılaştığım en önemli hata neydi ve nasıl çözdüm?
Projeyi yeniden yapsam hangi kararı değiştirirdim?

Sonraki Öğrenme Önerisi

Buradan sonra ne öğrenilebilir?

HTML + CSS ile İlk Kişisel Web Sitesi çalışmasını fonksiyonlar, daha kapsamlı test senaryoları ve kullanıcı geri bildirimiyle geliştirmeyi dene.

Ders Paketi

Materyaller

Henüz üretilmemiş dosyalar için indirme bağlantısı sunulmuyor. Güncel durum:

Öğretmen Kılavuzu — Hazırlanıyor
Öğrenci Çalışma Kâğıdı — Hazırlanıyor
Kaynak Kod — Sayfa içinde mevcut
Değerlendirme Rubriği — Sayfa içinde mevcut

Öğrenmeye Devam Et

Benzer Projeler

Tüm Projelere Dön İçerik Önerisi Paylaş

HTML + CSS ile İlk Kişisel Web Sitesi