Vibecoding · 7-dars · 7-8 sinflar

Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 2Неделя: 2Week: 2

Veb-Ustaxona: CSS Flexbox va Grid Bilan Maket Tuzish

Qanday qilib zamonaviy saytlar o'yin kartalari va menyularni chiroyli qatorga tizadi? O'yin portali yaratish uchun 1 o'lchamli Flexbox va 2 o'lchamli Grid texnologiyasini o'rganamiz.

Maket Anatomiyasi

Qachon Qaysi Biri Kerak? Flexbox vs Grid

Zamonaviy veb dasturlashda elementlarni joylashtirish 2 ta qurolga tayanadi:

CSS Flexbox (1 O'lchamli) 📏

Faqat 1 ta qator YOKI 1 ta ustun uchun mo'ljallangan: menyular paneli (Navbar), tugmani markazlashtirish yoki piktogrammalar qatori.

CSS Grid (2 O'lchamli) 🔲

Bir vaqtning o'zida ham qatorlar, ham ustunlarni boshqaradi! O'yin kartalari vitrinasi (3x3), foto galereyalar va murakkab panellar uchun ideal.

Flexbox Buyruqlari

Elementlarni Boshqaruvchi 3 Asosiy Flexbox Qoidasi

Konteynerga display: flex; yozishingiz bilan quyidagi xususiyatlar ishga tushadi:

1. justify-content ↔️

Gorizontal tekislash: center (o'rtaga) yoki space-between (chetlarga tarqatish).

2. align-items ↕️

Vertikal tekislash: center yozuv va piktogrammalarni balandlik bo'yicha simmetrik qiladi.

3. gap (Masofa) 📐

Kartalar orasidagi toza masofa: gap: 16px; eski margin xatolarini yo'q qiladi.

CSS Grid Sehri

CSS Grid: 1 Qator Kod Bilan Avtomatik Vitrina

Eni foizlarini hisoblashni unuting. Grid bitta qator bilan kartalarni ekranga moslaydi:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;

Bu qoida monitorda 3-4 ta kartani yonma-yon qo'yadi, telefonda esa avtomatik 1 qatorga aylantiradi!

O'yin Kartasi KODI

Neon Effektli O'yin Kartasi Arxitekturasi

<div class="game-card">
  <img src="banner.jpg" alt="Cover">
  <h3>Aero-Runner 2150</h3>
  <div class="tags"><span>Cyberpunk</span> <span>3D</span></div>
  <button class="play-btn">O'ynash ▶</button>
</div>

CSS da :hover orqali karta yuqoriga ko'tarilib, neon moviy nur sochadi!

CSS Xatolari

Boshlovchilar Ko'p Qiladigan 3 Ta CSS Xatosi

Agar sahifangiz buzilib ketsa, darhol quyidagi 3 qoidani tekshiring:

1. box-sizing: border-box 📦

Ushbu qoidasiz padding kartani shishirib yuboradi va ekran sig'may qoladi.

2. Qotirilgan En (Fixed Width) 🔒

width: 1200px; yozsangiz telefonda gorizontal skroll paydo bo'ladi. Moslashuvchan qiling!

3. Cho'zilgan Rasmlar 🖼️

Rasmlar xunuk cho'zilib ketmasligi uchun object-fit: cover; yozish shart.

Amaliy Vazifa

Bugungi Vazifa: 3 Ta O'yin Kartali Veb Portalini Yig'ing

Bugun har bir o'quvchi Flexbox menyu va Grid vitrinaga ega shaxsiy o'yin portalini yaratadi:

1. Flexbox Menyu: Chapda logotip, o'ngda tugmalar (justify-content: space-between).
2. CSS Grid Vitrina: 3 ta o'yin kartasi to'plami, gap: 20px oraliq masofa bilan.
3. Neon Hover Effekti: Sichqoncha borganda karta yuqoriga ko'tariladi va neon nuri porlaydi.
4. O'ynash Tugmasi: Yorqin neon hoshiyali yoki gradientli harakat tugmasi.

Jonli Amaliyot · Taymer

Kod Ustaxona: 11 Daqiqalik Jonli Veb Maket

11:00

Kodingizni oching. Flexbox menyu va Grid kartalarini yozing, neon effektlarini qo'shing!

Maket Tahlili

Brauzerda Ekranni Qisib Ko'rish (F12 Testi)

F12 tugmasini bosing va ekranni telefon hajmiga keltirib, quyidagi 3 holatni tekshiring:

1. Skroll Paydo Bo'lmadimi?

Pastda keraksiz o'ngga-chapga suriluvchi skroll yo'qmi? Hamma narsa sig'ishi kerak.

2. Grid Qatorga Tushdimi?

3 ta karta telefonda avtomatik ravishda chiroyli 1 qatorga aylandi-mi?

3. Hover va Tugma

Sichqoncha borganda karta yaltirab, tugma bosilishga tayyormi?

Uyga Vazifa

Uyga Vazifa: 3 Ta O'yinli Veb Portal Maketi

Bajarilishi shart bo'lgan vazifalar:

Flexbox menyu va 3 ta o'yin kartali CSS Grid vitrinasini to'liq kodlang.
Har bir karta uchun sichqoncha borganda ishlovchi neon :hover effektini qo'shing.
Varaqadagi HTML tuzilma va CSS qoidalarini daftaringizga qayd eting.

Baholash Mezoni (10 ball):

3 ball: Flexbox menyu toza va xatosiz tekislangan.
4 ball: CSS Grid vitrinasi telefonda qulay 1 qatorga aylanadi.
3 ball: Neon hover va tugma dizayni to'liq sozlangan.