Bu çalışma HTML, CSS ve JavaScript ile E-Ticaret Sitesi Yapımı eğitiminde geliştirilen örnek projeyi anlatır. HTML ve CSS ile responsive bir mağaza arayüzü kur, JavaScript ile ürün arama ve sepet akışlarını birleştir.
Başlamadan önce
Temel HTML, CSS ve JavaScript bilgisi. Fonksiyonlar, diziler, nesneler ve DOM olayları üzerinde pratik yapmış olmak çalışmayı kolaylaştırır.
Kullanılan teknolojiler
HTML, CSS, JavaScript, localStorage, Glide.js.
Eğitimde ele alınan özellikler
- Mağaza, ürün detayı, hesap, iletişim ve blog arayüzleri
- Responsive menü, arama modalı ve slider
- Ürün listeleme, arama, sepete ekleme ve silme
- Sepet toplamını hesaplama ve localStorage kullanımı
Projeyi hangi adımlarla geliştirebilirsin?
- Önce sayfa yapısını ve ortak CSS bileşenlerini oluştur. Header, footer ve ürün kartını farklı sayfalarda tekrar kullan.
- Dar ve geniş ekranları kontrol ederek responsive düzeni tamamla. Menü, modal ve slider davranışlarını ekle.
- Ürün verilerini arayüze bağla. Ürün seçme, sepet ve toplam fiyat akışlarını modüllere ayır.
- Sayfayı yenileme, boş sepet ve arama sonucu bulunamaması gibi durumları dene. Kod düzenlemesinin ardından projeyi canlıya alma adımlarına geç.
Çalışmanı nasıl kontrol edebilirsin?
- Aynı ürünü yeniden eklediğinde sepet davranışı tutarlı mı?
- Bir ürün silindiğinde toplam fiyat yeniden hesaplanıyor mu?
- Dar ekranda menü ve ürün kartları kullanılabiliyor mu?
- Sayfa yenilendiğinde sakladığın sepet verisi geri yükleniyor mu?
Kendi projenle pratiği genişlet
Kendi ürün kataloğunu oluştur. Kategorilere göre filtreleme, erişilebilir klavye kullanımı ve boş durum mesajları ekleyerek çalışmayı genişlet. Bir özellik eklediğinde hem masaüstü hem mobil akışı tekrar dene.
Eklediğin özellikleri ve karşılaştığın hataları kısa notlarla kaydet. Bir özelliği hangi dosyalarda geliştirdiğini göstermek için küçük commit'ler oluştur. Projeni paylaşırken kullanılan araçları, çalıştırma adımlarını ve örnek ekran akışlarını açıkla.