25 - dars | Table Project Video | Homework
— no question.
— no extra.
— Bu master class, 20-darsda tayorlagan vazifangizni qaytadan ko'rib optimal yo'l bilan ishlab chiqing.
— Uyga vazifani birgalikda tayorlash.
— Table structurasini tuzish
— div qachon ishlatish bo'yicha.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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
— 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.
— no extra.
— 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.
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.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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
— input ichiga qanday qilib icon joylasa bo'ladi?
— buttonga qanday qilib icon joylasa boladi?
— no extra.
— Rasmda ko'ringanidek input yasang.
— Rasmdag ko'ringanidek button yasang.
Real projectda eng ko'p uchraydigan holatlarga amaliy ko'rsatmarlar.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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
— 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?
—
— no extra.
— no exercise
Combinators mavzusni yaxshi tushunib ishlatsangiz aksar kishilar js va reactda qiladigan ishlarni osonlik bn css ni o'zi bilan amalga oshirsangiz boladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder—
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
— no question
— no extra.
— no exercise
Yuqorida muhimligi takidlangan uy vazifasi uchun master class.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder—
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
— 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?
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— Ikkinchi rasmda ko'rsatilgan. designni faqat pseudo classlari orqali qiling
- birinchi rasmdagi designni ham ko'ringanidek qilish kerak, pseudo class ishlatish ixtiyoriy
CSS orqali html taglarini tanlab olishning yana bir advanced ko'rinishi
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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
31 - dars | Pseudo Elements Video | Homework
— Pseudo class va elementning bir biridan farqi?
— birinchi qatorni belgilash uchun qaysi elementdan foydalanamiz?
— birinchi harfni belgilash uchun qaysi elementdan foydalanamiz?
— Belgilangan textni orqa fonini o'zgartirish uchun nima qilamiz?
— Tooltip yasash uchun qanday yo'llarni bilasiz?
— before va after nima?
— before va after da yozilishi majburiy bo'lgan attribute qaysi?
— inset nima? Inset uchun qo'shimcha video https://www.instagram.com/reel/Cx-k2-HIbTK/
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— Rasmda ko'rsatilgan navbar elementlarini ustiga sichqoncha borganida uning malumotlarini chiqarib beradi.
- Birinchi topshiriqni tooltip qismida chiqadigan malumotni ::before yoki ::after orqali content attr bilan qabul qilib oling.
CSS orqali html taglarini tanlab olishning yana bir advanced ko'rinishi
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:— Pseudo class va elementning bir biridan farqi?
— birinchi qatorni belgilash uchun qaysi elementdan foydalanamiz?
— birinchi harfni belgilash uchun qaysi elementdan foydalanamiz?
— Belgilangan textni orqa fonini o'zgartirish uchun nima qilamiz?
— Tooltip yasash uchun qanday yo'llarni bilasiz?
— before va after nima?
— before va after da yozilishi majburiy bo'lgan attribute qaysi?
— inset nima? Inset uchun qo'shimcha video https://www.instagram.com/reel/Cx-k2-HIbTK/
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:— Rasmda ko'rsatilgan navbar elementlarini ustiga sichqoncha borganida uning malumotlarini chiqarib beradi.
- Birinchi topshiriqni tooltip qismida chiqadigan malumotni ::before yoki ::after orqali content attr bilan qabul qilib oling.
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
👍2🔥1👏1🫡1🆒1
32 - dars | Custom Attribute selectors Video | Homework
Questions:
— [target] nima?
— [target=‘value’] haqida malumot bering
— ~ nima?
— | nima?
— ^ nima?
— * nima?
— * bn ~ ning farqi
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— Shaxmat do'skasini yasang. Shartlar:
- table ishlating
- pseudo elementlarini ishlating
CSS orqali html taglarini tanlab olishning yana bir advanced ko'rinishi
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— [target] nima?
— [target=‘value’] haqida malumot bering
— ~ nima?
— | nima?
— ^ nima?
— * nima?
— * bn ~ ning farqi
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:— Shaxmat do'skasini yasang. Shartlar:
- table ishlating
- pseudo elementlarini ishlating
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
👍1🔥1👏1🫡1🆒1
33 - dars | Units Video | Homework
Questions:
—px nima?
— em haqida malumot bering.
— rem nima?
— vw nima?
— vh nima?
— no extra.
— no exercise
O'lcham birliklari haqida.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
—px nima?
— em haqida malumot bering.
— rem nima?
— vw nima?
— vh nima?
Extra: — qo'shimcha topshiriq. Majburiy emas!— no extra.
Exercise:— no exercise
Definition:O'lcham birliklari haqida.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍1🔥1🥰1👏1🫡1🆒1
34 - dars | Gradient Video | Homework
Questions:
— Linear nima?
— linear gradientda from to nima?
— Repeating color nima?
— Radial gradient nima? qiymatlari haqida malumot bering.
— Conic gradient nima?
— Conic vs Radial?
— Conic from / at nima vazifada keladi?
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— Berilgan designni birga bir yasang!
— Buttonlarni ko'ringanidek yasang.
Bir vaqtda bir necha hil ranglarni ishlatishni o'rganamiz.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— Linear nima?
— linear gradientda from to nima?
— Repeating color nima?
— Radial gradient nima? qiymatlari haqida malumot bering.
— Conic gradient nima?
— Conic vs Radial?
— Conic from / at nima vazifada keladi?
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:— Berilgan designni birga bir yasang!
— Buttonlarni ko'ringanidek yasang.
Definition:Bir vaqtda bir necha hil ranglarni ishlatishni o'rganamiz.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
⚡1👍1🔥1👏1🐳1🆒1
35 - dars | Text Effect Video | Homework
— Text shadow haqida malumot bering.
— Box shadow valuelari haqida malumot bering.
— Text overflow nima?
— writing mode haqida batafsil malumot bering.
— Word wrap ni ishlatilish hilatini tushuntirib bering.
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— Berilgan designni birga bir yasang!
— Buttonlarni ko'ringanidek yasang.
— Uchburchakni border orqali yasashga harakat qiling. Instagramda bu bo'yicha master class ham bor.
Bir vaqtda bir necha hil ranglarni ishlatishni o'rganamiz.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:— Text shadow haqida malumot bering.
— Box shadow valuelari haqida malumot bering.
— Text overflow nima?
— writing mode haqida batafsil malumot bering.
— Word wrap ni ishlatilish hilatini tushuntirib bering.
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:— Berilgan designni birga bir yasang!
— Buttonlarni ko'ringanidek yasang.
— Uchburchakni border orqali yasashga harakat qiling. Instagramda bu bo'yicha master class ham bor.
Definition:Bir vaqtda bir necha hil ranglarni ishlatishni o'rganamiz.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍2🫡2⚡1🔥1🥰1🆒1
This media is not supported in your browser
VIEW IN TELEGRAM
36 - dars | Transform Video | Homework
— transform nima?
— translate haqida malumot bering.
— rotate haqida malumot bering.
— transform bilan bir vaqtda bir nechta value ishlatish holtini tushuntib bering.
— border-radius'ni to'g'ri ishlatishda nimalarga etibor qaratish kerak?
— cursor attribute haqida malumot bering.
— Scale ni barcha sub elementlari bo'yicha malumot bering.
— Skew ni barcha sub elementlari bo'yicha malumot bering.
— matrix nima?
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— Berilgan animatsyada button ustiga bosilsa uning pastiga yozish uchun textarea chiqib qolishi kerak!
— Buttonlarni ko'ringanidek yasang.
malumotlarni harakatga keltirish bo'yicha darslik.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:— transform nima?
— translate haqida malumot bering.
— rotate haqida malumot bering.
— transform bilan bir vaqtda bir nechta value ishlatish holtini tushuntib bering.
— border-radius'ni to'g'ri ishlatishda nimalarga etibor qaratish kerak?
— cursor attribute haqida malumot bering.
— Scale ni barcha sub elementlari bo'yicha malumot bering.
— Skew ni barcha sub elementlari bo'yicha malumot bering.
— matrix nima?
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.
— Berilgan animatsyada button ustiga bosilsa uning pastiga yozish uchun textarea chiqib qolishi kerak!
Exercise:— Buttonlarni ko'ringanidek yasang.
Definition:malumotlarni harakatga keltirish bo'yicha darslik.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍2⚡1🔥1👏1🫡1
37 - dars | Transform Video | Homework
— transition delay nima vazifa bajarad?
— transition nima vazifa bajarad?
— transition duration nima vazifa bajarad?
— transition property nima vazifa bajarad?
— timing function nima vazifa bajarad?
— cubic-bezier nima vazifa bajarad?
— transition property haqida shorthand malumot bering.
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— 36-darsdagi extra vazifasini tayorlash.
malumotlarni harakatga keltirish bo'yicha darslik.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— transition nima? — transition delay nima vazifa bajarad?
— transition nima vazifa bajarad?
— transition duration nima vazifa bajarad?
— transition property nima vazifa bajarad?
— timing function nima vazifa bajarad?
— cubic-bezier nima vazifa bajarad?
— transition property haqida shorthand malumot bering.
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:— 36-darsdagi extra vazifasini tayorlash.
Definition:malumotlarni harakatga keltirish bo'yicha darslik.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
⚡1👍1🔥1👏1🫡1