Day 1: Selectors & Logic
Start styling. Learn how to target HTML elements using ID, Class, and Tag selectors. Understand specificity and the cascade.
Day 2: Colors & Backgrounds
Add life to your pages. Master Hex codes, RGB, HSL, and learn to create stunning background gradients.
Day 3: The Box Model
The foundation of layout. Understand Margin, Border, Padding, and why `box-sizing: border-box` is your best friend.
Day 4: Typography & Fonts
Words matter. Learn how to style text, load custom web fonts (Google Fonts), and control hierarchy with weights and sizes.
Day 5: Flexbox Basics
Layouts made easy. Finally understand how `display: flex`, `justify-content`, and `align-items` work.
Day 6: Advanced Flexbox
Mastering the flex container. Learn about wrapping items, gaps, and managing item sizing with grow and shrink.
Day 7: CSS Grid
2D Layout Power. Learn how to create complex grid systems, define columns and rows, and use Grid Areas.
Day 8: Responsive Design
One code, every device. Learn to use Media Queries (`@media`) to make your site adapt to desktops, tablets, and phones.
Day 9: Animations & Transitions
Make it move. Learn how to create smooth transitions on hover and complex keyframe animations.
Day 10: Final Project
Put it all together. Build a beautiful, responsive Landing Page using Flexbox, Grid, and Animations.