CSS kursi

Interview uchun eng muhim CSS — Flexbox, Grid, pozitsiya, responsive va animatsiyalar.

Boshlang'ich · 33 ta dars · ~3 hafta

Mavzular: Selektorlar, Box model, Flexbox, CSS Grid, Pozitsiyalash, Responsive, Animatsiyalar, CSS o'zgaruvchilari

CSS Asoslari

  1. CSS nima? Brauzer qanday qo'llaydi, Cascade nima
  2. Selektorlar — element, class, id, universal
  3. Selektorlar — attribute, pseudo-class, pseudo-element
  4. Kombinatorlar — descendant, child, sibling
  5. Specificity — qaysi stil ustunlik qiladi va nima uchun
  6. CSS o'zgaruvchilar — Custom Properties, var()

Box Model va Matn

  1. Box Model — content, padding, border, margin (tez kunda)
  2. box-sizing — content-box va border-box farqi (tez kunda)
  3. Margin collapse muammosi va yechimi (tez kunda)
  4. Overflow — visible, hidden, scroll, auto (tez kunda)
  5. CSS Units — px, em, rem, %, vw, vh, ch (tez kunda)
  6. Font va Text — family, size, weight, align, decoration (tez kunda)

Layout — Flexbox

  1. Flexbox nima va nima uchun kerak (tez kunda)
  2. Flex Container — flex-direction, flex-wrap, gap (tez kunda)
  3. Flex Container — justify-content, align-items, align-content (tez kunda)
  4. Flex Item — flex-grow, flex-shrink, flex-basis, order, align-self (tez kunda)
  5. Flexbox bilan amaliy layoutlar — nav, card, markazlash (tez kunda)

Layout — Grid

  1. Grid nima va Flexbox dan qachon farq qiladi (tez kunda)
  2. Grid Container — template-columns, rows, gap, fr birlik (tez kunda)
  3. Grid — template-areas, nomlangan zonalar (tez kunda)
  4. Grid Item — grid-column, grid-row, span (tez kunda)
  5. Grid — auto-fill, auto-fit, minmax (tez kunda)

Pozitsiya va Responsive

  1. Position — static, relative, absolute, fixed, sticky (tez kunda)
  2. Z-index va Stacking Context (tez kunda)
  3. Responsive Design — Mobile First kontseptsiyasi (tez kunda)
  4. Media Queries — min-width, max-width, orientation (tez kunda)
  5. Responsive Typography — clamp(), fluid typography (tez kunda)

Animatsiya va Ilg'or mavzular

  1. Transition — property, duration, timing-function, delay (tez kunda)
  2. Transform — translate, rotate, scale, skew (tez kunda)
  3. Animation — @keyframes, animation xususiyatlari (tez kunda)
  4. Pseudo-class — :is(), :where(), :has(), :not() (tez kunda)
  5. CSS Functions — calc(), min(), max(), clamp() (tez kunda)
  6. BEM — Block Element Modifier metodologiyasi (tez kunda)