CSS Homework | Webbrain
132 subscribers
40 photos
1 video
53 links
Webbrain Academy tamonidan tayorlangan CSS Expert video darsligi uchun uy vazifalari.
Download Telegram
15 - dars | Project Video | Homework

Projectga aloqador vazifa yo'q.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ’―2πŸ‘1πŸ”₯1πŸ‘1πŸ†’1
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
πŸ‘2πŸ”₯1πŸ‘1🫑1πŸ†’1
17 - dars | Flexbox Project Video | Homework

Questions:
β€” flexbox ishlatishda etibor berish kerak bo'lgan eng muhim jihati nima?
β€” child va parent tushunchasi nimaga kerak?
β€” projectlarda flexbox ishlatish qanchalik muhim? Yokida flexbox ishlatmasdan ham project qilsa boladimi?

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” Mobile versiyasini ham moslab chiqish.

Exercise:
β€” Figmada tayorlangan designni yasash.

Definition:
β€” 16-darsda berilgan vazifalarni amaliy ko'rsatmasi.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
🫑1πŸ†’1
18 - dars | Icons Video | Homework

Questions:
β€” Icons nima va qayerda ishlatiladi?
β€” fontawesome ning asosiy sytaxi qanaqa?
β€” fontawesome uchun link qayerdan qanday olinadi?
β€” fontawesome icons list
β€” Iconlarni qanday qilib Coloring and Resizing qilsa boladi?
β€” Iconlarni rotate va flip hususiyatlari haqida malumot bering.
β€” border qoyish yoki olish uchun nima qilamiz?
β€” fa-stack / overlay the icons haqida malumt bering.
β€” glyphicon nima va fontawesomedan nima farqi bor?
β€” ikkita iconni ustma ust joylashtirish uchun nima qilamiz?

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” Rasmda ekran kichik bo'lganda sidebarni textlari yo'qolib faqat icon qolgan holatini ko'rish mumkin va sichqoncha icon ustiga borganda rangi o'zgaradi shu holatni yasang.

Exercise:
β€” Rasmdagi design dasturchilar orasida sidebar deyiladi. Shu sidebarni ko'ringanidek yasang.

Definition:
β€” Iconlar bilan ishlash.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
⚑1πŸ‘1πŸ‘1🫑1πŸ†’1
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
πŸ‘2πŸ”₯1πŸ‘1🫑1πŸ†’1
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
πŸ‘2🫑2πŸ”₯1πŸ‘1πŸ†’1
21 - dars | Table Video | Homework

Questions:
β€” css'da display'ning qanday qiymatlari bor?
β€” inline nima?
β€” block nima?
β€” inline-block nima?
β€” inline-block bn inline ni bir birdan farqi nimada?

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” vazifani 22-darsni ko'rib bo'lganingizdan keyin qiling.

Definition:
β€” Display haqida umumiy tushuncha.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ‘2πŸ†’2πŸ”₯1πŸ‘1🫑1
22 - dars | Display Video | Homework

Questions:
β€” css'da display'ning qanday qiymatlari bor?
β€” inline nima?
β€” float qachon ishlatiladi?
β€” flexbox vs float ning farqlari haqida malumot bering.
β€” float'ning qiymatlari haqida malumot bering.

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” Rasmdagi designni display va float orqali yasang. Navbarini ham rasmini joylashishini ham.

Definition:
β€” float haqida umumiy tushuncha.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ‘1πŸ”₯1πŸ‘1🫑1πŸ†’1
23 - dars | overflow Video | Homework

Questions:
β€” overflow nima?
β€” divdan tashqariga chiqib ketgan malumotlarni qanday qilib yaxshirib qo'ysa boladi?
β€” overflow-x nima?
β€” overflow-y nima.
β€” overflow ning barcha valulari haqida malumot bering.

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” 20-darsda berilgan tabellarni agar y o'qi bo'ylab scroll qilsa yuqoridan birinchi qatori, agar x o'qi bo'ylab scroll qilsa chapdan birinchi malumot fixed bolib qolsin.

Definition:
β€” overflow haqida umumiy tushuncha.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ‘1πŸ”₯1πŸ‘1🫑1πŸ†’1
24 - dars | figma Video | Homework

Questions:
β€” dasturchilar uchun figma qanchalik muhim?

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” 20-darsda berilgan tabellarni agar y o'qi bo'ylab scroll qilsa yuqoridan birinchi qatori, agar x o'qi bo'ylab scroll qilsa chapdan birinchi malumot fixed bolib qolsin.

Definition:
β€” Figma haqida umumiy tushuncha va projectni to'g'ri yo'lda boshlash bo'yicha master class.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ‘1πŸ”₯1πŸ‘1🫑1πŸ†’1
25 - dars | Table Project Video | Homework

