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
This media is not supported in your browser
VIEW IN TELEGRAM
38 - dars | Animation 1 Video | Homework
— Animatable css attributes haqida malumot bering.
— animation with percentage unit haqida malumot bering.
— animation from{}, to{} haqida malumot bering.
— left, right positionni to'g'ri ishlatishda eng muhim narsa nima?
— Override attributes haqida 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.
— uchinchi rasmda sichqoncha qayerga borsa ana shu yerdni rangi o'zgaradi. Xarakat qilib ko'ring.
— Birinchi va ikkinchi rasmdagi animatsiya majburiy tayorlanishi kerak.
— Birichi rasmda from to dan foydalaning. chunki bir nechta harakat bor. Xaraktlarni o'rni o'rniga qo'yishga harakat qiling.
malumotlarni harakatga keltirish bo'yicha darslik.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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 bilan animation farqi nima?— Animatable css attributes haqida malumot bering.
— animation with percentage unit haqida malumot bering.
— animation from{}, to{} haqida malumot bering.
— left, right positionni to'g'ri ishlatishda eng muhim narsa nima?
— Override attributes haqida 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.
— uchinchi rasmda sichqoncha qayerga borsa ana shu yerdni rangi o'zgaradi. Xarakat qilib ko'ring.
Exercise:— Birinchi va ikkinchi rasmdagi animatsiya majburiy tayorlanishi kerak.
— Birichi rasmda from to dan foydalaning. chunki bir nechta harakat bor. Xaraktlarni o'rni o'rniga qo'yishga harakat qiling.
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
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
39 - dars | Project Video | Homework
— Dars davomida qilingan gradient va animationga oid project. Qo'shimcha quyidagi instagram sahifamizda master class videolarini ham ko'rsangiz bo'ladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
malumotlarni harakatga keltirish bo'yicha darslik.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Definition:— Dars davomida qilingan gradient va animationga oid project. Qo'shimcha quyidagi instagram sahifamizda master class videolarini ham ko'rsangiz bo'ladi.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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
40 - dars | Project Video | Homework
— Dars davomida animationga oid uy vazifalarig yechimsifatida project. Qo'shimcha quyidagi instagram sahifamizda master class videolarini ham ko'rsangiz bo'ladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
malumotlarni harakatga keltirish bo'yicha darslik.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Definition:— Dars davomida animationga oid uy vazifalarig yechimsifatida project. Qo'shimcha quyidagi instagram sahifamizda master class videolarini ham ko'rsangiz bo'ladi.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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
41 - dars | Project Video | Homework
— Dars davomida tooltipga oid uy vazifalarig yechimsifatida project. Qo'shimcha quyidagi instagram sahifamizda master class videolarini ham ko'rsangiz bo'ladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
malumotlarni harakatga keltirish bo'yicha darslik.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Definition:
— Studentlar darslarni yaxshi o'zlashtirishi uchun amaliy mashqulotlarga ko'proq to'htalganmiz. — Dars davomida tooltipga oid uy vazifalarig yechimsifatida project. Qo'shimcha quyidagi instagram sahifamizda master class videolarini ham ko'rsangiz bo'ladi.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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
42 - dars | Image Effect Video | Homework
— webkit-box-reflect: ning qiymatlari haqida malumot bering.
— direction ning qiymatlari haqida malumot berin.
— offset ning qiymatlari haqida malumot bering.
— Object fit:
⁃ fill
⁃ contain
⁃ cover
⁃ none
⁃ scale-down
— Object position haqida malumot bering.
— Image:
⁃ blur(4)
⁃ brightness(250%)
⁃ contrast(180%)
⁃ grayscale(100%)
⁃ hue-rotate(90deg)
⁃ invert(100%)
⁃ opacity(50%)
⁃ saturate(7)
⁃ sepia(100%)
⁃ drop-shadow(8px 8px 8px green)
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— Rasmlardagi before asl holati, uni after holatiga o'tkazish kerak boladi.
— hamma telefonda rasmni nastroykasidan tiniq hira qilb ko'rgan bo'las kerak. Image Effect darsi ham kamerdada rasmga qanday effect qoshish mumkin bo'lsa barchasi haqida malumot berilgan.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
malumotlarni harakatga keltirish bo'yicha darslik.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— Image reflection nima?— webkit-box-reflect: ning qiymatlari haqida malumot bering.
— direction ning qiymatlari haqida malumot berin.
— offset ning qiymatlari haqida malumot bering.
— Object fit:
⁃ fill
⁃ contain
⁃ cover
⁃ none
⁃ scale-down
— Object position haqida malumot bering.
— Image:
⁃ blur(4)
⁃ brightness(250%)
⁃ contrast(180%)
⁃ grayscale(100%)
⁃ hue-rotate(90deg)
⁃ invert(100%)
⁃ opacity(50%)
⁃ saturate(7)
⁃ sepia(100%)
⁃ drop-shadow(8px 8px 8px green)
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:— Rasmlardagi before asl holati, uni after holatiga o'tkazish kerak boladi.
Definition:— hamma telefonda rasmni nastroykasidan tiniq hira qilb ko'rgan bo'las kerak. Image Effect darsi ham kamerdada rasmga qanday effect qoshish mumkin bo'lsa barchasi haqida malumot berilgan.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
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