CSS Tutorial

1. CSS Introduction

What CSS is, selector and property syntax, the three ways to include CSS, and specificity basics.

2. Box Model & Layout

Content, padding, border and margin, box-sizing: border-box, display types, and the position property.

3. Flexbox

A deep dive into display: flex — main and cross axes, justify-content, align-items, and flex-grow/shrink/basis.

4. CSS Grid

Two-dimensional layout with display: grid — template columns and rows, gap, grid-area, and a dashboard example.

5. Responsive Design

Media queries, mobile-first design, rem/em/%/vw/vh units, clamp(), and responsive images with srcset.

6. CSS Variables & Theming

Custom properties, scoping and fallback values, and a complete light/dark theme-switching example.

7. Animations & Transitions

transition vs @keyframes animation, easing functions, and a complete animated toast notification component.

8. Modern CSS Features

Container queries, the :has() selector, clamp()/min()/max() revisited, and cascade layers with @layer.

9. CSS Interview Questions

Commonly asked CSS interview questions with clear, practical answers.