2. CSS haqida. Kurs loyihasi
Bugungi darsda CSS o'zi nima ekanligi, vazifasi va versiyalarini ko'rib chiqamiz. Dars so'ngida esa "Kurs loyihasi" haqida gaplashib o'tamiz.
3. HTML hujjat va CSS. Loyiha strukturasi
Video davomida HTMLda qanday qilib CSS ishlatishni usullarini ko'rib chiqamiz. Undan so'ng loyiha strukturasini yaratib olamiz. Dars so'ngida esa VS Code dasturimizga plugin (extension) o'rnatishni ko'rib chiqamiz.
4. Selectors (Tanlab oluvchilar)
Dars davomida CSS yozish qoidasi va "Selectors" va uning turlarini birma-bir ko'rib chiqamiz.
5. Comments (Izohlar)
Bu darsimizda qanday qilib CSS yordamida izohlar yaratishni o'rganib olamiz.
6. Specificity (O’ziga xoslik)
Bu darsda CSS asoslari xisoblangan Cascading va Specificity nima ekanligi haqida gaplashib, tushunib va amalda kod yozib ko'rib chiqamiz.
7. Inheritance (Meros olish)
Bu darsimizda CSSda "Inheritance" boshqacha qilib aytganda "Meros olish" nima ekanligini ko'rib, tushunib olamiz.
8. Combinators (Kombinatorlar)
Bugungi darsda "CSS"da kombinatorlar nima ekanligini ko'rib chiqamiz va amalda kod yozib tushunib olamiz. Kombinatorlar boshida ozgina tushunarsiz bo'lishi mumkin lekin amalda ishlatib uni tezda tushunib olsa bo'ladi.
9. «Class»lar va qo’shma (combined) selektorlar
Bugungi darsda elementga bir nechta "Class"lar berish imkoniyati va uning foydali tarafini ko'rib chiqamiz. Undan tashqari, qo'shma (combined) selektorlar nima ekanligini tushunib olamiz.
10. Class yoki ID. «!important» haqida
Bugungi darsda "Class" va "ID"ni farqini ko'rib chiqamiz. Dars oxirida esa "!important" nima ekanligini bilib olamiz.
11. CSS asoslari yordamida loyihani yaxshilash
Biz "CSS asoslari" bo'limini tugatib oldik va endi biz hech qanday qiyinchiliksiz HTML hujjatimizdan istalgan elementimizni ajratib olishimiz mumkin. Bugungi darsda, loyihamizni strukturasini yaxshilab olamiz.
12. Box model (Quti modeli). Margin, Padding, Border
Bugun biz CSS kursining yangi bo'limini boshlaymiz va bo'lim "Asosiy xossalar" deb ataladi. Bugungi darsda "Box model" nima ekanligi va uning qismlari xisoblangan "Margin", "Padding" va "Border"ni ko'rib chiqamiz.
13. Margin collapsing. Shorthands (Qisqartmalar)
Bugungi darsda "Margin collapsing" nima ekanligi va uni xususiyatini ko'rib o'tamiz. Undan tashqari "shorthands" yordamida CSS kodimizni qanaqa qilib qisqartirib yozishni o'rganib olamiz.
14. Height (balandlik), Width (kenglik). Max / Min – height / width
Dars davomida elementimizning Height (balandlik) va Width (kenglik) xossalarini ko'rib chiqamiz. Undan tashqari, max-height, min-height va max-width va min-width xossalarini ham tushunib olamiz.
15. «Display» xossasi
Bugungi darsda Block va Inline elementlarning farqi, undan tashqari CSSning display xossasini ko'rib chiqamiz.
16. Text align, Vertical align va Float
Dars davomida CSSning text-align, vertical-align va float xossalarini birma bir ko'rib chiqamiz.
17. Text decoration. Pseudo classes va qoidalarni guruhlash
Bugungi darsda CSSning text-decoration xossasi, pseudo klasslar va qoidalarni guruhlash nima ekanligini ko'rib, yanada yaxshiroq tushunib olamiz.
18. Asosiy xossalar yordamida loyihani yaxshilash (1-qism)
Bugungi dars CSSning asosiy xossalaridan foydalanib loyihamizni navigation menu qismini yaxshilab olamiz.
19. Asosiy xossalar yordamida loyihani yaxshilash (2-qism)
Dars davomida loyihamizning asosiy va statistika qismini yaxshilab olamiz.
20. Asosiy xossalar yordamida loyihani yaxshilash (3-qism)
Bu dars "Asosiy xossalar" bo'liminining oxirgi darsi hisoblanadi va dars davomida loyihamizni qolgan qismlarini yaxshilab olamiz.
21. Joylashish va «static» qiymati
Bugun biz CSS kursining yangi bo'limini boshlab olamiz va bu bo'lim Positioning (Joylashish) deb nomlanadi.
22. Relative va Fixed
Dars davomida "CSS"ning "position" xossasining relativa va fixed qiymatlarini ko'rib, tushunib va amalda kod yozib bilib olamiz.
23. Absolute va Sticky
Bugungi darsda CSS position xossasining oxirgi ikkita "absolute" va "fixed" qiymatlarini ko'rib, kod yozib tushunib olamiz.
24. Z-index va Overflow
Dars davomida z-index va overflow xossalarini yaxshiroq tushunib olamiz.
25. Positioning yordamida loyihani yaxshilash
Dars davomida Positioning bo'limida o'rgangan narsalarimizni loyihada qo'llab, uni yanada yaxshilab olamiz.
26. Background
Dars davomida CSSning background bilan bog'liq bo'lgan xossalarini birma-bir ko'rib, tushunib olamiz.
27. Styling images
Dars davomida qanday qilib rounded va thumbnail rasmlar yaratish va opacity xossasi orqali rasmga qanday style berishni ko'rib o'tamiz.
28. Gradient va Filterlar
Video davomida gradient nima ekanligini va uni qanday yaratishni bilib olamiz. Undan tashqari, CSSda qanday qilib filterlardan foydalanishini ko'rib chiqamiz.
29. Rasmlar (images) yordamida loyihani yaxshilash
Rasmlar bo'limida o'rgangan bilimlarimizni bugungi darsda loyihamizni yaxshilashda qo'llab chiqamiz.
30. Formalarga style berish (1-qism)
Dars davomida HTMLning form elementlariga style berib uni qanday qilib chiroyli va qulay ko'rinishga olib kelishni ko'rib chiqamiz.
31. Formalarga style berish (2-qism)
Dars davomida HTMLning radio button va checkbox elementlariga qanday qilib style berishni o'rganib olamiz.
32. Formalar yordamida loyihani yaxshilash
Formalar bo'limida o'rgangan bilimlarimiz orqali loyihamizni yaxshilab, unga yangi sahifa qo'shib, bog'lanish (contact) formasini yaratib chiqamiz.
33. O’lchov birliklari (Units)
Bugungi darsda yangi bo'limni boshlab olamiz va bu bo'lim CSS units deb ataladi. "Units" nima ekanligi va uning foydasini ko'rib chiqamiz.
34. Foiz (%) o’lchov birligi
Bugungi darsda foiz o'lchov birligi nima ekanligi va uning xususiyatlarini bilib, ko'rib va amalda kod yozib yanada yaxshiroq tushunib olamiz.
35. «em» o’lchov birligi
Dars davomida yana bir yangi nisbiy o'lchov birligi "em" nima ekanligini ko'rib, kod yozib, yanada yaxshiroq tushunib olamiz.
36. rem o’lchov birligi
Dars davomida yana bir yangi nisbiy o'lchov birligi - "rem"ni ko'rib o'tamiz. Uning o'tgan darsda ko'rib o'tilgan "em"dan ustunlik tarafini bilib olamiz.
37. Viewport o’lchov birligi
Dars davomida "Units" bo'limining oxirgi o'lchov birligi ya'ni viewport unit nima ekanligini bilib olamiz va yangi 4ta o'lchov birliklarini o'rganib chiqamiz.
38. Units yordamida loyihani yaxshilab olish
Bugungi dars Units bo'limida o'rgangan bilimlarimizga asoslanib loyihamizni yaxshilab olamiz.
39. Responsive Web Design (RWD)
Bugun biz yangi bo'limni boshlab olamiz va bu bo'lim Responsive Web Design (RWD) deb ataladi va uni yordamida veb sahifamizni har xil qurilmalarga moslashtirishni o'rganib olamiz.
40. Media queries
Dars davomida RWD (Responsive Web Design) asoslaridan biri bo'lgan media queries (so'rovlar) nima ekanligini ko'rib, tushunib va kod yozib yanada yaxshiroq bilib olamiz.
41. Breakpoints
Dars davomida RWD (Responsive Web Design) asoslaridan biri bo'lgan "breakpoints" nima ekanligini tushunib olamiz.
42. RWD yordamida loyihani yaxshilash (1-qism)
Bugun darsda shu paytgacha qilib kelayotgan loyihamizni Responsive ko'rinishga olib kelib, mobil qurilmalarda ham qulay ko'rinishga ega bo'lishini taminlaymiz.
43. RWD yordamida loyihani yaxshilash (2-qism)
Dars davomida qilib kelayotgan loyihamizni planshetlar uchun moslab olamiz.
44. Fonts
Darsda davomida yangi "fonts" bo'limini boshlab olamiza va umuman olganda "fonts" (shriftlar) veb sahifamiz uchun qanday ahamiyatga ega, ularning turlari va qanday ishlatishni bilib olamiz.
45. Yangi font qo’shish
Dars davomida operatsion tizim va veb sahifamizga shriftlarni qo'shishni o'rganib olamiz. Undan tashqari, Google Fonts bilan yaqindan tanishib olamiz.
46. Local font qo’shish
Dars davomida veb sahifamizga qanday qilib local fonts qo'shishni o'rganib olamiz. Undan tashqari, turli xil font formatlarini birma-bir ko'rib chiqamiz.
47. Font xossalari
Bugungi darsda font xossalarini birma-bir ko'rib, tushunib va amalda kod yozib yanada yaxshiroq bilib olamiz.
48. Fonts yordamida loyihani yaxshilab olish
Dars davomida fonts bo'limida olgan bilimlarimiz yordamida, loyihamizni yaxshilab va uni hamma brauzerlarda bir xil fontga ega bo'lishini taminlaymiz.
49. 2D transforms
Bugungi darsda 2D transforms nima ekanligini va uning metodlarini birma-bir ko'rib, tushunib va kod yozib yanada yaxshiroq bilib olamiz.
50. 3D transforms
Bugungi darsimizda 3D transforms nima ekanligini tushunib va kod yozib uni amalda ishlatib ko'ramiz. 3D transformsni tushunish ozgina qiyin bo'lishi mumkin, lekin tajribangiz ortgani sari va amaliyotda ko'p ishlatib uni tushunib olishingiz mumkin bo'ladi
51. Transitions
Dars davomida Transitions nima ekanligini bilib olib va uning yordamida CSS xosslarimiz qiymatlarini qanday qilib ravon (smooth) o'zgartirishni o'rganib olamiz.
52. Animations (1-qism)
Bugungi darsda CSS animations nima ekanligi va ularni qanday yaratib olishni o'rganib olamiz.
53. Animations (2-qism)
Bu darsda ham CSS animations haqida gaplashib o'tamiz va uning qo'shimcha CSS xosslarini birma-bir ko'rib chiqamiz.
54. CSS Advanced yordamida loyihani yaxshilash
Bugungi dards CSS Advanced bo'limida olgan bilimlarimizga tayangan holda loyihamizni yaxshilab olamiz.
55. Flexbox: asoslari va terminlari
Bugungi darsda Flexbox bo'limini boshlab olamiz va dars davomida uning asoslari va terminlarini o'rganib olamiz.
56. Flexbox: flex-direction, flex-wrap, flex-flow va justify-content
Bugungi darsda Flex Container uchun ishlatiladigan CSS xossalarini ko'rib chiqib, tushunib va kod yozib yanada yaxshiroq bilib olamiz
57. Flexbox: align-items va align-content
Dars davomida "flex container"ga tegishli bo'lgan yangi CSS xossalarini o'rganib chiqamiz.
58. Flexbox: order, flex-grow va flex-shrink
Bugungi darsda "flex items"ning 3 xossasi bilan tanishib va kod yozib yanada yaxshiroq tushunib olamiz.
59. Flexbox: flex-basis, flex va align-self
Dars davomida "flex item"ning yana yangi 3 xossasi: flex-basis, flex va "align self"ni birma-bir ko'rib, tushunib va kod yozib yanada yaxshiroq bilib olamiz.
60. Flexbox yordamida loyihani yaxshilash
Dars davomida Flexbox bo'limida olgan bilimlarimizga tayangan holda loyihamizni yanada yaxshilab olamiz.
61. CSS Grid
Bugungi darsda CSS Grid haqida qisqacha gaplashib o'tamiz.
62. Best practices
Bugungi darsda biz CSSdagi amaliyotda qo'llash bo'yicha tavsiyalar ya'ni "Best practice"larni birma-bir ko'rib chiqamiz.
63. Loyihani yakunlash. Kurs yakuni
Bugun biz CSS kursining oxirgi darsini o'tib olamiz va dars davomida loyihamizni to'liqligicha yakunlab, kursga ham yakun yasab va keyingi rejalar haqida gaplashib o'tamiz.