CSS - 2023
Ushbu video darslik CSS da bilishingiz kerak bo'lgan barcha mavzularni o'z ichiga olgan. Video darslik tayorlashda MDN, W3School va css-tricks websitelaridan foydalanilgan. Video darsning umumiy davomiyligi 867.31 minutni tashkil etadi.
Quyidagi kontentlar shariy hukumda egalik huquqi bo'lgani uchun, bu materiallardan istalgan ko'rinishda foydalanish uchun Webbrain Academy hamda Sardorbek Muhtorov telegram kanallarini belgilab ketish shart bo'ladi.
Darslikni foydali deb bilsangiz yaqinlaringizga ulashing. To'liq kontent video ko'rinishida YouTube sahifamizga joylangan. Obuna bo'lishingiz ham biz uchun keyingi ishlarda katta turtki bo'ladi.
Videoni to'liq sotib olish uchun: https://teletype.in/@webbrain_ceo/video_darsliklar
Hurmat bilan Sardorbek Muhtorov.
BASICS
1 - dars | CSS'ga kirish | dars jarayoni va ketma-ketlik haqida | YouTube Link
ā CSS'ni Webbrain bilan o'rganishingiz sababi.
ā Ushbu darslikni qolgan darsliklardan farqi.
2 - dars | CSS nima? | YouTube Link
ā HTML, CSS, JavaScript vazifalari
ā CSS'ning basic va advanced mavzulari haqida.
ā Dasturchilar css o'ringa kutubhonalar ishlatish sabablari.
ā CSS o'rganish uchun nimalar talab qilinadi?
ā CSS versiyalari haqida.
ā Vazifalar qay tartibda beriladi.
3 - dars | HTML va CSS ni bog'lash | YouTube Link
ā Inline style
ā Internal style
ā External style
4 - dars | CSS'da terminal bilan ishlash | YouTube Link
ā CMD va Terminal nima?
ā Nega terminal o'rganishimiz kerak?!
ā Termianl orqali malumotlar manziliga o'tish
5 - dars | Selectorlar | YouTube Link
ā Selectorlar nima maqsadda ishlatiladi?
ā HTML taglar orqali malumotlarni chaqirish
ā ID attrabute orqali malumotlarni chaqirish
ā class attrabute orqali malumotlarni chaqirish
ā selector priority(bajarilish tartibi)
ā Inner elements selector
ā All elements selector
6 - dars | Colors | YouTube Link
ā Color by names
ā Color by RGB
ā Color by RGBA
ā Color by HEX(...)
ā Color by HUE(...)
ā developer tools(inspect) bilan ishlash
7 - dars | Background | YouTube Link
ā background-color
ā background-image
ā background-size
ā background-cover
ā background-position
ā background-attachment
ā background shorthand
8 - dars | Border | YouTube Link
ā border nima?
ā border-style
ā border-width
ā px - tushunchasi
ā border-color
ā border-radius
ā border-radius properties
ā Soft Skills
9 - dars | margin | padding | YouTube Link
ā padding / margin shorthand
ā padding / margin-left
ā padding / margin-right
ā padding / margin-top
ā padding / margin-bottom
ā padding / margin value - 1val / 2val / 4val
ā margin va padding ishlatishdagi farqlari
- padding va marginni border bilan ishlatish farqi
- icon click dagi farqlari
- button bn ishlatilish farqlari
10 - dars | width | height | YouTube Link
ā width'ni responsive website'larda ishlatilish o'rni
ā width / min va max
ā height / min va max
ā width box examples / inherit
ā calc function
11 - dars | Navbar project | YouTube Link
ā Menu bar yasash
ā display
ā center by padding
ā highlited button
ā margin vs padding farqlari
12 - dars | Outline | YouTube Link
ā Style
ā Color
ā Width
ā Offset
13 - dars | Text | Shadow | YouTube Link
ā Text Alignment
ā RTL
ā Vertical Alignment
ā Decoration
ā Spacing
ā Shadow
14 - dars | Fonts | Google Fonts | YouTube Link
ā Size
ā Family
ā Web Safe Fonts
ā Fallbacks
ā Google Fonts
- link
- import
ā Homework
15 - dars | Landing(asosiy) sahifa Project | Boshlang'ichlar uchun | YouTube Link
ā Margin va Padding bilan ishlash
ā div containeri bilan ishlash
ā Rasm bilan ishlash
ā footer yasash
16 - dars | Flexbox 1/3 | YouTube Link
ā Flexboxni bilmaslik css ni bilmaslik degani!
ā Flexboxga kirish(basic) qisimlari
ā child parent attrabutes.
ā flex - number
ā flex-direction - column / row
ā flex-flow -shorthand
ā justify-content / align-items / align-content -
ā margin vs gap
17 - dars | Flexbox Project Basics | Boshlangichlar uchun | YouTube Link
ā Porjectni boshlashdan oldin nimalarga etibor berish kerak?
ā Strukturaga ajratish master class
ā Responsive web haqida umumiy tushuncha
ā Figma Topshiriq explanation.
18 - dars | Icons | Siz o'ylagandanda murakkabroq | YouTube link
ā Icons nima va qayerda ishlatiladi?
ā fontawesome
ā fontawesome register
ā fontawesome icons list
ā Coloring and Resizing
ā rotate va flip
ā border
ā fa-stack / overlay the icons
ā glyphicon
19 - dars | List | YouTube Link
ā List style
ā replace shapes with image
ā positioning.
ā Homework.
ADVANCED
20 - dars | Table | YouTube Link
ā Table width
ā Table border to'g'ri berish.
ā Kichik table project
ā Homework.
21 - dars | Display | YouTube Link
ā none
ā inline
ā block
ā inline-block
22 - dars | Float | YouTube Link
ā float qachon ishlatiladi?
ā flexbox vs float
ā left / right
23 - dars | Overflow | YouTube Link
ā overflow hidden
ā scroll by x, y
24 - dars | Qo'shimcha dars | Figma | YouTube Link
ā Figma bilan ishlash
ā Card yasash
ā Optimal yo'l qidirish
ā 21~23- darslar uchun vazifa.
25 - dars | Table yasashdagi kichik lifehack | YouTube Link
ā Uyga vazifani birgalikda tayorlash.
ā Table structurasini tuzish
ā div qachon ishlatish bo'yicha
26 - dars | Display | z-index | YouTube Link
ā Static
ā CSS ni yaxshi bilish js va reactda katta yordam beradi
ā Projectni sekin ishlashiga nima sabab bo'ladi?
ā relative / absolute bn ishlatilishi / general case
ā Absolute / top, left, right, bottom
ā Fixed / sms example
ā Sticky / navbar example
ā z-index haqida
ā Homework tushuntirish
27 - dars | Position mini input Project | YouTube Link
ā input with icon
ā with position / without position
ā input placeholder adjustment
28 - dara | Combinators | YouTube Link
ā decendent
ā children
ā General siblings
ā and
29 - dars | Sticky table | Uyga vazifa | YouTube Link
ā O'tilgan mavzular bo'yicha savol javob
ā 26-darsdagi vazifa, Tableni sticky qilish
ā scrollable table yasash
ā sticky table header
ā sticky table sidebar
30 - dars | Pseudo classes | YouTube Link
ā Link / active / hover / visited / unvisited
ā input pseudo classes
ā button pseudo classes
ā form elements
ā General taga 11+ pseudo classes
ā root pseudo clasini ikki holatda ishlatilishi
ā css'da variable yasash va sabablari.
31 - dars | Pseudo elements | ::before | ::after | YouTube Link
ā savol javob
ā Pseudo element va class farqi
ā first-line / first-letter
ā marker / selection
ā Before / After
ā Tooltip yasash mini project
ā CARD yasash mini project
ā inset
32 - dars | Custom Attribute selectors | YouTube Link
ā Selectos
ā Containing selector
ā exact selector
ā Starts with selector
ā Ends with selector
ā Telefon sorting algo mini project
33 - dars | Units | YouTube Link
ā px - pixel
ā vw - view width
ā vh - view height
ā em - element size
ā rem - root element size
34 - dars | Gradient Colors | YouTube Link
ā Yomon story (
ā Linear gradient / values / directions
ā Gradient Apple background yasash
ā Repeating color
ā Radial gradient
ā Conic gradient
ā Conic vs Radial
ā Conic from / at
ā Awesome project / homework
35 - dars | Text Effect | YouTube Link
ā Text shadow
ā Box shadow
ā Text overflow
ā writing mode
ā Word wrap
EXPERT
36 - dars | Transform | YouTube Link
ā translate in general case
ā translate with position
ā rotate
ā transform with multiple value
ā border-radius'ni to'g'ri ishlatish
ā cursor pointer
ā Real button yasash mini project
ā Scale / scaleX / scaleY
ā Skew / skewX / skewY
ā matrix
37 - dars | Transition | YouTube Link
ā transition - shorthand
ā transition delay
ā transition duration
ā transition property
ā timing function
ā cubic-bezier
38 - dars | Animation - 1 | YouTube Link
ā Transition bilan animation farqi.
ā Animatable css attributes
ā darsga kech qolgan studentlarning tayoq yeyishi haqida ))
ā animation with percentage unit
ā animation from{}, to{}
ā animation percentage timing
ā BOX movement mini project
ā left, right positionni to'g'ri ishlatish haqida
ā Override attributes
39 - dars | Animated Gradient background | Mini Project | YouTube Link
ā background-image animation bo'ladimi?
ā videoni to'liq tushunish uchun var(30-dars) mavzusini ko'ring.
ā @property - new feature
ā updating root variable
40 - dars | Menu Bar Animation | 2 Mini Project | YouTube Link
ā Position ishlatilgan.
ā Animation ishlatilgan
ā Menu bar animation to cancel bar
ā Menu bar animation to arrow
41 - dars | Tooltip ā ā² ā¼ āŗ belgilari | YouTube Link
ā border attributining siz bilmagan hususiyatlari.
ā tooltip yasash
ā border-color'ning 4ta qiymati
42 - dars | Image Effects | YouTube Link
ā webkit-box-reflection
ā object-fit: fill / contain / contain / cover / scale-down
ā object-position: X%, Y%
ā image filter'ning 10 xil ko'rinishi
43 - dars | Column | element resize | Box sizing | YouTube Link
ā column-count
ā coulmn-gap
ā column-rule-style
ā column-span
ā resize
ā homework explanation
44 - dars | Flexbox -2 | YouTube Link
ā flexbox - 1 / takrorlash
ā ordering child elements
ā shrinking elements
ā growing elements
ā basis
ā overriding align-items
45 - dars | Grid - 1 | Basics | YouTube Link
ā offline'da o'qish qanchalik qiyinligini real ko'rinishi ))
ā flexbox vs grid
ā gap / column, row gap
ā grid template columns / rows
ā fraction / auto / px
ā auto rows
ā justify-content
ā align-content
ā grid-area
ā grid-column-end / start
46 - dars | Grid - 2 | Advanced | Layout mini project | YouTube Link
ā grid template areas / advanced
ā navbar / sidebar / body / footer layout with areas
ā free space with area
47 - dars| Grid - 3 | Uzum market card and layout project | YouTube Link
ā uzum market product view
ā repeating the same card
ā minmax the dimensions
ā auto-fill / auto-fit
48 - dars| Grid - 4 | Image Gallery Project | YouTube Link
ā Image gallery project
ā grid-column with span value
ā grid auto flow
ā scrimba platformasi
49 - dars | RWD - 1 | Mini Project | YouTube Link
ā what is RWD?
ā what is media query ?
ā flexbox as RWD
ā width'ning RWD dagi o'rni
ā flexbox va gridning real ishlatilishidagi farqi.
ā responsive grid layout yasash
ā media print
ā orientation / portrait
50 - dars | RWD Project | YouTube Link
ā Landing page yasash
ā navbar yasash
ā medai querydan foydalanish
ā media queryda range belgilashning yangi usuli
BONUS | Coming soon...
1 - class | SVG
2 - class | -webkit
3 - class | masking
4 - class |clip-path
5 - class | parallax
6 - class | BEM methedology
BONUS Project | Coming soon...
1 - project | flexbox
2 - project | parallax
3 - project |
BONUS
Interview savollari va amaliy mashqlar: https://t.me/css_homework