Veb-Ustaxona: CSS Flexbox va GridВеб-Мастерская: Flexbox и GridWeb Workshop: Flexbox & Grid

O'yin portali vitrinasini yaratish uchun 1D Flexbox va 2D CSS Grid texnologiyalarini o'rganing.Изучите 1D Flexbox и 2D Grid для создания современной витрины игр.Master 1D Flexbox and 2D CSS Grid to construct an esports gaming catalog.

Ism, familiyaИмя, фамилияName SinfКлассClass SanaДатаDate

Darsning bitta jumlasiОдна фраза этого урокаThe one sentence of this lesson

Flexbox bitta qatorni boshqaradi, CSS Grid esa butun sahifa matritsasini bir zumda tartibga soladi.Flexbox управляет одной линией, а CSS Grid мгновенно строит двумерную матрицу.Flexbox controls single-axis flow, while CSS Grid effortlessly orchestrates 2D layout matrices.

Flexbox va Grid FarqiРазница Flexbox и GridFlexbox vs Grid

CSS Flexbox (1 O'lchamli)CSS Flexbox (1D)CSS Flexbox (1D)

Faqat 1 ta qator yoki 1 ta ustun: menyu (Navbar), tugmalar qatori, piktogrammalar.Один ряд или колонка: шапка сайта, ряд иконок, центрирование.Single axis (row OR column): navbars, button rows, linear icon chips.

CSS Grid (2 O'lchamli)CSS Grid (2D)CSS Grid (2D)

Ham qator, ham ustunlarni bir vaqtda boshqaradi: o'yinlar vitrinasi, foto galereyalar.Управляет и рядами, и колонками: витрина карточек игр, фотогалереи.Simultaneous row and column control: card catalogs, dashboard matrices.

Flexbox Asosiy QoidalariСвойства FlexboxFlexbox Rules

justify-content ↔️justify-content ↔️justify-content ↔️ Gorizontal tekislash: center yoki space-between.По горизонтали: по центру или по краям.Horizontal alignment across main axis.

align-items ↕️align-items ↕️align-items ↕️ Vertikal tekislash: center balandlik bo'yicha markazlashtiradi.По вертикали: строго по центру высоты.Vertical centering along cross axis.

gap 📐gap 📐gap 📐 Elementlar orasidagi masofa: gap: 16px;.Чистый отступ между блоками без margin.Clean gutters between elements.

Avtomatik Moslashuvchan Grid KODIФормула CSS GridAuto-Fit Grid Code

display: grid;Grid rejimini yoqish

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));Avto-moslashuv

gap: 20px;Oradagi masofa

Xavfli Xatolardan HimoyaЗащита от ОшибокLayout Defense

* { box-sizing: border-box; } Padding blok hajmini shishirib yubormasligi uchun majburiy qoida.Обязательное свойство, чтобы padding не ломал ширину.Essential CSS reset preventing padding from expanding box widths.

max-width: 100%; Rasm va konteynerlar telefonda gorizontal skroll chiqarmasligi shart.Предотвращает появление горизонтальной полосы прокрутки.Prevents unwanted horizontal scrollbar overflow on mobile screens.

Vibecoding · 7-darsурок 7lesson 7 O'qituvchiУчительTeacher: Ismoiljon Usmonov 1

O'yin Kartasi HTML StrukturasiHTML КарточкиGame Card HTML Blueprint

      <div class="game-card">

        <img src="cover.jpg" alt="Game Banner" class="card-img">

        <h3>O'yin Nomi: ___________________________</h3>

        <p>Tavsif: ___________________________________</p>

        <button class="btn-play">Play Now ▶</button>

      </div>

Mening Neon :hover CSS QoidamCSS Эффект HoverNeon :hover CSS Rule

      .game-card:hover {

        transform: translateY(-5px);

        box-shadow: 0 0 15px #00E5FF;

        border-color: #00E5FF;

      }

3 Ta O'yin Ro'yxati (Vitrina)Список 3 Игр3-Game Showcase Inventory

#	O'yin Nomi	Janr Teglari	Tugma Rangi
1	Aero-Runner 2150	Cyberpunk / 3D Parkour	Neon Moviy (#00E5FF)
2	_______________________	_______________________	_______________________
3	_______________________	_______________________	_______________________

DevTools (F12) Nazorat SinoviПроверка в DevToolsDevTools Responsive Audit

Ekranni toraytirganda pastki gorizontal skroll paydo bo'lmadi. Kartalar mobil hajmda avtomatik ravishda 1 ustunga tizildi. Sichqoncha borganda neon hover animatsiyasi silliq ishladi.

Uy vazifasi · keyingi darsgaДомашнее задание · к следующему урокуHomework · for next lesson

1. Veb Sahifa KODI: Flexbox Navbar va 3 ta o'yin kartali CSS Grid vitrinasini to'liq kodlang.

2. Neon :hover: Kartalarga sichqoncha borganda ko'tarilish va nur sochish effektini bering.

3. Varaqani To'ldirish: HTML va CSS qoidalarini varaqadagi barcha jadvallarga yozib keling.

Baholash · 10 ballОценка · 10 балловGrading · 10 points

Flexbox Navbar xatosiz tekislangan3

CSS Grid mobil ekranga moslashadi4

Neon :hover effekti va kartalar stili tayyor3

Keyingi dars: Interaktivlik Sehri: JS Hodisalar va TugmalarСледующий урок: Магия Интерактивности: JS События и КнопкиNext lesson: Interactive Magic: JS Events & Buttons Noutbukni har darsga olib kelingНоутбук на каждый урокBring your laptop every lesson 2