CSS - 2023 | Updated 2025
Ushbu postda CSS'dan bilishingiz kerak bo‘lgan barcha asosiy ma’lumotlar jamlangan. Agar post sizga dasturlashni o‘rganishda foydali va manfaatli bo'lgan bo‘lsa, g‘oyibona duo qilishingizning o‘zi kifoya.
Hurmat bilan Foziljon Azimov.
BASICS
— 1-dars —
1 - ma'lumot | CSS ga kirish | CSS nima?
— HTML dan suhbat
— HTML, CSS, JavaScript vazifalari
— Dasturchilar css o'rniga kutubxonalar ishlatish sabablari.
— CSS versiyalari haqida, CSS2 va CSS3
— CSS file larni sozlab olish
2 - ma'lumot | HTML va CSS ni bog'lash
— Inline style
— Internal style
— External style
3 - ma'lumot| Selectorlar
— Selectorlar nima maqsadda ishlatiladi?
— HTML taglar orqali malumotlarga style berish
— ID attrabute orqali malumotlarga style berish
— class attrabute orqali malumotlarga style berish
— selector priority | specificity (bajarilish tartibi)
— All elements selector
4 - ma'lumot| Attribute selectors
— [attr]
— [attr="value"]
— [attr~="value"]
— [attr|="value"]
— [attr^="value"]
— [attr$="value"]
— [attr*="value"]
5 - ma'lumot| Combinators
— space
— >
— +
— ~
— ,
6 - ma'lumot | Colors
— Color by names
— Color by RGB
— Color by RGBA
— Color by HEX(...)
— developer tools(inspect) bilan ishlash
7 - ma'lumot | Background
— background-color
— background-image
— background-repeat
— background-size
— background-position
— background-attachment
— background shorthanded(color url() position/size repeat attachment)
Homework ———>
— 2-dars —
8 - ma'lumot | Border
— border nima?
— border-style
— border-width
— px - tushunchasi
— border-color
— border-radius
— border-radius qiymatlari
9 - ma'lumot | margin | padding
— padding / margin
— padding / margin-left
— padding / margin-right
— padding / margin-top
— padding / margin-bottom
— padding / margin value - 1val / 2val / 3val / 4val
— margin va padding ishlatilishidagi farqlari
— box-sizing
10 - ma'lumot | width | height | display properties
— width ni responsive website larda ishlatilish o'rni
— width / min va max
— height / min va max
— inline / block / inline-block
11 - ma'lumot | Text | Shadow
— text-align, vertical-align
— Right, Top, Left
— Decoration
— Spacing (x) (letter, word)
— Line-height (y)
— Shadow
12 - ma'lumot | Fonts | Google Fonts
— Size / clamp(), min(), max()
— Style
— Family
— Weight
— Display
— Google Fonts
13 - ma'lumot | List — List style
Homework ———>
— 3-dars —
14 - ma'lumot | Flexbox
— Flexboxni bilmaslik css ni bilmaslik degani!
— Flexboxga kirish(basic) qisimlari
— child parent attributes.
--parent codes--
— justify-content / align-items
— flex-direction - column / row
— flex-wrap | flex-flow
— align-content
— margin vs gap
--child codes--
— flex-grow
— flex-shrink
— flex-basis
— flex - number (shorthanded)
— align-self
— order
15 - ma'lumot | Flexbox Project Basics
— Project'ni boshlashdan oldin nimalarga etibor berish kerak?
— Strukturaga ajratish master class
— Figma bilan ishlash
16 - ma'lumot | Icons | Siz o'ylagandanda murakkabroq
— Icons nima va qayerda ishlatiladi?
— fontawesome
— fontawesome register
Homework ———>
ADVANCED
— 4-dars —
17 - ma'lumot | Table
— Table width
— Table border to'g'ri berish.
— Kichik table project
18 - ma'lumot | Display
— none
— inline
— block
— inline-block
— visibility | hidden, visible
19 - ma'lumot| Float
— float qachon ishlatiladi?
— flexbox vs float
— left / right
20 - ma'lumot | Overflow
— overflow hidden
— scroll by x, y
21 - ma'lumot | Amaliy mashg'ulot
— Card yasash
— Optimal yo'l qidirish
Homework ———>
— 5-dars —
22 - ma'lumot | Position | z-index
— Static
— CSS ni yaxshi bilish js va reactda katta yordam beradi
— Projectni sekin ishlashiga nima sabab bo'ladi?
— relative / absolute ishlatilish o'rni
— Absolute / top, left, right, bottom (inset - shorthanded)
— Fixed / sms example
— Sticky / navbar example
— z-index haqida
23 - ma'lumot | Pseudo classes | :hover | :active ...
— hover / active / focus / link / visited
— input pseudo classes
— button pseudo classes
24 - ma'lumot | Pseudo elements | ::before | ::after ...
— Pseudo element va class farqi
— before / after
— first-line / first-letter
— marker / selection
— placeholder
25 - ma'lumot | Units
— px - pixel
— % - foiz
— vw - viewport width
— vh - viewport height
— 1 viewport = ekranning 1% qismiga teng
— em - element size
— rem - root element size
Homework ———>
— 6-dars —
26 - ma'lumot | Gradient Colors
— Linear gradient
— Radial gradient
— Conic gradient
27 - ma'lumot | Shadow
— Text shadow
— Box shadow
28 - ma'lumot | Transform
— translate
— rotate
— scale
— skew
— cursor pointer
— transform shorthanded
29 - ma'lumot | Transition
— transition property
— transition duration
— timing-function
— transition delay
— cubic-bezier
— transition shorthanded
30 - ma'lumot | Animation
— Transition bilan animation farqi.
— Animatable
— animation from{}, to{}
— animation percentage timing (%)
— name
— duration
— timing-function
— delay
— iteration-count
— direction
— fill-mode
— play-state
— timeline
Homework ———>
— 7-dars —
31 - ma'lumot | Grid
— flexbox vs grid, farqlari
--parent codes--
— grid-template-columns / rows
— grid-auto-columns / rows
— grid-auto-flow
— fraction(fr) / auto / px
— gap (column / row)
— justify / align - content
----------
— [1] [2] [3]
----------
— justify / align - items
-----------------
— [ 1 ] [ 2 ] [ 3 ]
-----------------
— place-content / items
— grid-template-areas | layout example
— repeat() | auto-fill | auto-fit | minmax()
---------------------------
— [ 1 ] [ 2 ] [ 3 ] [ ] [ ]
---------------------------
--------------------------------
— [ 1 ] [ 2 ] [ 3 ]
--------------------------------
— direction
--child codes--
— grid-column | grid-row
— grid-area
— order
— justify / align - self
32 - ma'lumot | Media query
— media querydan foydalanish
— width / max-min
— media width ning o'lchamlari(breakpoints)
— orientation
33 - ma'lumot | BEM
— BEM metodologiyasi haqida tushincha
34 - ma'lumot | Create optimal project
— css'da variable yasash va sabablari.
— calc() function'dan foydalanish.
— generic code'lardan foydalanish.
Homework ———>