Oy maqsadi
O‘quvchida:
- ekran o‘lchamiga moslashish tushunchasi
- real web layout’larni yig‘ish ko‘nikmasi
- mobil foydalanuvchi haqida o‘ylash
- “saytim hamma qurilmada ishlaydi” ishonchi
ni shakllantirish.
6-OY TEST SAVOLLARI (30 ta)
1. Responsive design nima?
A) Tez sayt
B) Har xil ekranga moslashuvchi dizayn
C) Faqat mobil dizayn
D) Backend
Javob: B
2. Nega responsive dizayn muhim?
A) O‘yin uchun
B) Mobil foydalanuvchilar ko‘p
C) Kod qisqa bo‘ladi
D) Server tezlashadi
Javob: B
3. Media query nima?
A) CSS class
B) CSS shartli qoida
C) HTML teg
D) JavaScript funksiyasi
Javob: B
4. Media query qaysi tilga tegishli?
A) HTML
B) CSS
C) JS
D) Python
Javob: B
5. Ekran kengligi qaysi birlik bilan o‘lchanadi?
A) kg
B) px
C) sec
D) %
Javob: B
6. Mobil dizayn qaysi kenglikdan boshlanadi?
A) 1200px
B) 1024px
C) 768px
D) 480px
Javob: D
7. @media nimani bildiradi?
A) Rang
B) Shart
C) Shriftsiz
D) Rasm
Javob: B
8. Mobile-first nimani anglatadi?
A) Avval desktop
B) Avval mobil dizayn
C) Faqat telefon
D) Backend
Javob: B
9. Desktop-first nimani anglatadi?
A) Avval telefon
B) Avval kompyuter
C) Faqat mobil
D) Server
Javob: B
10. Flexbox nima?
A) Rang tizimi
B) Layout tizimi
C) Shriftsiz
D) Server
Javob: B
11. Flexbox qaysi muammoni hal qiladi?
A) Rang tanlash
B) Element joylashuvi
C) Parol
D) Backend
Javob: B
12. display: flex; nima qiladi?
A) Elementni yashiradi
B) Flex konteyner qiladi
C) Rang beradi
D) Shriftsiz
Javob: B
13. Flex yo‘nalishi qayerda belgilanadi?
A) align-items
B) justify-content
C) flex-direction
D) flex-wrap
Javob: C
14. Elementlarni yonma-yon joylash?
A) column
B) row
C) center
D) block
Javob: B
15. Elementlarni markazga tekislash?
A) float
B) text-align
C) justify-content
D) position
Javob: C
16. align-items nima qiladi?
A) Gorizontal
B) Vertikal
C) Rang
D) Shriftsiz
Javob: B
17. Flex-wrap nima uchun?
A) Rang
B) Qatorga sig‘dirish
C) O‘chirish
D) Shriftsiz
Javob: B
18. Grid nimani bildiradi?
A) Jadval
B) CSS layout tizimi
C) Rasm
D) Server
Javob: B
19. Grid qachon ishlatiladi?
A) Bir o‘lchamda
B) Murakkab layoutlarda
C) Faqat mobil
D) Backend
Javob: B
20. display: grid; nima qiladi?
A) Yashiradi
B) Grid konteyner
C) Rang beradi
D) Shriftsiz
Javob: B
21. Real layout nimani anglatadi?
A) O‘yin
B) Real sayt struktura
C) Rasm
D) Server
Javob: B
22. Header qayerda bo‘ladi?
A) Pastda
B) O‘rtada
C) Tepada
D) Yon tomonda
Javob: C
23. Footer qayerda bo‘ladi?
A) Yuqorida
B) O‘rtada
C) Pastda
D) Yon tomonda
Javob: C
24. Layout bo‘limlari?
A) Header, main, footer
B) Div, span
C) Img, a
D) Script
Javob: A
25. Responsive sayt natijasi?
A) Faqat desktop
B) Har qurilmada qulay
C) Backend tez
D) AI
Javob: B
26. Responsive dizayn kim uchun muhim?
A) Faqat dizayner
B) Foydalanuvchi
C) Server
D) Printer
Javob: B
27. CSS layout frontendning qaysi qismi?
A) Mantiq
B) Ko‘rinish
C) Ma’lumot
D) Server
Javob: B
28. Responsive dizaynni bilgan o‘quvchi?
A) O‘yinchi
B) Junior frontend
C) Backend
D) AI
Javob: B
29. Real layoutlar nimaga o‘rgatadi?
A) Tez yozish
B) Sayt tuzish
C) Server
D) O‘yin
Javob: B
30. 6-oy natijasi?
A) Faqat rang
B) Responsive sahifa
C) Backend
D) AI
Javob: B
6-OY LOYIHA — “Responsive Landing Page”
Loyiha tavsifi
O‘quvchi 3 ta ekran o‘lchamiga moslashuvchi landing page yaratadi.
Sahifa tarkibi
- Header (logo + menu)
- Hero section
- Content bo‘limi
- Footer
Responsive talablari
- Mobile (≤480px)
- Tablet (≤768px)
- Desktop (≥1024px)
Texnik talablari
- Flexbox yoki Grid ishlatilgan
- Media query mavjud
- Elementlar joylashuvi buzilmasligi
Baholash mezoni (100 ball)
- Responsive ishlashi: 40 ball
- Layout to‘g‘riligi: 30 ball
- CSS tozaligi: 20 ball
- Umumiy ko‘rinish: 10 ball
6-OY YAKUNI
O‘quvchi:
- Responsive dizaynni tushunadi
- Real layout yig‘a oladi
- Mobil foydalanuvchini hisobga oladi
- Keyingi bosqich — JavaScriptga tayyor bo‘ladi 🔥🚀