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
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