CSS
1-Month CSS Course Structure
Week 1: CSS Basics & Selectors
Goal: Learn what CSS is, how it works, and all major selectors.
Day 1: Introduction to CSS
What is CSS?
Inline, Internal, External CSS
CSS syntax (selectors, properties, values)
Linking CSS to HTML
Day 2: Colors & Units
Color formats (hex, rgb, rgba, hsl)
Units: px, %, em, rem, vh, vw
Day 3: CSS Selectors – Part 1
Element selector
Class & ID
Universal selector
Grouping selectors
Day 4: CSS Selectors – Part 2
Descendant selector
Child selector
Adjacent sibling selector
Attribute selectors
Day 5: Box Model
Margin, padding, border
Content box vs border box
box-sizing
Day 6: Display Types
block, inline, inline-block
visibility vs display
Day 7: Practice Task
Create a profile card UI using box model, colors, and selectors.
Week 2: Layouts, Positioning, Flexbox
Goal: Understand page layout systems and modern CSS design.
Day 8: Positioning
static, relative, absolute, fixed, sticky
z-index
Day 9: Floating & Clearing
float, clear
Creating simple layouts with float (legacy but important)
Day 10: Flexbox – Basics
display: flex
justify-content
align-items
flex-direction
Day 11: Flexbox – Advanced
flex-wrap
flex-grow, flex-shrink, flex-basis
align-content
gap property
Day 12: CSS Grid – Basics
grid-template-columns
grid-template-rows
gap
fr units
Day 13: CSS Grid – Advanced
grid areas
repeat()
minmax()
auto-fit vs auto-fill
Day 14: Practice Task
Build a full webpage layout using Flexbox and Grid.
Week 3: Typography, Styling, Transitions & Animations
Goal: Learn professional styling, effects, and animations.
Day 15: Typography
font-size, font-weight, font-style
Using Google Fonts
Line-height, letter-spacing
Day 16: Backgrounds
background-color
background-image
gradients
background-position
background-size
Day 17: Borders & Shadows
border styles
box-shadow
text-shadow
border-radius
Day 18: CSS Transitions
transition-property
transition-duration
hover effects
Day 19: CSS Animations
@keyframes
animation properties (delay, duration, timing-function)
Infinite animations
Day 20: Transformations
translate, scale, rotate, skew
2D and 3D transforms
Day 21: Practice Task
Create a beautiful landing page hero section
with animation + hover effects.
Week 4: Responsive Design, Frameworks & Projects
Goal: Build real, responsive, aesthetic designs.
Day 22: Responsive Design Basics
Media queries
Breakpoints
Responsive units
Day 23: Mobile-First Design
Mobile-first vs desktop-first
Responsive navbar
Day 24: CSS Variables
Declaring variables
Using var()
Theme switching basics
Day 25: CSS Functions
calc()
clamp()
min(), max()
Day 26: Modern CSS Tools
BEM naming convention
Normalize CSS
CSS resets
Day 27: CSS Frameworks (Optional Intro)
Tailwind CSS basics
Bootstrap basics
Day 28: Mini Project – 1
Build a responsive portfolio website.
Day 29: Mini Project – 2
Build a product landing page with animations.
Day 30: Final Project
Build a fully responsive multi-page website
(Home, About, Services, Contact).
Skills Gained After 1 Month
✔ Deep understanding of CSS fundamentals
✔ Professional layouts with Flexbox & Grid
✔ Responsive design for all devices
✔ Smooth animations & UI effects
✔ Ability to build modern website interfaces
✔ Ability to use CSS frameworks confidently