Gün Projesi: HTML ve CSS

Proje Tanımı

Yeni başlayan bir çalışma arkadaşınızın yarım kalan web tasarım projesini tamamlamanız isteniyor. Size verilen tasarım görselini, HTML ve CSS kullanarak birebir oluşturmanız gerekiyor.

Teknik Gereksinimler

1. Dosya Yapısı:

• tasarim.jpg (referans tasarım görseli)
• Görseller: banner.jpg, yemek.jpg, aperatif.jpg, tatli.jpg
• index.html (HTML dosyası)
• index.css (CSS dosyası)

2. Yapılacaklar:

• index.html ve index.css dosyalarındaki yönergeleri takip et
• Tasarıma uygun HTML yapısını oluştur
• CSS ile görsel düzenlemeleri yap
• Preview ekranından bak ve tasarımla karşılaştır

Kontrol Listesi

• Tasarım görseli incelendi mi?
• HTML yönergeleri okundu mu?
• CSS yönergeleri okundu mu?
• Tüm görseller doğru konumda mı?
• Renkler tasarımla uyumlu mu?
• Yazı tipleri ve boyutları doğru mu?
• Boşluklar (margin/padding) tasarıma uygun mu?
• Responsive tasarım kontrol edildi mi?
• Browser testleri yapıldı mı?

İpuçları

1. Kaynak Kullanımı:

• HTML için: MDN Web Docs (developer.mozilla.org)
• CSS için: W3Schools (w3schools.com)
• Renk kodları için: ColorPicker (colorpicker.com)

2. Pratik İpuçları:

• Browser'ın geliştirici araçlarını kullan (F12 tuşu)
• Önce HTML yapısını oluştur, sonra CSS'e geç
• Sorun yaşadığında yönergeleri tekrar oku
• Anlamadığın bir özellik olursa yukarıdaki kaynaklardan araştır

Önemli Notlar

• Proje dizinindeki user.json dosyasını bulun ve user_id alanını NextGen proje ekranında görünen kendi user_id değeriniz ile güncelleyin.
• Geliştirme sırasında testleri izlemek için npm test komutunu kullanın.
• Testleri çalıştırıp skoru NextGen'e kaydetmek için npm run sendresults komutunu kullanın.