Build with AI: From Zero to Your First App · Modül 3: İnternet ve dosyalar · Lab
Sayfa Arızalarını Katmanına Ayır
30 dk uygulamalı · Çekirdek
Yalnız tarayıcı. Bozuk sayfa dosyaları başlangıç malzemesi olarak verilir; kaydet, index.html dosyasını aç, her arızayı yeniden üret.
Bu labın üç yolu var. A: aşağıdaki tarayıcı adımları, ana yol, hesapsız ücretsiz. B: aynı görevi varsa kendi AI aracınla denemek (aracın koşul ve kotaları geçerli). C: verilen malzeme ve aşağıdaki açıklamalı çözümle çalışmak, aynı beceriyi öğretir. Hiçbir yol, canlı AI aracı kullanmamışa kullanmış gibi göstermez.
Hedefler
- Yerel üç dosyalı sayfayı açıp dört arızayı yeniden üretir
- Her arızayı kanıtıyla HTML, CSS ya da JavaScript katmanına atar
- Katman başına tek satırlık değişiklikle bir arızayı düzeltir
Adım 1
Sayfayı aç
Üç başlangıç dosyasını tek klasöre kaydet, index.html dosyasını çift tıkla aç ve dört arızayı doğrula: yanlış saat metni, dar ekranda üst üste binen menü, çalışmayan sipariş butonu, yazınca kaybolan etiketler.
Adım 2
Dört arızayı ayır
Her arızayı tek satır kanıtla katmanına ata: saat metni (içerik), menü taşması (yerleşim), ölü buton (davranış), kaybolan etiket (yanlış etiketli HTML). Henüz düzeltme yok, yalnız ayırma.
Adım 3
Katman başına bir düzelt
Saat metnini HTML içinde, menü sarmayı CSS içinde (nowrap yerine sar), butonu JS içinde düzelt (kod customer-name id'sini istiyor ama girdi id name). Yeniden yükle, üç kontrolü doğrula.
Çalıştığını nasıl doğrularsın
- Dört arıza kanıtıyla doğru katmana atanmış
- Saatler HTML içinde, sarma CSS içinde, id JS içinde düzelmiş
- Sayfa okunur saat, saran menü ve çalışan onayla yeniden yükleniyor
- Kaybolan etiket arızası yer tutucu-etiket-kullanımı diye saptanmış
Deneme alanı
0/4 kontrol geçiyor · Yalnız kapsam bilgisidir, kalite puanı değildir.
Başlangıç projesi aşağıda hazır yüklü. Düzenle, Çalıştır ile önizle, Sonucu kontrol et ile davranış kontrollerini işlet. Kayıt gerekmez; taslağın bu tarayıcıda kalır.
En fazla 10 dosya, yalnız .html/.css/.js, her biri 100 KB. Başarısız içe aktarma taslağına dokunmaz.
Taslak bu tarayıcıda saklanıyor.
İpuçları, üç aşamalı
Aşama 1: dürtme
JS customer-name isterken HTML girdisi id name taşır. Yalnız bu uyumsuzluk butonu öldürür; konsol adını söyler.
Aşama 2: yön
white-space nowrap menüyü tek satıra zorlar. Düzeltme tek CSS kelimesi, baştan yazım değil.
Aşama 3: cevaba yakın
Yer tutucu metin etiket değildir. Belirti davranış gibi görünse de HTML arızası diye not et.
Açıklamalı çözüm (dürüst denemeden sonra aç)
Çözüm. Saatler: HTML içerik arızası, 25:00 yazısını 19:00 yap. Menü: CSS arızası, nowrap yerine normal; satır sarar. Buton: JS arızası, getElementById('customer-name') yerine getElementById('name'); onay uyarısı çalışır. Etiketler: HTML arızası, label öğesi gereken yerde placeholder özniteliği; M04 yeniden inşasına not et. Her düzeltme tek katmana dokunur; yeniden yüklemeyle doğrula: oku, daralt, gönder.