# HTML va CSS — yakuniy test

> HTML semantikasi, forma, accessibility, CSS cascade, layout va responsive dizaynni birlashtiradigan 12 ta amaliy yakuniy savol.

Manba: https://learncode.uz/html-css/yakuniy-quiz/
Sana: 2026-05-24

## 1. Dizayner barcha bo'limlarni div bilan bergan. To'g'ri yo'l?

- Hammasini articlega almashtirish
- **Mazmuniy roli bor joyda semantik teg, layout uchun div qoldirish** (to'g'ri)
- Div taqiqlangan
- Faqat class nomini almashtirish

Semantika mazmuniy roli bor qismlar uchun ishlatiladi.

Takrorlash: https://learncode.uz/html-css/semantik-teglar/

## 2. Butun karta boshqa sahifaga olib borsa, qaysi element?

- button
- **a href** (to'g'ri)
- div onclick
- span

Navigatsiya uchun haqiqiy hrefli havola ishlatiladi.

Takrorlash: https://learncode.uz/html-css/semantik-teglar/

## 3. Formada placeholder bor, label yo'q. Nima tuzatiladi?

- Faqat placeholder rangini
- **Ko'rinadigan label va for/id bog'lanishini** (to'g'ri)
- Inputni divga almashtirish
- Hech narsa

Placeholder label o'rnini bosmaydi.

Takrorlash: https://learncode.uz/html-css/forma-asoslari/

## 4. Xato maydon faqat qizil border bilan berilgan. Yaxshi yechim?

- Borderni qalinlashtirish
- **Bog'langan xato matni, fokus va rangdan tashqari signal** (to'g'ri)
- Inputni yashirish
- Faqat alert

Xato ham ko'rinadigan, ham dasturiy bog'langan bo'lishi kerak.

Takrorlash: https://learncode.uz/html-css/forma-elementlari/

## 5. Logo, menyu va tugmali header uchun ko'pincha nima qulay?

- **Flexbox** (to'g'ri)
- Faqat table
- Float
- Absolute hamma joyda

Bitta asosiy qator uchun Flexbox odatda sodda tanlov.

Takrorlash: https://learncode.uz/html-css/flexbox/

## 6. Kartalar soni noma'lum, qatorga o'zi tushishi kerak. Qaysi yechim?

- fixed 3 column
- **`repeat(auto-fit, minmax(220px,1fr))`** (to'g'ri)
- position absolute
- table

Auto-fit va minmax moslashuvchan grid yaratadi.

Takrorlash: https://learncode.uz/html-css/grid/

## 7. Mobil sahifada gorizontal scroll paydo bo'lsa avval nima qilinadi?

- Global overflow-x:hidden
- **Viewportdan chiqayotgan element va fixed/min widthlarni topish** (to'g'ri)
- Barcha matnni kichraytirish
- Rasmni o'chirish

Scroll sababini yashirish emas, topib tuzatish kerak.

Takrorlash: https://learncode.uz/html-css/responsiv-dizayn/

## 8. Sticky ishlamasa qaysi tekshiruv to'g'ri?

- Faqat z-index
- **top inset, overflow ajdodlari va scroll konteyner** (to'g'ri)
- Faqat font size
- Rasm alt

Sticky scroll konteyneri va overflow sharoitiga bog'liq.

Takrorlash: https://learncode.uz/html-css/pozitsiya/

## 9. `.tugma` rangi ishlamasa birinchi nima tekshiriladi?

- Katta z-index
- **Class mosligi, CSS ulanishi va Styles panelidagi cascade** (to'g'ri)
- HTMLni qayta yozish
- Barcha marginlarni nol qilish

Avval selector, fayl va ustun kelayotgan qoida tekshiriladi.

Takrorlash: https://learncode.uz/html-css/selektorlar/

## 10. 375pxda matn siqilsa faqat media query yetarlimi?

- Har doim
- **Yo'q, avval fixed widthlarni fluid qilish kerak** (to'g'ri)
- Faqat zoomni o'chirish
- Faqat h1ni yashirish

Moslashuvchan asos, so'ng kontent buzilgan joyda breakpoint.

Takrorlash: https://learncode.uz/html-css/responsiv-dizayn/

## 11. Sahifa sichqoncha bilan ishlasa tayyormi?

- Ha
- **Yo'q, Tab, fokus, klaviatura va screen reader ham tekshiriladi** (to'g'ri)
- Faqat mobil uchun
- Faqat dark mode bo'lsa

Accessibility funksional sifatning bir qismi.

Takrorlash: https://learncode.uz/html-css/semantik-teglar/

## 12. Yakuniy tekshiruv ro'yxatida qaysi biri bo'lishi kerak?

- Faqat Chrome skrinshoti
- **Semantika, havola, responsive, fokus, kontrast va console** (to'g'ri)
- Faqat title
- Faqat favicon

Sifat bir nechta foydalanuvchi va texnik holatni qamraydi.

Takrorlash: https://learncode.uz/html-css/css-amaliy-loyiha/