Topics
- What is CSS and how the cascade works
- Including CSS: Inline, Internal, External
- Selectors, properties, values
- NEW CSS Reset vs Normalize.css
- CSS units (px, em, rem, %, vh, vw)
- Colors (HEX, RGB, HSL)
Practice Tasks
- Link external CSS to HTML
- Reset browser default styles
Outcome: Setup environment and understand browser defaults.
Topics
- Basic: Element, Class, ID
- Combinators (Descendant, Child, Sibling)
- Attribute Selectors
- Pseudo-classes (hover, focus, nth-child)
- Pseudo-elements (before, after)
- Specificity &
!important
Practice Tasks
- Build a styled navbar with hover effects
- Use
::before to add icons
Outcome: Target any element precisely.
Topics
- Content, Padding, Border, Margin
box-sizing: border-box (Crucial)- Display: block, inline, inline-block, none
- NEW
object-fit & aspect-ratio (For Images)
- Box-shadow & Border-radius
Practice Tasks
- Create a card component
- Make images responsive with object-fit
Outcome: Master spacing and basic image handling.
Topics
- Position: static, relative, absolute, fixed, sticky
- Z-index & Stacking Context
- Floats & Clearfix (Legacy but good to know)
- Centering elements (old vs new ways)
Practice Tasks
- Create a sticky header
- Build a modal/popup using absolute position
Outcome: Place elements anywhere on the screen.
Topics
- Google Fonts &
@font-face
- Line-height, letter-spacing, text-transform
- Backgrounds: Images, gradients, positions
- NEW
clip-path for custom shapes
- Text-overflow and truncation
Practice Tasks
- Design a hero section with gradient overlay
- Create a slanted background using clip-path
Outcome: Create visually stunning text and backgrounds.
Topics
- Flex Container properties (justify, align, wrap)
- Flex Item properties (grow, shrink, basis)
gap property in Flexbox- Perfect centering with Flexbox
Practice Tasks
- Build a responsive navbar
- Create a flexible card grid
Outcome: Build 1D layouts efficiently.
Topics
- Grid Template Columns/Rows (fr unit)
- Grid Areas & Template Areas
minmax() and auto-fit/auto-fill- Aligning & Justifying in Grid
Practice Tasks
- Build a responsive photo gallery (no media queries)
- Create a complex dashboard layout
Outcome: Build complex 2D layouts.
Topics
- Transitions (hover effects)
- Transforms (rotate, scale, skew, translate)
- Keyframe Animations (
@keyframes)
- NEW
scroll-behavior: smooth
Practice Tasks
- Create a loading spinner
- Animate a button on hover
Outcome: Add life and interactivity to the UI.
Topics
- Viewport Meta Tag
- Media Queries (
@media)
- Mobile-First Workflow
- NEW Container Queries (
@container)
Practice Tasks
- Make a desktop layout mobile-friendly
- Use container queries for a card component
Outcome: Websites that look good on any device.
Topics
- CSS Variables (Custom Properties)
- Functions:
calc(), clamp()
- NEW Logical Properties (margin-inline, padding-block)
- NEW
backdrop-filter (Glassmorphism)
- NEW CSS Nesting
Practice Tasks
- Implement Dark/Light mode toggle
- Create a glassmorphism card
Outcome: Write modern, maintainable CSS.
New Topics Added
- NEW
scroll-snap (CSS only Carousel)
- NEW
accent-color (Form Styling)
- NEW
mix-blend-mode (Photoshop effects)
- NEW
isolation: isolate (Z-index fix)
Practice Tasks
- Build a carousel without JavaScript
- Style custom checkboxes/radios
Outcome: Advanced UI tricks without JS.
Complete Website Build
- Build a Portfolio / E-commerce / Blog
Checklist
- Responsive Layout (Grid/Flex)
- Use Variables & Modern Reset
- Dark Mode Support
- Smooth Animations
- Accessible Forms
Outcome: Professional, deployment-ready portfolio.