Questions:
β€” no question.

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” Bu master class, 20-darsda tayorlagan vazifangizni qaytadan ko'rib optimal yo'l bilan ishlab chiqing.

Definition:
β€” Uyga vazifani birgalikda tayorlash.
β€” Table structurasini tuzish
β€” div qachon ishlatish bo'yicha.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ‘1πŸ”₯1πŸ‘1🫑1πŸ†’1
26 - dars | Position Video | Homework

Questions:
β€” css'da position nima?
β€” static nima vazifa bajaradi?
β€” relative nima vazifa bajaradi?
β€” fixed nima vazifa bajaradi?
β€” absolute nima vazifa bajaradi?
β€” sticky nima vazifa bajaradi?
β€” navbar scroll qilganda yuqoriga fixed qilib qo'yish qaysi hususiyat orqali amalga oshiriladi?
β€” malumotni joylashish o'rnidan qatiy nazar birinchisini ikkinchi malumot ortiga o'tkazib qo'yish uchun nima qilamiz?
β€” z-index haqida malumot bering.

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” 20-darsdagi tablelarni scroll fix qiling.
β€” https://wbba.netlify.app/table websitedagi to'rtinchi tableni yasang. Tableni to'liq hususiyatlarini ko'rish uchun uni x va y o'qi bo'ylab katta kichik qilib ko'ring.

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
πŸ‘1πŸ”₯1πŸ‘1🫑1πŸ†’1
27 - dars | Input with icon Video | Homework

Questions:
β€” input ichiga qanday qilib icon joylasa bo'ladi?
β€” buttonga qanday qilib icon joylasa boladi?

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” Rasmda ko'ringanidek input yasang.
β€” Rasmdag ko'ringanidek button yasang.

Definition:
Real projectda eng ko'p uchraydigan holatlarga amaliy ko'rsatmarlar.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ‘4πŸ”₯1πŸ‘1🫑1πŸ†’1
28 - dars | Combinators Video | Homework

Questions:
β€” css da bir nechta malumotlarni belgilab olishni qanday yo'llarini bilasiz?
β€” malum bir tag ichidagi malumotlarni tanlab olish uchun qanday combinatordan foydalanamiz?
β€” o'zidan keyin keladigan birinchi malumotni tanlab olish uchun qaysi combinatordan foydalanamiz?
β€” ~ nima vazifa bajaradi?

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” no exercise

Definition:
Combinators mavzusni yaxshi tushunib ishlatsangiz aksar kishilar js va reactda qiladigan ishlarni osonlik bn css ni o'zi bilan amalga oshirsangiz boladi.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coderβ€”
πŸ‘2πŸ”₯1πŸ‘1🫑1πŸ†’1
29 - dars | Sticky Table Project Video | Homework

Questions:
β€” no question

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” no extra.

Exercise:
β€” no exercise

Definition:
Yuqorida muhimligi takidlangan uy vazifasi uchun master class.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coderβ€”
πŸ‘1πŸ”₯1πŸ‘1🫑1πŸ†’1
30 - dars | Pseudo Classes Video | Homework

Questions:
β€” link nima vazifa bajaradi?
β€” visited nima vazifa bajaradi?
β€” hover nima vazifa bajaradi?
β€” active nima vazifa bajaradi?
β€” hover nima vazifa bajaradi?
β€” active hover bilan ishlash tartibini tushintirib bering.
β€” checked nima vazifa bajaradi?
β€” disabled nima vazifa bajaradi?
β€” enabled nima vazifa bajaradi?
β€” focus nima vazifa bajaradi?
β€” in-range nima vazifa bajaradi?
β€” invalid nima vazifa bajaradi?ut
β€” valid nima vazifa bajaradi?
β€” equired nima vazifa bajaradi?
β€” optional nima vazifa bajaradi?
β€” empty nima vazifa bajaradi?
β€” irst-child nima vazifa bajaradi?
β€” irst-of-type nima vazifa bajaradi?
β€” ast-child nima vazifa bajaradi?
β€” ast-child-of nima vazifa bajaradi?
β€” not(elm) nima vazifa bajaradi?
β€” nth-child nima vazifa bajaradi?
β€” nth-child-last nima vazifa bajaradi?
β€” root nima vazifa bajaradi?
β€” target nima vazifa bajaradi?
β€” nth-child nima vazifa bajaradi?

Extra: β€” qo'shimcha topshiriq. Majburiy emas!
β€” Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.

Exercise:
β€” Ikkinchi rasmda ko'rsatilgan. designni faqat pseudo classlari orqali qiling
- birinchi rasmdagi designni ham ko'ringanidek qilish kerak, pseudo class ishlatish ixtiyoriy

Definition:
CSS orqali html taglarini tanlab olishning yana bir advanced ko'rinishi

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
πŸ‘5πŸ”₯1πŸ‘1🫑1πŸ†’1