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

Questions:
— file path nima va nima sababdan bilishimiz kerak?
— Siz turgan manzilni qaysi code orqali aniqlaydi?
— Siz turgan manildagi malumotlarni ko'rish va qo'shimcha hususiyatlari haqida malumot bering.
— kompyuterdagi yashirin file(papka)'larni chiqarish uchun qanday buyuruq beriladi?
— papka ichiga kirish uchun qanday buyuruq beriladi?
— papkadan tashqariga chiqish uchun qanday buyuruq beriladi?
— Terminal nima va qanday ishlatiladi?

Extra:
— Darsda tushuntirilmagan lekin ihtiyorib bo'lgan qo'shimcha o'rganish uchun vazifa.
— Yangi file yoki papkani terminal orqali qanday ochadi?
— Malumotni bir papkadan ikkinchi papkaga ko'chirish yoki copy qilish buyuruqlari qanday?
— file yasab uning ichiga malumot yozish qanday buyuruq orqali malaga oshiriladi?

Exercise:
— no exercise

Definition:
Terminal bilan ishlash. va kelgusi darslarimizda kerak bo'ladigan file path haqida umumiy tushunchalar. File path nafaqat html balki css, javascript va reatjs larda ham juda juda keng ko'lamda ishlatiladi. Shu sabab bu mavzuni yaxshi tushunishimiz kerak bo'ladi.


Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
1👍1🔥1👏1
5 - dars | Selectorlar Video | Homework

Questions:
— CSS'da selectorlar deb nimaga aytiladi?
— 5ta selectorlarni sanab bering.
— ID selectorining class selectoridan asosiy 2ta farqni ayting.
— barcha taglardagi text rangini o'zgartirish uchun qanday selectordan foydalanasiz?
— faqatgina div ichidagi h1'ni belgilash uchun nima qilamiz?
— important nima?
— bir vaqtni o'zida bir nechta taglarni qanday tanlab olsa bo'ladi?

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:
— no exercise.

Definition:
— CSS orqali HTML taglarini tanlab olish.

Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
1👍1🔥1👏1
6 - dars | Colors Video | Homework

Questions:
— CSS'da color nima?
— Colorlarni necha xil usulda bersa bo'ladi?
— RGB qanday rang ekanligini tushuntirib bering?
— RGBA qanday rang ekanligini tushuntirib bering
— HEX ni qanday rang ekanligini tushuntirib bering?
— backgroundning nechta sub elementlari mavjud?
— HSL ni qanday rang ekanligini tushuntirib bering?
— orqa fonga rang berishda background bn background-color ning farqi nimada o'zida bir nechta taglarni qanday tanlab olsa bo'ladi?

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:
— no exercise.

Definition:
— CSS'da ranglar qanday usullarda berilishi va ishlatilish o'rni haqida batafsil.

Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍21🔥1👏1
7 - dars | Background Video | Homework

Questions:
— CSS'da background tushunchasi nima?
— background-color nima vazifa bajaradi?
— background-image ning qanday qiymatlari bor va vazifalari nima?
— background-repeat qaysi holatlarda ishlaydi?
— background-position ishlamaydigan holatlari bor. Aniq qiymatlari bilan tushuntiring?
— background-attachment ni use caselari haqida malumot bering?
— background-size da cover bn containni farqini taqqoslab bering.
— background shortcut nima?

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:
— no exercise.

Definition:
— Aksar dasturchilar background tushunchasini shunchaki rang berish deb o'ylatdi. Lekin backgorund rang berishdan boshqa ko'plab hususiyatlarga ega. Video ko'rib o'zingiz hulosa ham qilgan bo'lsangiz kerak.
— Ayni vaqtda kattaroq ish qilish uchun biroz yana qo'shimcha malumotlarni o'rganishimiz kerak bo'ladi. Shu yergacha keldingizmi demak qolganlarini ham o'rgansangiz bo'ladi. DON'T GIVE UP

Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍31🔥1👏1
8 - dars | Border Video | Homework

Questions:
— CSS'da border tushunchasi nima?
— border o'zi shortcut, uning kengaytma shakilini tariflab bering.
— border-style ning eng kamida 5ta qiymatlarini sanab bering.
— border-radius ga 1, 2, 3 va 4talik qiymatlar bersa bo'ladi. Farqlarini tushuntirib 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 ))
— O'rganish un qo'shimcha kichik video.

Exercise:
— Quyidagi rasmda ko'rsatilgan shakillarni yasang.

Definition:
— Border murakkab mavzu emas, lekin bilishimiz kerak bo'lgan nozik nuqtalari bor, aksar studentlar shu qismiga etibor bermagan.

Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍31🔥1👏1
9 - dars | Margin Padding Video | Homework

Questions:
— CSS'da padding tushunchasi nima?
— CSS'da margin tushunchasi nima?
— padding bilan marginni asosiy farqi nimada?
— paddingni nechta sub elementni mavjdu?
— marginni nechta sub elementni mavjdu?

`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 ))
— O'rganish un qo'shimcha kichik video.

Exercise:
— Birinchi rasmda malumotlarni centerga olib kelish ixtiyoriy.
— Ikkinchi rasmda qizilda belgilangan rasmlarni ko'rinishini ham yasash ixtiyoriy. Chunki unga position mavzusini bilishimiz kerak bo'ladi. Qolgan barcha qisimlarini qilish shart.

Definition:
— Margin va Paddingni to'g'ri ishlatmaslik projectning responsive qismiga juda katta tasir qiladi. Ayni vaqtda malumotlarni orasidagi masofalar uchun margin va padding ishlatsa bo'ladi keyinchalik flexbox mavzusida bularni alternative holatlarini ko'rib chiqamiz.

Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
1👍1🔥1👏1
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
👍41🔥1👏1
11 - dars | navbar project Video | Homework

Questions:
— no question

Extra:
— no extra.

Exercise:
— 10-dars vazifasidagi qilgan ishingizni bu video bilan taqqoslang. Agar kamchiliklar bo'lsa ko'rsatilyan yo'l bilan to'g'irlab chiqing.

Definition:
— Vazifalar uchun optimal yo'l topish.

Contacts:
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
1👍1🔥1👏1
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
1👍1🔥1👏1
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
👍2🔥1👏1🫡1
14 - dars | Fonts Video | Homework

Questions:
— CSS'da fonts nima?
— web safe fonts nima?
— font propertylari haqida malumot bering.
— fallback fonts nima?
— default yoq bo’lgan fontlarni qanday qo’shamiz?
— smallc-caps qanday value?

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:
— Rasmdagi designni ko'ringanidek tayorlash kerak. Asosiy etibor navbardagi fontlar.

Definition:
— Fontlar ustida amallar bajarish.

Contacts:
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍21🔥1👏1🆒1
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