DigiBlog

Donanım alanına odaklanan bir dijital haber portalı, web sayfalarına dinamik içerikler eklemek için Component Fonksiyonları yazdırmak istiyor.

Amaç

• HTML ve CSS'i hazır bir sayfanın içeriklerini ve bazı kullanıcı etkileşimlerini, component fonksiyonları kullanarak sayfaya entegre etmek.
• Detaylı yönergeler components/news/news.js ve components/menu/menu.js dosyalarında.
• HTML ve CSS dosyaları hazır, sen sadece yukarıda belirtilen JavaScript dosyalarında değişiklik yapacaksın.
• Unutma, takıldığın yerlerde terminaldeki test mesajlarında ipuçları bulabilirsin.

🚀 Projeye Başlama

Adım 1: Projeyi Kendi Hesabınıza Kopyalayın

1. Bu sayfanın sağ üst köşesindeki Fork butonuna tıklayın
2. Kendi GitHub hesabınızda proje kopyası oluşacak

Adım 2: Projeyi Bilgisayarınıza İndirin

Görseldeki adımları takip edin ya da terminali kullanabilirsiniz.

git clone [buraya-kendi-fork-linkinizi-yazın]
cd [proje-klasor-adi]

Adım 3: Gerekli Kurulumları Yapın

Terminal açın ve sırasıyla şu komutları çalıştırın:

npm install
npm run c2w

💡 İpucu: Bu komutlar gerekli paketleri yükler ve test sistemini başlatır.

🔧 VS Code Hazırlığı

Live Server Eklentisi (Zorunlu)

Live Server, HTML dosyalarınızı tarayıcıda canlı olarak görüntüler. Değişiklikler anında yansır.

Kurulum:

1. VS Code'da sol paneldeki Extensions (📦) simgesine tıklayın
2. Arama kutusuna Live Server yazın
3. Ritwick Dey tarafından yapılan eklentiyi bulun
4. Install butonuna tıklayın

Kullanım:

• HTML dosyanıza sağ tıklayın → "Open with Live Server"
• Tarayıcınızda proje otomatik açılır

Prettier Eklentisi (Önerilen)

Kodunuzu otomatik olarak düzenler ve formatlar.

Kurulum:

1. Extensions bölümünde Prettier arayın
2. "Prettier - Code formatter" eklentisini kurun
3. Ayarlar → "Format On Save" seçeneğini aktif edin

📝 Geliştirme Süreci

0. Öğrenci numaranızı student_id.txt dosyasına yazın 

1. Testleri Takip Edin

• Terminal açık tutun ve test çıktılarını izleyin
• main.js dosyasını her kaydettiğinizde testler otomatik çalışır
• Başarılı testler ✅, başarısız testler ❌ ile gösterilir

2. Adım Adım İlerleyin

• Her küçük ilerleme sonrası değişiklikleri kaydedin
• Testlerin durumunu kontrol edin
• Bir özelliği tamamen bitirdikten sonra commit yapın

3. Düzenli Commit Yapın

GitHub Desktop uygulamasını kullanarak ilerlemenizi sıklıkla GitHub'a gönderin. Ya da terminali kullanabilirsiniz:

git add .
git commit -m "Anlamlı bir commit mesajı"
git push origin main

🧪 Otomatik Değerlendirme Sistemi

Bu proje otomatik test sistemi ile gelir. Test sonuçları terminal penceresinde görünür. Kırmızı (❌) testleri yeşile (✅) çevirmeye odaklanın.

🆘 Sorun Giderme

Yaygın Sorunlar:

• npm komutları çalışmıyor: Node.js kurulu olduğundan emin olun
• Live Server çalışmıyor: Eklentinin düzgün kurulduğunu kontrol edin
• Testler çalışmıyor: Terminal penceresini kapatıp npm run c2w komutunu tekrar çalıştırın

Yardım İçin:

1. Terminal hatasını tam olarak okuyun
2. Dosya yollarının doğru olduğunu kontrol edin
3. Değişiklikleri kaydettiğinizden emin olun

📋 Çalışma Akışı Özeti

1. ✅ Projeyi fork edin ve clone edin
2. ✅ npm install ve npm run c2w çalıştırın
3. ✅ VS Code eklentilerini kurun
4. ✅ Live Server ile projeyi açın
5. ✅ HTML/CSS dosyalarını düzenleyin
6. ✅ Terminal'den test sonuçlarını takip edin
7. ✅ Düzenli olarak commit yapın
8. ✅ İlerleyişinizi GitHub'a push edin

İyi çalışmalar! 🎨✨