Complete Free Course · Hindi + English
CSS in 20 Days – Job-Ready, Hindi + English
Turn plain HTML into beautiful, responsive websites. Every lesson solves a real client problem with live previews you can try on the page – colours, typography, box model, Flexbox, Grid, responsive design, dark mode, animations and reusable components – then you build a coaching landing page and redesign a complete 6-page business website.
- 1Days 1–3: Selectors, colours, fonts
- 2Days 4–6: Box model, cascade, position
- 3Days 7–8: Flexbox
- 4Days 9–10: Grid + dashboard
- 5Days 11–12: Responsive + dark mode
- 6Days 13–14: Motion
- 7Days 15–18: Forms, UI kit, BEM, frameworks
- 8Days 19–20: Two projects
📊
Admin dashboard (Day 10)Grid areas + KPI cards + chart🧩
UI component kit (Day 16)Buttons, tabs, modal, toast🎓
Coaching landing page (Day 19)Responsive, dark mode, mobile menu🍬
Business redesign (Day 20)6 pages, one stylesheetWhat you will learn
- How CSS works: rules, selectors, external stylesheets
- Colours (hex, rgb, hsl), units (rem, %, vw) and gradients
- Typography with Google Fonts – English and Hindi
- The box model, box-sizing and a modern reset
- Specificity, the cascade and debugging in DevTools
- Position: badges, sticky headers, floating buttons
- Flexbox: navbars, card rows, sticky footers
- Grid: galleries, page layouts, admin dashboards
- Mobile-first responsive design and container queries
- CSS variables, clamp() and dark mode
- Transitions, transforms and keyframe animations
- Beautiful forms and responsive tables
- A reusable component kit and BEM architecture
- Bootstrap 5 and Tailwind CSS – when to use which
- Two portfolio projects with complete explanations
🎨 Days 1–6 – CSS Foundations
6 Days
01
Day 1: What is CSS? Syntax, Linking & Basic Selectors
02
Day 2: Colours, Units, Backgrounds & Gradients
03
Day 3: Typography: Fonts, Text & Google Fonts
04
Day 4: The Box Model: Margin, Padding, Border
05
Day 5: Advanced Selectors, Specificity & Cascade
06
Day 6: Display, Position, z-index & Overflow
📐 Days 7–12 – Layout & Responsive Design
6 Days✨ Days 13–18 – Motion, UI & Professional CSS
6 Days🚀 Days 19–20 – Projects
2 DaysFrequently Asked Questions
Do I need to know HTML first?
Yes, the basics. Our 15-day HTML course is the ideal start – this course styles the same Sharma Sweets website you built there.
Is CSS enough to get a front-end job?
HTML + CSS make you able to build and style any page. Add our 30-day JavaScript course to reach junior front-end level; the projects here become strong portfolio pieces.
Do you teach Bootstrap and Tailwind?
Yes, on Day 18 – after you understand real CSS, so you can customise frameworks instead of fighting them.
How much time does it take per day?
About 1.5 to 2 hours per day including practice; the project days take 3–7 hours. It is 100% self-paced.
Where are the files?
Log in and use “Download All Examples + Projects”: every example as an .html file, practice solutions, images and both complete projects.
