10 - dars | Width Height Video | Homework

Questions:
— CSS'da width tushunchasi nima?
— CSS'da height tushunchasi nima?
— width bn heightni image'dagi o'rni haqida malumot bering.
— max/min-width nima?
— max/min-height qachon ishlaydi? ishlatilishi jihatidan widthdan farqi haqida malumot bering.

Extra: — qo'shimcha topshiriq. Majburiy emas!
— Mana shu mavzu uchun video darslik tayorlash. Bu orqali interview savollariga ham yaxshigina tayorlanib olasiz. Usotzni kayfiyatiga qarab majburiy ham bo'lishi mumkin ))
— Ikkinchi rasm ihtiyoriy.

Exercise:
— Quyida rasmda ko'rsatilgan 3ta designi qilish kerak bo'ladi. Padding, Margin ishlatilmasin.
— Aslida optimal varianti margin bn padding ishlatilgan holati lekin width height o'rganganimiz uchun shu usulda qilish kerak. Ikkinchi usul sifatida optimal yo'lini ham qilib ko'rsangiz bo'ladi.

Definition:
— malumotlarni eni va uzunligi bo'yicha malumot.

Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder

12 - dars | outline Video | Homework

Questions:
— CSS'da outline nima?
— Outline'ni propertylari haqida malumot bering.
— offset nima vazifa bajaradi?


Extra: — qo'shimcha topshiriq. Majburiy emas!
— Mana shu mavzu uchun video darslik tayorlash. Bu orqali interview savollariga ham yaxshigina tayorlanib olasiz. Usotzni kayfiyatiga qarab majburiy ham bo'lishi mumkin ))
— Birinchi design, ixtiyoriy va majburiy

Exercise:
— Etibor beradigan jihati aynan outline. Ikkinchi Formdagi birinchi input ustiga bosganda pastgi outline rangi o'zgaradi.

Definition:
— Inputlarda va buttonlarda uchraydigan hususiyatlardan bir.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder

13 - dars | Text Video | Homework

Questions:
— CSS'da text nima?
— text-align: justify nima ish bajaradi?
— textni rtl qilish un qaysi css property’isi kerak bo’ladi?
— text-decoration’ni line valuelarini aytib bering
— white-space nima va qanday qiymatlari bor?
— shadow valuelari haqida aytib bering

Extra: — qo'shimcha topshiriq. Majburiy emas!
— Mana shu mavzu uchun video darslik tayorlash. Bu orqali interview savollariga ham yaxshigina tayorlanib olasiz. Usotzni kayfiyatiga qarab majburiy ham bo'lishi mumkin ))

Exercise:
— 10- darsdagi Navbarni padding ishlatmasdan yasash.
— Birinchi rasmdagi designni barcha qismi bir xil bo'lishi kerak.
— Ikkinichi rasmda textlarni boshlanishi va tugashi bitta linyada yotadigan bo'lishi kerak.
— Uchinchi ramsda padding margin ishlatmasdan kataklardagi yozuvlarni ko'ringanidek joylashtirish kerak.

Definition:
— Textlar ustida amallar bajarish.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder

16 - dars | Flexbox Video | Homework

Questions:
— CSS'da flexbox nima?
— child va parent tushunchasi nimaga kerak?
— flex'ning kengaytmasi nimalardan tashkil topgan.
— flex-directionda column va row ni text align ga qanday tasiri bor?
— justify content qiymatlari haqida malumot berin?
— child elementlar orasida bosh masofa ajratish uchun nima qilamiz?
— x va y o'qi bo'lyab malumotni centerga olib kelish uchun nima qilamiz?
— Sig'magan malumotlarni keyingi qatorga o'tkazish uchun nima qilamiz?
— space-around bn evenly'ni asosiy farqi nimada?

Extra: — qo'shimcha topshiriq. Majburiy emas!
— Mana shu mavzu uchun video darslik tayorlash. Bu orqali interview savollariga ham yaxshigina tayorlanib olasiz. Usotzni kayfiyatiga qarab majburiy ham bo'lishi mumkin ))
— Figmada tayorlangan designni yasash.
— Mobile versiyasini ham moslab chiqish.

Exercise:
— Rasmdagi designni ko'ringanidek tayorlash kerak. Asosiy etibor malumotlarni joylashtirish.
— Vazifalarni o'tilgan mavzularga asoslangan holda tayorlang. O'tilmagan mavzular ishlatilmasin.

Definition:
— CSS'ni bilaman deyishingiz uchun flexbox, grid, position va animation mavuzlarini chuqur bilishingiz kerak. Shulardan biri bu darsda flexbox tushuntirilgan. Flexbox 2 keyingi darslarimizda tushutiriladi.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder

19 - dars | List Video | Homework

Questions:
— List nima?
— Listlarning necha hil turi bor?
— barcha listdagi type valuelarini sanab bering.
— list type'larini qanday o'zgartiriladi?
— list typelarini o'zgartirishni necha hil usuli bor?
— listlarda position nima?
— ordered ichida unordered list yozsa boladimi?
— listlarin belgilarini qanday qilib yo'q qilib qo'ysa boladi?

Extra: — qo'shimcha topshiriq. Majburiy emas!
— Ikkinchi rasmda listdan foydalangan holda belgilarni o'ziga design berish orqali chiqariladi. List belgisini ochirib boshqa malumot olib kelmanang.

Exercise:
— Birinchi rasmda ko'ringanidek deisgn qiling.

Definition:
— Listlar bilan ishlash.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder

20 - dars | Table Video | Homework

Questions:
— table nima?
— table borderi haqida malumot bering?
— table borderini bittalik designga qanday qilib olib kelinadi?
— tablega aloqador taglar haqida malumot bering?
— table'da guruhlarga ajratish haqida malumot bering.(html'da o'tilgan)?
— css da table ga to'liq border berish uchun nimalar qilamiz?
— table ichida nested tableni qanday yoziladi?
— tableda faqat id ni fixed qilib qotirib qo'yishimiz uchun qanday hususiyatlardan foydalanamiz?

Extra: — qo'shimcha topshiriq. Majburiy emas!
— tableni header qismini scroll qilganda fixed qilib qoyish kerak.

Exercise:
— Har ikkala rasmdagi designni imkon qadar bir xil korinishda yasash kerak bo'ladi.

Definition:
— Table mavzusi aksar ishga kirishda beriladigan topshiriqlar ichida uchrab turadi. Shu sabab table mavzusini tugatmasdan keyingi topshiriqlarga otmasligingizni tafsiya qilaman.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder