MDN Web Docs – HTML, CSS, JavaScript dokümantasyonu
W3Schools – Temel web geliştirme örnekleri
Google – Örnek görseller
Kendi geliştirmem (öğrenme amaçlı proje)
Fiat 500
Fiat Egea
Ford Puma
Renault Symbol
VW Tiguan
TOGG
Algoritma
Sayfa yüklenir
→ Resimler hazırlanır
→ Kullanıcı resme tıklar
→ Lightbox açılır
→ Otomatik slideshow başlar
→ Kullanıcı ileri/geri yapabilir
→ Kapatılırsa sistem durur
Açıklama
👇
Bu aslında bir "akıllı fotoğraf galerisi".
Önce HTML ile sayfaya küçük küçük resimleri koydum. Yani HTML = iskelet.
Sonra CSS ile bunları güzel görünecek şekilde düzenledim. Kutular, boşluklar, renkler vs.
Yani CSS = tasarım.
Asıl eğlenceli kısım JavaScript 😎
JavaScript ile şunu yaptım:
- Bir resme tıklanınca büyük hali açılıyor (lightbox)
- Sağ ve sol butonlarla diğer resimlere geçiliyor
- Ayrıca sistem kendi kendine 3 saniyede bir resim değiştiriyor
Yani aslında ben şunu yaptım:
"Kullanıcı ne yaparsa, ona göre tepki veren bir sistem kurdum"
Mesela:
- Tıklarsa → resmi büyüt
- Ok tuşuna basarsa → diğer resme geç
- Hiçbir şey yapmazsa → otomatik ilerlet
Bunu da JavaScript'te "if" ve "fonksiyon" mantığıyla yaptım.
Kısa anlatım
👉 HTML ile yapıyı kurdum
👉 CSS ile tasarladım
👉 JavaScript ile hareket kazandırdım
"Bu proje kullanıcı etkileşimine tepki veren basit bir frontend uygulamasıdır." 😄
