docs/
└── tutorials/
└── css/
├── index.mdx
│
├── 01-getting-started/
│ ├── index.mdx
│ ├── what-is-css.mdx
│ ├── why-css-matters.mdx
│ ├── css-history.mdx
│ ├── css3-and-modern-css.mdx
│ ├── how-css-works.mdx
│ ├── adding-css-to-html.mdx
│ ├── inline-css.mdx
│ ├── internal-css.mdx
│ ├── external-css.mdx
│ ├── browser-developer-tools.mdx
│ └── your-first-stylesheet.mdx
│
├── 02-css-syntax/
│ ├── index.mdx
│ ├── selectors.mdx
│ ├── declarations.mdx
│ ├── properties.mdx
│ ├── values.mdx
│ ├── comments.mdx
│ ├── whitespace.mdx
│ ├── css-rules.mdx
│ ├── vendor-prefixes.mdx
│ └── css-nesting.mdx
│
├── 03-selectors/
│ ├── index.mdx
│ ├── universal-selector.mdx
│ ├── type-selector.mdx
│ ├── class-selector.mdx
│ ├── id-selector.mdx
│ ├── attribute-selectors.mdx
│ ├── grouping-selectors.mdx
│ ├── descendant-selector.mdx
│ ├── child-selector.mdx
│ ├── adjacent-sibling-selector.mdx
│ ├── general-sibling-selector.mdx
│ ├── pseudo-classes.mdx
│ ├── pseudo-elements.mdx
│ ├── :is.mdx
│ ├── :where.mdx
│ ├── :has.mdx
│ ├── :not.mdx
│ ├── nth-child.mdx
│ ├── nth-of-type.mdx
│ └── selector-best-practices.mdx
│
├── 04-cascade-specificity-inheritance/
│ ├── index.mdx
│ ├── cascade.mdx
│ ├── specificity.mdx
│ ├── inheritance.mdx
│ ├── source-order.mdx
│ ├── important.mdx
│ ├── cascade-layers.mdx
│ ├── style-origin.mdx
│ ├── computed-values.mdx
│ └── debugging-cascade.mdx
│
├── 05-colors/
│ ├── index.mdx
│ ├── named-colors.mdx
│ ├── hex-colors.mdx
│ ├── rgb.mdx
│ ├── rgba.mdx
│ ├── hsl.mdx
│ ├── hsla.mdx
│ ├── hwb.mdx
│ ├── lab.mdx
│ ├── lch.mdx
│ ├── oklab.mdx
│ ├── oklch.mdx
│ ├── alpha-transparency.mdx
│ ├── color-functions.mdx
│ └── color-accessibility.mdx
│
├── 06-units-values-functions/
│ ├── index.mdx
│ ├── px.mdx
│ ├── em.mdx
│ ├── rem.mdx
│ ├── percent.mdx
│ ├── vw-vh.mdx
│ ├── vmin-vmax.mdx
│ ├── dvh-dvw.mdx
│ ├── svh-svw.mdx
│ ├── lvh-lvw.mdx
│ ├── ch.mdx
│ ├── ex.mdx
│ ├── fr.mdx
│ ├── calc.mdx
│ ├── min-max.mdx
│ ├── clamp.mdx
│ ├── env.mdx
│ └── comparison-of-css-units.mdx
│
├── 07-box-model/
│ ├── index.mdx
│ ├── content.mdx
│ ├── padding.mdx
│ ├── border.mdx
│ ├── margin.mdx
│ ├── width.mdx
│ ├── height.mdx
│ ├── min-width.mdx
│ ├── max-width.mdx
│ ├── min-height.mdx
│ ├── max-height.mdx
│ ├── box-sizing.mdx
│ ├── margin-collapsing.mdx
│ └── box-model-debugging.mdx
│
├── 08-backgrounds/
│ ├── index.mdx
│ ├── background-color.mdx
│ ├── background-image.mdx
│ ├── background-size.mdx
│ ├── background-position.mdx
│ ├── background-repeat.mdx
│ ├── background-attachment.mdx
│ ├── background-clip.mdx
│ ├── background-origin.mdx
│ ├── multiple-backgrounds.mdx
│ ├── gradients.mdx
│ ├── linear-gradient.mdx
│ ├── radial-gradient.mdx
│ ├── conic-gradient.mdx
│ └── background-best-practices.mdx
│
├── 09-borders-shadows-effects/
│ ├── index.mdx
│ ├── border-width.mdx
│ ├── border-style.mdx
│ ├── border-color.mdx
│ ├── border-radius.mdx
│ ├── outline.mdx
│ ├── box-shadow.mdx
│ ├── text-shadow.mdx
│ ├── opacity.mdx
│ ├── filters.mdx
│ ├── backdrop-filter.mdx
│ ├── blend-modes.mdx
│ └── visual-effects.mdx
│
├── 10-typography/
│ ├── index.mdx
│ ├── font-family.mdx
│ ├── web-safe-fonts.mdx
│ ├── web-fonts.mdx
│ ├── @font-face.mdx
│ ├── font-size.mdx
│ ├── font-weight.mdx
│ ├── font-style.mdx
│ ├── font-stretch.mdx
│ ├── font-variant.mdx
│ ├── line-height.mdx
│ ├── letter-spacing.mdx
│ ├── word-spacing.mdx
│ ├── text-align.mdx
│ ├── text-indent.mdx
│ ├── text-transform.mdx
│ ├── text-decoration.mdx
│ ├── text-overflow.mdx
│ ├── white-space.mdx
│ ├── word-break.mdx
│ ├── overflow-wrap.mdx
│ ├── text-wrap.mdx
│ └── fluid-typography.mdx
│
├── 11-display-positioning/
│ ├── index.mdx
│ ├── display.mdx
│ ├── block.mdx
│ ├── inline.mdx
│ ├── inline-block.mdx
│ ├── none.mdx
│ ├── visibility.mdx
│ ├── overflow.mdx
│ ├── position-static.mdx
│ ├── position-relative.mdx
│ ├── position-absolute.mdx
│ ├── position-fixed.mdx
│ ├── position-sticky.mdx
│ ├── inset.mdx
│ ├── z-index.mdx
│ ├── stacking-context.mdx
│ └── positioning-best-practices.mdx
│
├── 12-flexbox/
│ ├── index.mdx
│ ├── flexbox-introduction.mdx
│ ├── flex-container.mdx
│ ├── flex-direction.mdx
│ ├── flex-wrap.mdx
│ ├── flex-flow.mdx
│ ├── justify-content.mdx
│ ├── align-items.mdx
│ ├── align-content.mdx
│ ├── align-self.mdx
│ ├── gap.mdx
│ ├── flex-grow.mdx
│ ├── flex-shrink.mdx
│ ├── flex-basis.mdx
│ ├── flex-shorthand.mdx
│ ├── order.mdx
│ ├── flexbox-layout-patterns.mdx
│ └── flexbox-debugging.mdx
│
├── 13-css-grid/
│ ├── index.mdx
│ ├── grid-introduction.mdx
│ ├── grid-container.mdx
│ ├── grid-template-columns.mdx
│ ├── grid-template-rows.mdx
│ ├── grid-template-areas.mdx
│ ├── grid-column.mdx
│ ├── grid-row.mdx
│ ├── grid-gap.mdx
│ ├── repeat.mdx
│ ├── minmax.mdx
│ ├── auto-fit.mdx
│ ├── auto-fill.mdx
│ ├── implicit-grid.mdx
│ ├── alignment.mdx
│ ├── subgrid.mdx
│ ├── grid-layout-patterns.mdx
│ └── grid-debugging.mdx
│
├── 14-responsive-design/
│ ├── index.mdx
│ ├── responsive-web-design.mdx
│ ├── mobile-first.mdx
│ ├── desktop-first.mdx
│ ├── media-queries.mdx
│ ├── container-queries.mdx
│ ├── responsive-images.mdx
│ ├── responsive-typography.mdx
│ ├── responsive-navigation.mdx
│ ├── responsive-layouts.mdx
│ ├── responsive-tables.mdx
│ ├── orientation.mdx
│ ├── prefers-color-scheme.mdx
│ ├── prefers-reduced-motion.mdx
│ ├── prefers-contrast.mdx
│ └── responsive-design-patterns.mdx
│
├── 15-transforms/
│ ├── index.mdx
│ ├── transform.mdx
│ ├── translate.mdx
│ ├── translate3d.mdx
│ ├── scale.mdx
│ ├── rotate.mdx
│ ├── skew.mdx
│ ├── transform-origin.mdx
│ ├── perspective.mdx
│ └── 3d-transforms.mdx
│
├── 16-transitions/
│ ├── index.mdx
│ ├── transition.mdx
│ ├── transition-property.mdx
│ ├── transition-duration.mdx
│ ├── transition-timing-function.mdx
│ ├── transition-delay.mdx
│ ├── cubic-bezier.mdx
│ └── reduced-motion.mdx
│
├── 17-animations/
│ ├── index.mdx
│ ├── css-animations.mdx
│ ├── keyframes.mdx
│ ├── animation-name.mdx
│ ├── animation-duration.mdx
│ ├── animation-timing-function.mdx
│ ├── animation-delay.mdx
│ ├── animation-iteration-count.mdx
│ ├── animation-direction.mdx
│ ├── animation-fill-mode.mdx
│ ├── animation-play-state.mdx
│ ├── animation-shorthand.mdx
│ ├── loading-animations.mdx
│ ├── micro-interactions.mdx
│ └── accessible-animations.mdx
│
├─ ─ 18-modern-css/
│ ├── index.mdx
│ ├── css-custom-properties.mdx
│ ├── css-variables.mdx
│ ├── css-nesting.mdx
│ ├── cascade-layers.mdx
│ ├── container-queries.mdx
│ ├── :has.mdx
│ ├── :is-and-where.mdx
│ ├── popover-styling.mdx
│ ├── anchor-positioning.mdx
│ ├── scroll-driven-animations.mdx
│ ├── view-transitions.mdx
│ ├── color-functions.mdx
│ ├── relative-colors.mdx
│ ├── style-queries.mdx
│ └── modern-css-strategy.mdx
│
├── 19-css-functions/
│ ├── index.mdx
│ ├── calc.mdx
│ ├── min.mdx
│ ├── max.mdx
│ ├── clamp.mdx
│ ├── var.mdx
│ ├── env.mdx
│ ├── rgb.mdx
│ ├── hsl.mdx
│ ├── color-mix.mdx
│ ├── linear-gradient.mdx
│ ├── radial-gradient.mdx
│ ├── conic-gradient.mdx
│ └── css-function-cheatsheet.mdx
│
├── 20-css-shapes-and-clipping/
│ ├── index.mdx
│ ├── clip-path.mdx
│ ├── circle.mdx
│ ├── polygon.mdx
│ ├── ellipse.mdx
│ ├── inset.mdx
│ ├── border-radius-shapes.mdx
│ ├── shape-outside.mdx
│ ├── object-fit.mdx
│ └── object-position.mdx
│
├── 21-css-accessibility/
│ ├── index.mdx
│ ├── accessible-color.mdx
│ ├── color-contrast.mdx
│ ├── focus-styles.mdx
│ ├── keyboard-navigation.mdx
│ ├── reduced-motion.mdx
│ ├── readable-typography.mdx
│ ├── responsive-accessibility.mdx
│ ├── accessible-forms.mdx
│ ├── forced-colors.mdx
│ └── accessibility-testing.mdx
│
├── 22-css-performance/
│ ├── index.mdx
│ ├── css-performance-basics.mdx
│ ├── render-blocking-css.mdx
│ ├── critical-css.mdx
│ ├── unused-css.mdx
│ ├── css-minification.mdx
│ ├── css-compression.mdx
│ ├── css-loading.mdx
│ ├── animation-performance.mdx
│ ├── gpu-friendly-properties.mdx
│ ├── layout-thrashing.mdx
│ └── css-core-web-vitals.mdx
│
├── 23-css-architecture/
│ ├── index.mdx
│ ├── css-architecture.mdx
│ ├── naming-conventions.mdx
│ ├── bem.mdx
│ ├── smacss.mdx
│ ├── itcss.mdx
│ ├── utility-first.mdx
│ ├── component-based-css.mdx
│ ├── design-tokens.mdx
│ ├── css-variables-architecture.mdx
│ ├── scalable-css.mdx
│ ├── maintainable-css.mdx
│ └── css-code-review.mdx
│
├── 24-css-frameworks/
│ ├── index.mdx
│ ├── css-frameworks-overview.mdx
│ ├── bootstrap.mdx
│ ├── tailwind-css.mdx
│ ├── bulma.mdx
│ ├── foundation.mdx
│ ├── css-modules.mdx
│ ├── styled-components.mdx
│ └── choosing-a-css-approach.mdx
│
├── 25-css-with-javascript/
│ ├── index.mdx
│ ├── dom-class-manipulation.mdx
│ ├── classlist.mdx
│ ├── inline-style-api.mdx
│ ├── css-custom-properties-js.mdx
│ ├── dynamic-themes.mdx
│ ├── dark-mode.mdx
│ ├── theme-switching.mdx
│ └── css-and-react.mdx
│
├── 26-css-design-systems/
│ ├── index.mdx
│ ├── design-system-introduction.mdx
│ ├── design-tokens.mdx
│ ├── color-system.mdx
│ ├── typography-system.mdx
│ ├── spacing-system.mdx
│ ├── sizing-system.mdx
│ ├── border-system.mdx
│ ├── elevation-system.mdx
│ ├── component-tokens.mdx
│ ├── themes.mdx
│ └── scalable-design-system.mdx
│
├── 27-ui-patterns/
│ ├── index.mdx
│ ├── navbar.mdx
│ ├── sidebar.mdx
│ ├── hero-section.mdx
│ ├── cards.mdx
│ ├── buttons.mdx
│ ├── forms.mdx
│ ├── modals.mdx
│ ├── dropdowns.mdx
│ ├── tooltips.mdx
│ ├── tabs.mdx
│ ├── accordions.mdx
│ ├── breadcrumbs.mdx
│ ├── pagination.mdx
│ ├── tables.mdx
│ ├── badges.mdx
│ ├── alerts.mdx
│ ├── skeleton-loaders.mdx
│ ├── spinners.mdx
│ └── empty-states.mdx
│
├── 28-projects/
│ ├── index.mdx
│ ├── profile-card.mdx
│ ├── landing-page.mdx
│ ├── portfolio.mdx
│ ├── blog-layout.mdx
│ ├── pricing-page.mdx
│ ├── login-page.mdx
│ ├── registration-page.mdx
│ ├── dashboard.mdx
│ ├── admin-dashboard.mdx
│ ├── ecommerce-page.mdx
│ ├── restaurant-website.mdx
│ ├── documentation-site.mdx
│ ├── responsive-gallery.mdx
│ ├── dark-mode-website.mdx
│ ├── design-system.mdx
│ └── final-css-project.mdx
│
├── 29-challenges/
│ ├── index.mdx
│ ├── beginner/
│ │ ├── challenge-01.mdx
│ │ ├── challenge-02.mdx
│ │ ├── challenge-03.mdx
│ │ └── ...
│ ├── intermediate/
│ │ ├── challenge-01.mdx
│ │ ├── challenge-02.mdx
│ │ └── ...
│ └── advanced/
│ ├── challenge-01.mdx
│ ├── challenge-02.mdx
│ └── ...
│
├── 30-quiz/
│ ├── index.mdx
│ ├── css-basics-quiz.mdx
│ ├── selectors-quiz.mdx
│ ├── box-model-quiz.mdx
│ ├── flexbox-quiz.mdx
│ ├── grid-quiz.mdx
│ ├── responsive-design-quiz.mdx
│ ├── animation-quiz.mdx
│ ├── accessibility-quiz.mdx
│ └── final-css-quiz.mdx
│
├── 31-interview-preparation/
│ ├── index.mdx
│ ├── css-interview-questions.mdx
│ ├── beginner-css-questions.mdx
│ ├── intermediate-css-questions.mdx
│ ├── advanced-css-questions.mdx
│ ├── selectors-questions.mdx
│ ├── flexbox-questions.mdx
│ ├── grid-questions.mdx
│ ├── responsive-design-questions.mdx
│ ├── animation-questions.mdx
│ ├── accessibility-questions.mdx
│ ├── performance-questions.mdx
│ └── frontend-interview-css.mdx
│
├── 32-reference/
│ ├── index.mdx
│ ├── selectors.mdx
│ ├── properties/
│ │ ├── align-content.mdx
│ │ ├── align-items.mdx
│ │ ├── background.mdx
│ │ ├── border.mdx
│ │ ├── color.mdx
│ │ ├── display.mdx
│ │ ├── flex.mdx
│ │ ├── font.mdx
│ │ ├── gap.mdx
│ │ ├── grid.mdx
│ │ ├── height.mdx
│ │ ├── margin.mdx
│ │ ├── max-width.mdx
│ │ ├── opacity.mdx
│ │ ├── padding.mdx
│ │ ├── position.mdx
│ │ ├── transform.mdx
│ │ ├── transition.mdx
│ │ ├── animation.mdx
│ │ └── z-index.mdx
│ ├── functions.mdx
│ ├── units.mdx
│ ├── pseudo-classes.mdx
│ ├── pseudo-elements.mdx
│ ├── at-rules.mdx
│ ├── media-features.mdx
│ └── browser-compatibility.mdx
│
└── assets/
├── images/
├── diagrams/
├── examples/
└── screenshots/