Vibecoding · 2-dars · 9-11 sinflar
Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 1Неделя: 1Week: 1

Vibecoding Asoslari

AI ga buyruq berish uchun zarur bo'lgan dasturchilar lug'ati va veb-sayt arxitekturasi.

Vibecoding siri

Nega "Menga veb-sayt qilib ber" ishlamaydi?

Xomxayol

AI ga "chiroyli sayt qil" desangiz, u nima qilishni bilmay, xunuk va shablonli natija beradi.

Haqiqat: Siz arxitektorsiz

AI bu faqat g'isht teruvchi usta. Agar sizda binoning chizmasi va atamalari bo'lmasa, usta qiyshiq uy quradi.

Top-down tizim

Veb-saytning 4 ta qatlami

Sayt shunchaki rasmlar yig'indisi emas. U xuddi mashina kabi 4 ta muhim qismdan iborat:

  • 1. UI / UX (Dizayn): Mashinaning tashqi ko'rinishi va saloni. Qulayligi.
  • 2. Frontend: Mashinaning kuzovi va knopkalari (Siz tegadigan qism).
  • 3. Backend: Mashinaning matori (Ko'rinmaydi, lekin harakatga keltiradi).
  • 4. API: Rul va gaz pedali (Sizning buyrug'ingizni matorga yetkazadi).
Dizayn sirlari

UI va UX ning farqi nima?

UI (User Interface)

Foydalanuvchi interfeysi. Saytning qanday ko'rinishi.

  • Ranglar
  • Shriftlar (Yozuv turi)
  • Chiroyli rasmlar
Ketchupning chiroyli shisha idishi (siqish qiyin)

UX (User Experience)

Foydalanish tajribasi. Sayt qanchalik qulay ishlashi.

  • Tugmalarning to'g'ri joylashuvi
  • Saytning tez ishlashi
  • Adashib ketmaslik (Navigatsiya)
Ketchupning teskari plastik idishi (siqish qulay!)
Restoran metaforasi

Frontend, Backend va API

Veb-sayt xuddi restoranga o'xshaydi. Keling, tushunib olamiz:

  • Frontend (Zal): Restoranning mijozlar o'tiradigan zali. Chiroyli stollar, musiqa, yorug'lik. Siz brauzerda (Chrome, Safari) ko'radigan hamma narsa Frontend.
  • Backend (Oshxona): Restoranning orqa qismi. U yerda oshpazlar (Server) va mahsulotlar ombori (Baza) bor. Siz uni ko'rmaysiz, lekin u yerda ovqat (ma'lumot) tayyorlanadi.
  • API (Ofitsiant): API — bu ofitsiant! U sizdan buyurtmani (Click tugmasi) oladi, oshxonaga (Backend) yugurib boradi va tayyor ovqatni (Natijani) sizga olib keladi!
Real sayt anatomiyasi

Atamalar (1-qism)

1. Navbar
2. Hero Section
3. Flexbox (Qator)
  • 1. Navbar: Tepadagi menyu (Logotip, havolalar).
  • 2. Hero Section: Saytga kirganda birinchi ko'rinadigan katta ekran.
  • 3. Flexbox: Elementlarni 1D bitta uzun qator qilib joylash.
Komponentlar

Atamalar (2-qism)

4. CTA Button
5. Grid (Jadval)
6. Footer
  • 4. CTA (Call to Action): Asosiy harakatga chorlovchi tugma.
  • 5. Grid: Elementlarni 2D jadval (masalan, linklar qatori) qilib terish.
  • 6. Footer: Saytning eng pastki qismi.
Bo'shliq va Effektlar

Padding, Margin va Hover

8. Padding va 9. Margin

9. Margin (Tashqi) 8. Padding (Ichki) Content

10. Hover State

Sichqoncha oborilganda elementning o'zgarishi (rangi yoki kattaligi).

Normal Hover State 👆
Vibecoder vs Odam

10 ta atama bilan qanday prompt yoziladi?

Yomon Prompt

"Saytning tepadagi qismini chiroyli qil, yozuvlar yopishib qolibdi. Orqasiga soya qosh."

AI chalkashadi.

Vibecoder Prompti

"Navbar'ni 'sticky' qil. Hero section'da CTA tugmasiga Hover effect qo'sh. Kartalarni Grid qilib, Shadow ber, va Padding'ni ko'paytir."

100% aniq ishlaydi.
Amaliyot

Uy vazifasi: Sayt anatomiyasi

Mashhur saytlardan birini tanlang (Apple, Amazon, Telegram) va uning tuzilishini tahlil qiling:

  • Bosh sahifaning to'liq skrinshotini oling.
  • Ustiga bugungi 10 ta atamadan kamida 7 tasini belgilab chiqing (Navbar, Hero, CTA, Card, Footer...).
  • Belgilangan rasmni o'quv guruhiga yuboring.
10 ballik mezon
Kamida 7 ta termin topilgani5
Belgilashlarning tushunarliligi3
Vaqtida topshirilgani2
Jami10
Target International SchoolTarget International School Kirish 0–2
1 / 14