Css dars savolari.
1-Dars | Kirish, Css versiyalari, Css sytax, Selectorlar, Comments, Github and Figma, Netlify.
- Css nima? Nima uchun kerak?
- Css qanday ishlaydi?
- CSS yozilish usulidagi structuralarning bir biridan farqi nimada?
- Css ni HTML ga ulash yo'lari qanday?
- Css ni ulash internal, external, inline nima?
- Css versiyalarini tushuntiring?
- Terminal tushuchasi nima?
- Css sintax qanday?
- Property nima?
- Xossa nima?
- Coments nima? (Izox)
- Selector nima? tushuntiring? Ummumiy malumot bering?
- Selector turlari haqida malumot bering?
- Class Selector nima?
- Universal Selector nima?
- Id selector nima?
- Tag selector nima?
- Github nima?
- Nima uchun Github kerak?
- Figma nima?
- Figmada nimalar bo'ladi? Figmadan foydalanish qanday tushuntiring?
- Domen nima?
- Domen nima vazifani bajaradi?
- Vercel and Netlify nima?
- Netlify ni ishlashi va keyingi darslardagi maketlarni joylash?
2-Dars | Specificity(o'ziga xoslik), Inheritance(meros olish), Color, Combinators, !Importanat.
- Specificity nima?
- Oziga xosslik nima?
- Important nima?
- Meros olish ni tushuntiring?
- Class, id and tag?
- Universal selector?
- Color nima?
- Css da necha xil usulda color bersa bo'ladi?
- Color names, rgb, rgba, hex, hsl nima?
- rgbnima? qanday beriladi? sanoq sistemasi?
- rgba nima qanday ishlaydi parametrlari?
- rgb va rgba qanday farqi bor?
- hex qanday ishlaydi? kengaytmasi qanday? qanday ishlaydi?
- Dunyodagi har bir rang qaysi ranglardan tuzilgan?
- hsl nima? qanday ishlaydi?
- Css da eng ko'p ishlatiladigan color berish usuli qaysi?
- Color mania => programa?
- Color berish usularini backround colorda ham ishlatsa bo'ladimi?
- Combinators nima?
- Combinatorlarni tushuntirib bering misolar bilan? Qanday combinatorlar bor eng optimallarini tushuntiring?
- Tillda combinator nima? Qanday yoziladi? vazifasi?
- Pilus combinator nima? Qanday ishlaydi? vazifasi?
- Ko'rsatkich (>) Combinator nima? Qanday ishlaydi? vazifasi?
- Combitaorlarni misolar bilan tushuntiring? Bog'liqligi?
- CurrentColor nima? qanday ishlaydi? nima uchun ishlatiladi?
3-Dars | Html tree, Multiple Classes, Box modeli, Padding, Margin, Border, Shorthands (qisqartmalar) qo'lash?
- HTML tree nima?
- Multiple classes nima?
- Bir necha classlardan foydalanishni afzaliglari ni tushuntiring? Amaliyot bilan?
- Amaliyot bir necha class ga?
- Important nima? tushuntiring? Afzaligi?
- Box modeli nima? Tushuntiring?
- Box modeli nimalarda bo'ladi?
- Padding nima? Qanday ishlaydi?
- Padding parametrlari ni tushuntiring?
- Margin nima? Qanday ishlaydi tushuntiring? Amaliyot bilan?
- Margin parametrlari ni tushuntiring?
- Border nima? qaysi holarda ishlatiladi?
- Border parametrlarini tushuntiring?
- Border radius nima? Ummumiy tushuncha hamma xossalarini tushuntirish?
- 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.
- Qisqartmalar nima? qanday afzaligi bor?
- Qisqartmalarni o'tilgan mavzular bilan qo'lash?
4-Dars | Height and Width, Max / Min height and Max / Min Width, Backround,
- Css da Sizes nima?
- Height nima? tushuntiring? nima uchun ishlatiladi?
- Width nima? tushuntiring? nima uchun ishlatiladi?
- Width va height nima farqi bor? tushuntiring?
- Max-height nima? tushuntiring? nima uchun ishlatiladi?
- Max-width nima? tushuntiring? nima uchun ishlatiladi?
- Max-height and Max-width nima farqlari bor?
- Backround nima?
- Backround image nima? Backround ga qanday rasm qo'yiladi?
- Backround image dagi url nima?
- Backround ga rasm olib kelishni necha xil usuli bor? tushuntiring?
- Backround size nima? qanday ishlaydi? qiymatlari haqida malumot bering?
- Backround size keng ishlatiladigani qaysi?
- Backround repeat nima? qanday xossalari bor? tushuntiring?
- Backround repeatni default qiymati qanday?
- Backround ni repeat, no-repeat, repeat-x va repeat-y qiymatlarini tushuntiring?
- Ummumiy savol defaul qiymat nimaga kerak?
5-Dars | Pseudo class. Transition Overflow, Overflow-x, Overflow-y, Text-decoration.
- Pseudo class nima?
- Pseudo class qanday yoziladi?
- Pseudo class qanday turlarini bilasiz?
- Pseudo class nima uchun ishlatiladi?
- Hover nima?
- Active nima? qanday ishlaydi ? tushuntiring?
- Focus nima? qanday ishlaydi? tushuntiring?
- Transition nima? nima uchun ishlatiladi?
- Overflow nima? qanday xossalari bor? tushuntirib bering?
- Overflow-x Overflow-y nima farqi bor?
- Overflow ni defaul qiymati qaysi?
- Overflow hidden nima qilib beradi?
- Overflow scroll nima uchun ishlatiladi?
- Text-decoration nima? Nima uchun kerak?
- Text-decoration qanday xossalari bor tushuntiring?
- Text-decoration ni default xolatda qanday qiymatda bo'ladi?
- Underline, line-thrue, overline nima? biri biridan farqi nimada?
- a tagida Text-decoration qanday qiymatda bo'ladi?
6-Dars | Display xossalari, Display block, inline and inline-block, Text align and Vertical align,
7-Dars | Amaliyot qilish mavzular bo'yicha. Documentatsiya Nazariy bilim bilan savol javob qilish.
8-Dars | Joylashish(Position), Relative, Fixed, Absolute, Sticky. Z-index
- Joylashish nima? Nima uchun ishlatiladi? qanday turlari bor?
- Left, Right, Top and Bottom nima? nima uchun kerak?
- Position relative nima? qanday ishlaydi? tushuntiring?
- Position absolute nima? qanday ishlaydi? tushuntiring?
- Position Fixed nima? qanday ishlaydi? tushuntiring?
- Position Sticky nima? qanday ishlaydi? tushuntiring?
- Z- Index nima? qanday ishalaydi? tushuntiring misolar bilan?
- Amaliy mashq.
9-Dars | Opacity, Gradient, Filterlar.
10-Dars | Amaliyot qilish. Figma => Shopping, Barber shop
11-Dars | O'lchov birliklari (Units), Absolute and Relative units,
- O'lchov birliklari nima?
- O'lchov birliklari qanday turlarga bo'linadi? tushuntiring?
- Absolute Units nima?
- Absolute Unitsga qanday birliklar kiradi? Tushuntiring?
- Absolut Unitga misollardan eng ko'p ishlatiladigani qaysi?
- px qanday units? qanday ishlaydi, tushuntiring.
- Absolute Unitsni yaxshi va yomon tomonlari.
- Relative Units nima? Qanday ishlaydi tushuntiring? afzaligi?
- Relative Units qanday holatlarda ishlatiladi?
- Relative Unitsga misolar ayting?
- % Units qanday ishlaydi? nimaga nisabatan ishlaydi? tushuntiring?
- vw Units qanday ishlaydi? nimaga nisabatan ishlaydi? tushuntiring?
- vh Units qanday ishlaydi? nimaga nisabatan ishlaydi? tushuntiring?
- rem Units qanday ishlaydi? nimaga nisabatan ishlaydi? tushuntiring?
- em Units qanday ishlaydi? nimaga nisabatan ishlaydi? tushuntiring?
12-Dars | Formalarga style berish.
- Amaliyot?
- https://www.figma.com/design/H21OjmYq13Wo1dEq32yKbh/Forms-UI-Kit--Community-?node-id=0-1&p=f&t=MIPZuS1wYxNqlUcE-0
- Font nima? Qanday ishlaydi?
- Font oilalari haqida malumot bering?
- Font family nima? Qanday ishlaydi?
- Font weight nima? Qanday ishlaydi?
- Font weight qanday xossalari bor? tushuntiring? nima qilib beradi?
- Font size nima? Nima uchun kerak?
- Font uchun qanday css propertylarini bilasiz?
- Bold, Italic nima? 100 and 900 qaysi css propertylari uchun ishlatiladi?
- Google fonts nima? qanday ishlaydi? nima uchun kerak?
- Google fontsdan font olib kelish usularini tushuntitib bering?
- Link bilan olib kelinsa qanday ishlaydi? Qanday olib kelinadi?
- Import bilan olib kelinsa qanday ishlaydi? Qanday olib kelinadi?
- Link bilan Import qanday farqi bor? Afzaliglari ni tushuntiring?
- Font yuklab olish uchun ketma ketliklar? qanday yuklab olinadi?
- Yuklab olingan Fonts qanday ishlatiladi?
- Documentation.?
- https://www.w3schools.com/css/css_font.asp
- https://developer.mozilla.org/ru/docs/Web/CSS/Reference/Properties/font-family
- Amaliyot?
- https://www.figma.com/font-types/
- https://www.figma.com/design/P4f9sFuxW8REu9yeUZIoa9/100-Best-Font-Combinations--Community-?node-id=2-3&p=f&t=fmecH1PH25FGVzSv-0
- Transform nima? Nima uchun ishlatiladi? tushuntiring?
- Transform xossalari? tushuntiring?
- Translate nima? Qanday ishlaydi? Tushuntiring?
- TranslateX va TranslateY qanday ishlaydi?
- Rotate nima? Qanday ishlaydi? tushuntiring?
- Rotate da degre nima? Tushuntiring?
- Rotate bilan translateni farqini tushuntiring?
- Documentation.?
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform
- https://doka.guide/css/transform-function/
- https://css-tricks.com/almanac/properties/t/transform/
- Amaliyot.?
- Animation nima? Nima uchun ishlatiladi? Tushuntiring?
- Kefreymes nima? Nima uchun ishlatiladi? Tushuntiring?
- Kefreymes ichidagi qiymatlarni tushuntiring? 0% and 100%? from and to?
- Animation name nima? Qanday ishlaydi?
- Animation duration nima? Qanday ishlaydi?
- Animation delay nima? Qanday ishlaydi?
- Animation-iteration-count nima? Qanday ishlaydi? xossalari qanday? Tushuntiring?
- Animation-direction nima? Qanday ishlaydi? xossalari qanday? Tushuntiring?
- Documentation.
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes
- https://doka.guide/css/keyframes/
- https://prismic.io/blog/css-text-animations#15-3d-rotate
- https://css-tricks.com/almanac/rules/k/keyframes/
- Amaliyot.?
Dars | Flexbox.? Flex Container.?
- Flexbox nima? Qanday ishlaydi? tushuntiring?
- Documentation.?
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties
- https://doka.guide/css/flexbox-guide/
- https://www.w3schools.com/css/css3_flexbox.asp
- Amaliyot.?
- https://www.figma.com/design/fMzosYwIwTIrRaMYM0BQef/Virtual-Reality-Business-Solutions?node-id=0-1&p=f&t=YNDEsCCVd82SHc1a-0
- sd
- sd
- sd
- Documentation.?
- https://doka.guide/css/flexbox-guide/
- https://www.w3schools.com/css/css3_flexbox_items.asp
- Amaliyot.?
- https://www.figma.com/design/fMzosYwIwTIrRaMYM0BQef/Virtual-Reality-Business-Solutions?node-id=0-1&p=f&t=YNDEsCCVd82SHc1a-0
- Amaliyot.?
- https://www.figma.com/design/c0ynurN0BKMuOZ8A03MmsU/Landing-page---%D0%94%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B0-%D0%B5%D0%B4%D1%8B?node-id=0-1&p=f&t=XK1E16BAl7JcYCdS-0
- https://www.figma.com/design/WMZqvAEtRLcngcgSoNx3eM/Landing-page---%D0%9A%D0%BE%D1%84%D0%B5?node-id=0-1&p=f&t=K3FHn6pNLB9qxFi0-0
- https://www.figma.com/design/AItNo9pwJK66xgeYeXw2qf/Landing-page---%D0%9E%D1%82%D0%B5%D0%BB%D1%8C?node-id=0-1&p=f&t=JdrJ16oZWo42ywJ2-0
- https://www.figma.com/design/P9Eerq97v76v3fmx0K8L65/Landing-Page---%D0%9F%D0%BE%D0%B8%D1%81%D0%BA-%D1%84%D1%80%D0%B8%D0%BB%D0%B0%D0%BD%D1%81%D0%B5%D1%80%D0%BE%D0%B2?node-id=2-3&p=f&t=gVsZWymeKeoMbTuE-0