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
43 - dars | Column Video | Homework
— column gap haqida malumot bering. Griddagi gap emas.
— rule style nima?
— rule width haqida malumot bering.
— rule color haqida malumot bering.
— rule span qiymatlari haqida malumot bering.
— resize qiymatlari haqida malumot bering.
— box sizing nima?
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— rasmdagi har ikki designni barcha darslardan foydalangan holda yasang.
— Ustunlar bilan ishlash.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— css da column nima?— column gap haqida malumot bering. Griddagi gap emas.
— rule style nima?
— rule width haqida malumot bering.
— rule color haqida malumot bering.
— rule span qiymatlari haqida malumot bering.
— resize qiymatlari haqida malumot bering.
— box sizing 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.
Exercise:— rasmdagi har ikki designni barcha darslardan foydalangan holda yasang.
Definition:— Ustunlar bilan ishlash.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
🏆1
44 - dars | Flexbox-2 Video | Homework
— order attributeni ishlatishda parent va child elementlarini ishlatilish o'rni haqida malumot bering.
— shrink nima vazifa bajaradi?
— grow nima vazifa bajaradi?
— basis haqida malumot bering.
— align-items'ni qanday qilib ovveride qilsa bo'ladi?
— flex nimalardan tashkil topgan?
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— videoda pullik crm designi berilgan.
— Figmada berilgan design hammasi bir xil, faqta mobile desktop larga ajratilgan. Shu designni birinchisini qilishingiz kerak. Bir hil cardlarini kamaytrirsangiz bo'ladi. Vazifa
— flexbox mavzusini advaced ko'rinishi. Siz bu mavzudan keyin istalgan websiteni 90% bemalol qilish imkoniga bega bo'lasiz. Agar qila olmayabsizmi demak o'tilgan darslarni takrorlashingiz kerak bo'ladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— flexbox nima?— order attributeni ishlatishda parent va child elementlarini ishlatilish o'rni haqida malumot bering.
— shrink nima vazifa bajaradi?
— grow nima vazifa bajaradi?
— basis haqida malumot bering.
— align-items'ni qanday qilib ovveride qilsa bo'ladi?
— flex nimalardan tashkil topgan?
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:— videoda pullik crm designi berilgan.
— Figmada berilgan design hammasi bir xil, faqta mobile desktop larga ajratilgan. Shu designni birinchisini qilishingiz kerak. Bir hil cardlarini kamaytrirsangiz bo'ladi. Vazifa
Definition:— flexbox mavzusini advaced ko'rinishi. Siz bu mavzudan keyin istalgan websiteni 90% bemalol qilish imkoniga bega bo'lasiz. Agar qila olmayabsizmi demak o'tilgan darslarni takrorlashingiz kerak bo'ladi.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍1🏆1
45 - dars | Grid Video | Homework
— gap / column, row gap haqida batafsil tushuntirib bering.
— grid template columns / rows haqida batafsil malumot bering.
— fraction / auto / px qiymatlarini bir biridan ishlatilish o'rnida farqlari nima?
— auto rows
— justify-content
— align-content
— grid-area
— grid-column-end / start
— Xar bir darsni video ko'rinishda tayorlash bu ixtiyoriy lekin interview savollarga tayorlanshni maqsad qilgan bo'lsanigz ushbu topshiriqni qilishingiz kerak bo'ladi.
— rasmdag ko'rsatilgan designlarni flexbox va gridda taqoslab qiling va qaysi yo'l osonligi va nimaga ishlatilishi kerakligi bo'yicha hulosa qilng.
— Figmada berilgan design hammasi bir xil, faqta mobile desktop larga ajratilgan. Shu designni birinchisini qilishingiz kerak. Bir hil cardlarini kamaytrirsangiz bo'ladi. Vazifa
— grid mavzusini advaced ko'rinishi. Siz bu mavzudan keyin istalgan websiteni 90% bemalol qilish imkoniga bega bo'lasiz. Agar qila olmayabsizmi demak o'tilgan darslarni takrorlashingiz kerak bo'ladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— flexbox vs gridning farqi?— gap / column, row gap haqida batafsil tushuntirib bering.
— grid template columns / rows haqida batafsil malumot bering.
— fraction / auto / px qiymatlarini bir biridan ishlatilish o'rnida farqlari nima?
— auto rows
— justify-content
— align-content
— grid-area
— grid-column-end / start
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:— rasmdag ko'rsatilgan designlarni flexbox va gridda taqoslab qiling va qaysi yo'l osonligi va nimaga ishlatilishi kerakligi bo'yicha hulosa qilng.
— Figmada berilgan design hammasi bir xil, faqta mobile desktop larga ajratilgan. Shu designni birinchisini qilishingiz kerak. Bir hil cardlarini kamaytrirsangiz bo'ladi. Vazifa
Definition:— grid mavzusini advaced ko'rinishi. Siz bu mavzudan keyin istalgan websiteni 90% bemalol qilish imkoniga bega bo'lasiz. Agar qila olmayabsizmi demak o'tilgan darslarni takrorlashingiz kerak bo'ladi.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍1🔥1👏1🏆1
46 - dars | Grid Project Video | Homework
— no extra
— Figmada berilgan birinchi designni birga bir qilish kerak bo'ladi.
— Grid mavzusini yaxshiroq tushunish uchun project qilingan.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:
— grid template area haqida malumot bering.Extra: — qo'shimcha topshiriq. Majburiy emas!— no extra
Exercise:— Figmada berilgan birinchi designni birga bir qilish kerak bo'ladi.
Definition:— Grid mavzusini yaxshiroq tushunish uchun project qilingan.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍2🔥1👏1
47 - dars | Uzum market Project Video | Homework
— no question.
— no extra
— Figmada berilgan birinchi designni birga bir qilish kerak bo'ladi.
— Barcha o'tilgan mavzulardan foydalanib uzum platformasidek project qilish..
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:— Figmada berilgan birinchi designni birga bir qilish kerak bo'ladi.
Definition:— Barcha o'tilgan mavzulardan foydalanib uzum platformasidek project qilish..
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍2🔥1👏1
48 - dars | Image Gallery Project Video | Homework
— no question.
— no extra
— Figmada berilgan birinchi designni birga bir qilish kerak bo'ladi.
— Grid mavzusi eng qiyin mavzulardan bo'lgani uchun imkon qadar ko'proq project orqali tushuntirishga harakat qilingan. Shu sabab bu darsimiz ham grid orqali project qilish bo'lgan.
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:— Figmada berilgan birinchi designni birga bir qilish kerak bo'ladi.
Definition:— Grid mavzusi eng qiyin mavzulardan bo'lgani uchun imkon qadar ko'proq project orqali tushuntirishga harakat qilingan. Shu sabab bu darsimiz ham grid orqali project qilish bo'lgan.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍2🔥1👏1
49 - dars | RWD Video | Homework
— RWD nima?
— media query haqida umumiy malumot bering.
— flexbox as RWD o'rtasidagi bog'liqlik haqida malumot bering.
— flexbox va gridning real ishlatilishidagi farqi nima?
— media print nima?
— orientation / portrait haqida malumot bering.
— media queryda ikkita orqalini belgilash uchun nima qilinadi?
— CSS'da mediq queryni yozishda tartib qanchalik muhim?
— no extra
— Figmada berilgan designni birga bir qilish kerak bo'ladi. Asosiy etibor beradigan jihati mobile versiyasini avtomatik moslashishi.
— Deyarli har bir projectda mobile versya bo'ladi. Projectizni kompyuterda ochgandek ko'rinadigan bo'lishni istasez, RWD ni o'rganish kerak bo'ladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:— RWD nima?
— media query haqida umumiy malumot bering.
— flexbox as RWD o'rtasidagi bog'liqlik haqida malumot bering.
— flexbox va gridning real ishlatilishidagi farqi nima?
— media print nima?
— orientation / portrait haqida malumot bering.
— media queryda ikkita orqalini belgilash uchun nima qilinadi?
— CSS'da mediq queryni yozishda tartib qanchalik muhim?
Extra: — qo'shimcha topshiriq. Majburiy emas!— no extra
Exercise:— Figmada berilgan designni birga bir qilish kerak bo'ladi. Asosiy etibor beradigan jihati mobile versiyasini avtomatik moslashishi.
Definition:— Deyarli har bir projectda mobile versya bo'ladi. Projectizni kompyuterda ochgandek ko'rinadigan bo'lishni istasez, RWD ni o'rganish kerak bo'ladi.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
👍1🔥1👏1
50 - dars | RWD Expert Video | Homework
— HTML CSS orqali istalgan designni qila olasizmi?
— Desktop va Mobile Project 2 FIGMA
— Desktop va Mobile Project 1 FIGMA
— Desktop va Mobile Project 2 FIGMA
— Deyarli har bir projectda mobile versya bo'ladi. Projectizni kompyuterda ochgandek ko'rinadigan bo'lishni istasez, RWD ni o'rganish kerak bo'ladi.
Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
Questions:— HTML CSS orqali istalgan designni qila olasizmi?
Extra: — qo'shimcha topshiriq. Majburiy emas!— Desktop va Mobile Project 2 FIGMA
Exercise:— Desktop va Mobile Project 1 FIGMA
— Desktop va Mobile Project 2 FIGMA
Definition:`— Deyarli har bir projectda mobile versya bo'ladi. Projectizni kompyuterda ochgandek ko'rinadigan bo'lishni istasez, RWD ni o'rganish kerak bo'ladi.
Contacts:Academy: t.me/webbrain_academy
General IT: instagram.com/sardorbek_web
Coding Lifehack: instagram.com/sardorbek_coder
🔥1👏1
Alhamdulillah! CSS uchun uy vazifalarini tayorlash o'z nihoyasiga yetdi.
Umumiy
Vazifalar Webbrain Academy asoschisi Sardorbek Muhtorov tomonidan tayorlandi. Malumotlar yangilangan vaqtda obunachilarni ogohlantiriladi.
CSS vazifalari uchun @css_homework guruhiga qo'shilib oling. Vazifalar uchun lifehack va yechimlar Instagram Telegram va YouTube sahifasida qo'yib boriladi. Obuna bo'lib qo'llab quvattlasangiz albatta hursand bo'lamiz.
Ushbu guruhdagi malumotlar 100% bepul, o'rganish uchun duo qilsangiz yetadi. Malum joyda foydalanmoqchi bo'lsangiz muallifni belgilab ketishingiz talab qilinadi.
P/S: Endlikda JavaScript darsi uchun interview savollari va codewars masalalari tayorlanish boshlandi. Bepul olish uchun instagram.com/sardorbek_coder obuna bo'ling.
Instagram | Telegram | YouTube
Umumiy
370 dan ziyod savollar va 57 ta amaliy mashqlar va 41 ta qo'shimcha topshiriqlardan tashkil topgan. Vazifalarni 5ta bo'limga ajratganmiz:Questions - savollar bo'limi.Extra - qo'shimcha topshiriq. Majburiy emas!Exercise - amaliy topshiriqlar.Definition - tarif.Contacts - berilgan mashqlar uchun lifehack videolar kanali.Vazifalar Webbrain Academy asoschisi Sardorbek Muhtorov tomonidan tayorlandi. Malumotlar yangilangan vaqtda obunachilarni ogohlantiriladi.
CSS vazifalari uchun @css_homework guruhiga qo'shilib oling. Vazifalar uchun lifehack va yechimlar Instagram Telegram va YouTube sahifasida qo'yib boriladi. Obuna bo'lib qo'llab quvattlasangiz albatta hursand bo'lamiz.
Ushbu guruhdagi malumotlar 100% bepul, o'rganish uchun duo qilsangiz yetadi. Malum joyda foydalanmoqchi bo'lsangiz muallifni belgilab ketishingiz talab qilinadi.
P/S: Endlikda JavaScript darsi uchun interview savollari va codewars masalalari tayorlanish boshlandi. Bepul olish uchun instagram.com/sardorbek_coder obuna bo'ling.
Instagram | Telegram | YouTube
🔥4👍3❤🔥1