Build with AI: From Zero to Your First App · Modül 4: AI ile ilk web sayfan · Lab
Üç İşaretli Görsel Düzeltme
30 dk uygulamalı · Çekirdek
Yalnız tarayıcı. Üç arıza tarifi ekran görüntüsü yerine geçer; her birine işaret cümlesi artı çit yazarsın.
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
- Üç arıza görüntüsünü genişlikli kelimeyle anlatır
- Her birine ölçütlü koru/değiştir/kontrol yazar
- Her düzeltmenin iki genişlikte kontrol edileceğini doğrular
Adım 1
Üç arızayı al
Arıza 1: 360px'te üçüncü yemek fiyatı adın altına düşüyor. Arıza 2: gönder butonuna telefonda boşluk kaydırarak ulaşılıyor. Arıza 3: masaüstünde menü ve saatler geniş boş kenarlıklı tek dar sütuna sıkışmış. Her birine görüntü tarifi yaz (arıza artı bağlam artı genişlik).
Adım 2
Üç düzeltmeyi yaz
Her düzeltme: KORU (metin, renk, form davranışı), DEĞİŞTİR (ölçütlü tek yerleşim kuralı), KONTROL (360px artı masaüstü, göz artı tek dokunuş).
Adım 3
Her birinde tuzağı adlandır
Her arızada belirsiz isteğin en çok neyi kıracağını (tüm yeniden tasarım, yeni renk, taşınan bölüm) işaretli isteğin neyi koruduğuna karşı yaz.
Çalıştığını nasıl doğrularsın
- Üç görüntü tarifi genişlik ve bağlamlı
- Üç koru/değiştir/kontrol düzeltmesi, her biri tek yerleşim kuralı
- Her kontrol iki genişliği göz artı tek dokunuşla kapsıyor
- Üç arızada tuzak-koruma satırı yazılmış
Çalışma alanı
0/2 kontrol geçiyor · Yalnız kapsam bilgisidir, kalite puanı değildir.
Taslak bu tarayıcıda saklanıyor.
İpuçları, üç aşamalı
Aşama 1: dürtme
Arıza 1 tek satır-yerleşim kuralı (fiyat hizası). Arıza 2 buton konumu ya da üstündeki boşluk. Arıza 3 masaüstünde sütun-genişlik kuralı.
Aşama 2: yön
Koru-listeleri her seferinde tekrarlanır: metin, renk, form davranışı. Koruma tekrardır.
Aşama 3: cevaba yakın
Ölçütler evet/hayır olmalı: 360px'te fiyat aynı satırda; buton kaydırmasız görünür; masaüstünde iki okunur sütun.
Açıklamalı çözüm (dürüst denemeden sonra aç)
Çözüm. Düzeltme 1: Metin/renk/form KORU. Menü satır yerleşimini DEĞİŞTİR; fiyat 360px'te aynı satırda sağa hizalı dursun. KONTROL: daralt, üçüncü satırı oku. Düzeltme 2: Tüm alan ve metni KORU. Boşluğu DEĞİŞTİR; gönder butonuna 360px'te kaydırmasız ulaşılsın. KONTROL: daralt, dokun. Düzeltme 3: İçerik ve sırayı KORU. Masaüstü sütunları DEĞİŞTİR; menü ve saatler iki okunur sütunda dursun. KONTROL: masaüstü oku artı 360px yeniden kontrol (alt alta, yana kaydırma yok). Her birinin belirsiz sürümü menüyü yeniden tasarlar, sayfayı yeniden renklendirir ya da bölümleri taşırdı; işaretli sürüm tek kurala dokunur.