CSS Complete Course Notes
Basics to Advanced
Har topic ke saath: Explanation + Code + Dry Run + Practice Task + Projects
Is file ko kaise use kare
• Pehle topic padhkar code khud VS Code me type karo. Copy-paste mat karo.
• Dry run ko line-by-line samjho: browser CSS ko kaise apply karta hai.
• Har topic ke baad task complete karo. Task ke bina topic complete mat mano.
• Mini project aur final project portfolio me add kar sakte ho.
• HTML + CSS ke baad JavaScript/React ke UI banane me ye notes direct kaam aayenge.
Table of Contents
• CSS Setup & Syntax
• Selectors
• Colors and Units
• Text and Fonts
• Box Model
• Display
• Positioning
• Flexbox
• Grid
• Responsive Design
• Backgrounds and Gradients
• Forms Styling
• Tables Styling
• Transitions and Transform
• Animations
• Variables and Functions
• Pseudo Classes and Elements
• Images, Object-fit and Filters
• Shadows and Effects
• Modern CSS
• Accessibility
• CSS Architecture
• Tailwind/Bootstrap Overview
• Debugging
• Project Bank
• Final Mega Projects
• Interview Questions
1. CSS Setup & Syntax
CSS page ka design language hai. HTML structure deta hai, CSS layout, color, size, spacing aur responsive behavior
deta hai.
Code Example
/* External CSS file: [Link] */
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f7fb;
}
h1 {
color: #1e3a8a;
text-align: center;
}
Dry Run / Kaise kaam karta hai
• Browser HTML read karta hai aur linked CSS file load karta hai.
• body selector poore page par apply hota hai.
• margin:0 default body gap hata deta hai.
• h1 selector sabhi h1 ko blue aur center karta hai.
Practice Task
• Ek [Link] aur [Link] banao.
• Page me h1, p, button add karo.
• External CSS se h1 ka color, body ka background aur button ka padding set karo.
Project Add-on
• Personal introduction webpage banao jisme heading, photo placeholder, about paragraph aur contact button ho.
2. CSS Selectors
Selector decide karta hai ki CSS kis HTML element par lagegi. Selector master karna CSS ka base hai.
Code Example
* { box-sizing: border-box; }
p { color: #333; }
.card { padding: 20px; border: 1px solid #ddd; }
#main-title { font-size: 36px; }
.card p { line-height: 1.6; }
.card > h2 { margin-top: 0; }
input[type="email"] { border-color: royalblue; }
Dry Run / Kaise kaam karta hai
• * universal selector sab elements ko target karta hai.
• .card class wale element ko padding aur border milta hai.
• #main-title sirf ek unique id ko target karta hai.
• .card p ka matlab card ke andar ke sab p.
• .card > h2 ka matlab direct child h2.
Practice Task
• 10 HTML elements banao aur class/id selector use karo.
• Descendant aur child selector ka difference example se dikhao.
• Attribute selector se email input ko style karo.
Project Add-on
• Blog card component banao: title, category, author, paragraph. Selectors use karke nested styling karo.
3. Colors and Units
CSS me colors aur units responsive design ke liye bahut important hain. px fixed hota hai, rem scalable hota hai, %
parent ke according hota hai.
Code Example
:root { font-size: 16px; }
.box {
width: 80%;
max-width: 600px;
padding: 2rem;
background: rgba(59, 130, 246, 0.15);
color: hsl(222, 47%, 20%);
min-height: 50vh;
}
Dry Run / Kaise kaam karta hai
• root font-size 16px hai, isliye 2rem = 32px.
• width 80% parent ke width ka 80% lega.
• max-width 600px box ko bahut bada nahi hone dega.
• rgba me last value opacity hai.
• 50vh viewport height ka aadha hota hai.
Practice Task
• px, %, rem, vh ka ek-ek box banao.
• Ek card ko mobile friendly banane ke liye width:90% aur max-width use karo.
• Same color HEX, RGB, HSL me likho.
Project Add-on
• Responsive pricing card banao jisme rem spacing aur % width ka use ho.
4. Text and Fonts
Typography website ko professional banata hai. Font size, line height, weight aur spacing readability decide karte hain.
Code Example
body {
font-family: "Inter", Arial, sans-serif;
}
.article-title {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
}
.article-text {
font-size: 1rem;
line-height: 1.7;
text-align: justify;
}
Dry Run / Kaise kaam karta hai
• font-family pehla available font use karta hai.
• clamp minimum 2rem, preferred 5vw, maximum 4rem rakhta hai.
• line-height 1.7 text ko readable banata hai.
• letter-spacing negative title ko compact banata hai.
Practice Task
• Ek article page banao.
• Heading me clamp use karo.
• Paragraph me line-height 1.6 ya 1.7 rakho.
Project Add-on
• News article layout banao: headline, date, author, body text aur quote section.
5. Box Model
Har element ek box hota hai: content, padding, border, margin. Layout samajhne ke liye box model compulsory hai.
Code Example
.card {
width: 300px;
padding: 20px;
border: 2px solid #ddd;
margin: 30px auto;
box-sizing: border-box;
border-radius: 16px;
}
Dry Run / Kaise kaam karta hai
• width 300px total card width banega kyunki box-sizing border-box hai.
• padding content ke andar gap deta hai.
• border padding ke bahar line hai.
• margin card ke bahar gap deta hai.
• margin auto left-right center karta hai.
Practice Task
• 3 cards banao aur margin/padding ka difference observe karo.
• box-sizing content-box aur border-box ka difference test karo.
• Border-radius se rounded card banao.
Project Add-on
• Product card banao: image, title, price, button. Proper padding, margin, border radius use karo.
6. Display
display property element ka layout behavior decide karti hai: block, inline, inline-block, none, flex, grid.
Code Example
span { display: inline; }
[Link] {
display: inline-block;
padding: 12px 20px;
background: #2563eb;
color: white;
text-decoration: none;
}
.hidden { display: none; }
Dry Run / Kaise kaam karta hai
• inline element width/height normally accept nahi karta.
• inline-block inline flow me rehta hai lekin padding/width accept karta hai.
• display:none element ko page se completely hata deta hai.
Practice Task
• span ko block banao aur difference dekho.
• Anchor tag ko button jaisa style karo.
• display none aur visibility hidden ka difference note karo.
Project Add-on
• Navbar buttons banao jisme anchor tags inline-block hon.
7. Positioning
Position property element ko normal flow se relative/absolute/fixed/sticky behavior deti hai.
Code Example
.parent { position: relative; height: 250px; }
.badge {
position: absolute;
top: 12px;
right: 12px;
}
.navbar {
position: sticky;
top: 0;
z-index: 10;
}
Dry Run / Kaise kaam karta hai
• parent relative hone se absolute child isi parent ke according move karega.
• badge top-right corner me chipkega.
• sticky navbar scroll karte waqt top par chipak jayega.
• z-index overlap order control karta hai.
Practice Task
• Card ke top-right me sale badge lagao.
• Fixed WhatsApp button bottom-right me banao.
• Sticky navbar create karo.
Project Add-on
• Ecommerce product card banao jisme discount badge absolute position se lage.
8. Flexbox
Flexbox one-dimensional layout ke liye best hai: row ya column me elements align karna.
Code Example
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.menu {
display: flex;
gap: 16px;
}
Dry Run / Kaise kaam karta hai
• display:flex children ko row me arrange karta hai.
• justify-content horizontal space distribute karta hai.
• align-items vertical alignment karta hai.
• gap children ke beech space deta hai.
Practice Task
• Logo left aur menu right wala navbar banao.
• 3 cards ko flex se same row me rakho.
• Mobile par flex-direction column karo.
Project Add-on
• Responsive landing page header banao with logo, nav links, login button.
9. CSS Grid
Grid two-dimensional layout ke liye use hota hai: rows + columns. Dashboard, gallery aur complex layouts me important
hai.
Code Example
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.item {
min-height: 160px;
border-radius: 12px;
}
Dry Run / Kaise kaam karta hai
• auto-fit available width ke hisab se columns banata hai.
• minmax(220px,1fr) ka matlab column minimum 220px, extra space me grow.
• gap rows aur columns dono me space deta hai.
Practice Task
• Responsive image gallery banao.
• Grid me 6 cards add karo.
• Ek item ko grid-column: span 2 do.
Project Add-on
• Admin dashboard layout banao: sidebar, header, stats cards, chart area.
10. Responsive Design
Responsive design ka matlab website mobile, tablet, laptop sab par sahi dikhni chahiye.
Code Example
.container { width: min(90%, 1100px); margin: auto; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) {
.cards { grid-template-columns: 1fr; }
.hero { text-align: center; }
}
Dry Run / Kaise kaam karta hai
• Desktop par cards 3 columns me rahenge.
• Screen 768px se chhoti hui to cards single column ho jayenge.
• container 90% width lega but 1100px se bada nahi hoga.
Practice Task
• Desktop-first aur mobile-first dono ka example banao.
• Navbar mobile par column me convert karo.
• Hero section mobile par center align karo.
Project Add-on
• Complete responsive portfolio homepage banao.
11. Backgrounds and Gradients
Background image, gradient aur overlay modern UI me bahut use hota hai.
Code Example
.hero {
min-height: 80vh;
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
url("[Link]") center/cover no-repeat;
color: white;
display: flex;
align-items: center;
}
Dry Run / Kaise kaam karta hai
• Pehla layer gradient overlay hai.
• Doosra layer image hai.
• center/cover image ko crop karke area cover karata hai.
• no-repeat image repeat nahi hone deta.
Practice Task
• Gradient button banao.
• Hero section me background image + dark overlay lagao.
• Radial gradient ka circle background banao.
Project Add-on
• Travel landing page hero section banao with call-to-action.
12. Forms Styling
Forms user input ke liye hota hai. Professional form me spacing, focus state, validation style important hai.
Code Example
input, select, textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 10px;
outline: none;
}
input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
Dry Run / Kaise kaam karta hai
• Input full width lega.
• Padding typing area comfortable banata hai.
• focus par border blue ho jayega.
• box-shadow focus ring banata hai jo accessibility me helpful hai.
Practice Task
• Login form banao.
• Focus effect add karo.
• Required field ke liye red border class banao.
Project Add-on
• Checkout form banao: name, phone, address, payment method, confirm button.
13. Tables Styling
Tables data show karne ke liye use hota hai. CSS se readable table banana important hai.
Code Example
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f1f5f9; }
tr:hover { background: #f8fafc; }
Dry Run / Kaise kaam karta hai
• border-collapse separate borders ko merge karta hai.
• th header row ko background milta hai.
• tr:hover row ko highlight karta hai.
• padding data ko readable banata hai.
Practice Task
• Student marks table style karo.
• Alternate row color add karo.
• Mobile par table ko overflow-x:auto me rakho.
Project Add-on
• Employee salary dashboard table banao.
14. Transitions and Transform
Transition smooth change deta hai. Transform element ko move, rotate, scale karta hai.
Code Example
.btn {
transition: transform .3s ease, background .3s ease;
}
.btn:hover {
transform: translateY(-4px) scale(1.03);
background: #1d4ed8;
}
Dry Run / Kaise kaam karta hai
• Normal state me button stable hai.
• Hover par transform button ko upar aur thoda bada karta hai.
• transition change ko smooth karta hai.
Practice Task
• Button hover effect banao.
• Card hover par image zoom karo.
• Icon rotate effect banao.
Project Add-on
• Interactive product card banao jisme hover par shadow, image zoom, button color change ho.
15. Animations
Animation repeated ya timeline-based movement ke liye use hota hai.
Code Example
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ball {
animation: bounce 1s infinite ease-in-out;
}
Dry Run / Kaise kaam karta hai
• Browser keyframes ke 0%,50%,100% states follow karta hai.
• 1s me animation complete hoti hai.
• infinite se repeat hoti rahegi.
• ease-in-out start/end smooth banata hai.
Practice Task
• Loading spinner banao.
• Fade-in animation banao.
• Card entry animation banao.
Project Add-on
• Animated landing page banao jisme hero text fade-in aur button bounce kare.
16. CSS Variables and Functions
Variables reusable values ke liye use hoti hain. calc, min, max, clamp dynamic values ke liye useful hain.
Code Example
:root {
--primary: #2563eb;
--space: 1rem;
}
.card {
padding: var(--space);
border: 2px solid var(--primary);
width: calc(100% - 40px);
}
Dry Run / Kaise kaam karta hai
• --primary ek custom variable hai.
• var(--primary) us value ko use karta hai.
• calc 100% width me se 40px minus karta hai.
• Variable change karne se poori theme change ho sakti hai.
Practice Task
• Theme variables banao: primary, dark, light.
• Button, card, navbar me same variable use karo.
• Dark mode ke liye variables change karo.
Project Add-on
• Theme switch ready UI banao: light/dark classes ke saath.
17. Pseudo Classes and Elements
Pseudo classes state target karti hain. Pseudo elements virtual content create karte hain.
Code Example
.link:hover { color: #2563eb; }
.list li:nth-child(even) { background: #f1f5f9; }
.title::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #2563eb;
}
Dry Run / Kaise kaam karta hai
• hover mouse state target karta hai.
• nth-child(even) even list items select karta hai.
• ::after title ke baad fake element create karta hai.
• content empty ho sakta hai lekin pseudo element ke liye required hai.
Practice Task
• Menu links me hover underline banao.
• List ke odd/even items style karo.
• Heading ke neeche ::after line banao.
Project Add-on
• Section title component banao jisme animated underline ho.
18. Images, Object-fit and Filters
Images ko proper ratio me dikhane ke liye object-fit use hota hai. Filters visual effect dete hain.
Code Example
.avatar {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 50%;
}
.card img:hover {
filter: brightness(.8) contrast(1.1);
}
Dry Run / Kaise kaam karta hai
• width/height square area banata hai.
• object-fit:cover image ko crop karke fill karta hai.
• border-radius:50% circular image banata hai.
• hover par image dark/contrast hogi.
Practice Task
• Profile avatar banao.
• Product image fixed ratio me rakho.
• Image hover filter effect add karo.
Project Add-on
• Team members section banao with circular photos and hover effect.
19. Shadows and Effects
Box shadow depth deta hai. Text shadow title effects ke liye use hota hai.
Code Example
.card {
box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.card:hover {
box-shadow: 0 20px 45px rgba(0,0,0,.18);
}
.hero-title { text-shadow: 0 4px 12px rgba(0,0,0,.4); }
Dry Run / Kaise kaam karta hai
• box-shadow values: x-offset, y-offset, blur, color.
• Hover par shadow larger ho kar lift effect deta hai.
• Text shadow background image par title readable banata hai.
Practice Task
• 3 shadow styles banao: small, medium, large.
• Hover lift effect create karo.
• Hero title me text shadow lagao.
Project Add-on
• Modern SaaS feature cards section banao.
20. Modern CSS Features
Modern CSS me container queries, scroll snap, aspect-ratio, accent-color, logical properties jaise features aate hain.
Code Example
.video {
aspect-ratio: 16 / 9;
width: 100%;
background: #ddd;
}
.slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide { scroll-snap-align: start; min-width: 80%; }
Dry Run / Kaise kaam karta hai
• aspect-ratio height automatically ratio ke hisab se set karta hai.
• slider horizontal scroll allow karta hai.
• scroll-snap-type smooth snap behavior banata hai.
• slide start point par snap hota hai.
Practice Task
• Responsive video box banao.
• Horizontal card slider banao.
• accent-color se checkbox style karo.
Project Add-on
• Mobile testimonial carousel section banao using scroll snap.
21. Accessibility and Good CSS
Accessible CSS ka matlab UI sab users ke liye usable ho: keyboard, screen reader, low vision.
Code Example
.btn:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
Dry Run / Kaise kaam karta hai
• focus-visible keyboard users ko focus indicator deta hai.
• outline-offset outline ko element se thoda door karta hai.
• prefers-reduced-motion animation sensitive users ke liye motion reduce karta hai.
Practice Task
• Sab buttons me focus-visible add karo.
• Color contrast check karo.
• Reduced motion media query add karo.
Project Add-on
• Accessible login page banao with labels, focus state, readable colors.
22. CSS Architecture
Large projects me CSS organize karna zaroori hai. BEM, utility classes, component-based CSS helpful hain.
Code Example
.card {}
.card__title {}
.card__text {}
.card--featured {}
.u-center { text-align: center; }
.u-mt-2 { margin-top: 1rem; }
Dry Run / Kaise kaam karta hai
• BEM me block card hai.
• __title element hai jo card ka part hai.
• --featured modifier hai jo card ka variation hai.
• Utility classes small reusable helpers hain.
Practice Task
• Ek card component ko BEM naming se style karo.
• 5 utility classes banao.
• CSS file ko base, layout, components sections me divide karo.
Project Add-on
• Mini design system banao: buttons, cards, forms, spacing utilities.
23. Debugging CSS
CSS debug karne ke liye browser DevTools sabse important hai.
Code Example
/* Debug helper */
* { outline: 1px solid red; }
/* Common fix */
img { max-width: 100%; display: block; }
Dry Run / Kaise kaam karta hai
• Outline se har element ka box visible hota hai.
• DevTools me computed styles actual applied values dikhata hai.
• img max-width overflow prevent karta hai.
• display:block image ke neeche ka extra inline gap hata sakta hai.
Practice Task
• DevTools se margin/padding inspect karo.
• Broken layout me outline helper use karo.
• Ek overflowing image fix karo.
Project Add-on
• Purana messy page lekar spacing, overflow aur responsive bugs fix karo.
23. CSS Frameworks: Bootstrap and Tailwind Overview
Frameworks ready-made classes dete hain. Pehle plain CSS strong karo, phir Bootstrap/Tailwind use karo.
.btn { padding: 12px 20px; border-radius: 8px; }
/* Tailwind idea: class="px-5 py-3 rounded-lg bg-blue-600 text-white" */
/* Bootstrap idea: class="btn btn-primary" */
Dry Run / Kaise kaam karta hai
• Plain CSS me class khud likhte ho.
• Tailwind me utility classes HTML me likhte ho.
• Bootstrap me ready components milte hain.
Practice Task
• Same button ko plain CSS, Bootstrap style idea, Tailwind style idea me compare karo.
• Ek card ko utility-first thinking se design karo.
Project Add-on
• Portfolio ka ek section Tailwind-like utility classes se recreate karo.
24. Project Bank - Basic to Advanced
Level Project What to build
Level 1 Profile Card HTML card, image, name, role, social
links, hover effect.
Level 1 Login Form Centered form, labels, inputs, focus
effect, button hover.
Level 1 Pricing Card Plan name, price, features list, CTA
button.
Level 2 Responsive Navbar Desktop row menu, mobile column menu,
sticky top.
Level 2 Product Card Grid Grid layout, product image, price, badge,
responsive columns.
Level 2 Blog Homepage Hero, category cards, article list, sidebar.
Level 2 Restaurant Menu Food cards, categories, order button,
mobile responsive.
Level 3 Portfolio Website Home, about, skills, projects, contact
form, responsive.
Level 3 Ecommerce UI Navbar, hero, filters, product grid, cart
sidebar UI.
Level 3 Admin Dashboard Sidebar, topbar, stats cards, table, chart
placeholder, responsive.
Level 3 Education Landing Page Hero, courses grid, testimonials, FAQ,
footer.
Level 4 Netflix-style UI Hero banner, horizontal scroll rows, cards
hover zoom, dark theme.
Level 4 SaaS Landing Page Gradient hero, feature cards, pricing,
FAQ, CTA, modern effects.
Level 4 Job Portal UI Search bar, job cards, filters, company
cards, responsive layout.
Level 5 Complete Design System Colors, spacing, typography, buttons,
cards, alerts, forms, tables.
Level 5 Advanced Portfolio Animations, dark mode, case study
pages, project gallery.
Level 5 Full Ecommerce Frontend Homepage, product listing, detail page,
checkout form, responsive.
Level 5 Responsive Admin Panel Dashboard, analytics cards, user table,
sidebar collapse UI, mobile layout.
25. Final Mega Projects with Requirements
Mega Project 1: Personal Portfolio Website
Requirements
• Pages/sections: Home, About, Skills, Projects, Contact, Footer.
• Use Flexbox for navbar and hero alignment.
• Use Grid for projects section.
• Use CSS variables for theme colors.
• Add mobile responsive media queries.
• Add button hover, card hover and smooth scrolling.
• Bonus: dark mode class and animated section title.
Submission Checklist
• Desktop view complete
• Mobile view complete
• No horizontal overflow
• All buttons have hover/focus
• Code organized in sections
• Screenshots ready for portfolio
Mega Project 2: Ecommerce Frontend UI
Requirements
• Homepage with hero banner, categories, featured products.
• Product listing with grid auto-fit/minmax.
• Product card with sale badge absolute position.
• Checkout form with focus states and payment method.
• Responsive navbar and mobile product grid.
• Bonus: sticky cart summary and image hover zoom.
Submission Checklist
• Desktop view complete
• Mobile view complete
• No horizontal overflow
• All buttons have hover/focus
• Code organized in sections
• Screenshots ready for portfolio
Mega Project 3: Admin Dashboard
Requirements
• Sidebar, topbar, stats cards, recent orders table.
• CSS Grid for full page layout.
• Flexbox for topbar and cards content.
• Responsive: sidebar becomes top menu on mobile.
• Use shadows, border radius, variables.
• Bonus: dark dashboard theme.
Submission Checklist
• Desktop view complete
• Mobile view complete
• No horizontal overflow
• All buttons have hover/focus
• Code organized in sections
• Screenshots ready for portfolio
Mega Project 4: Course Selling Landing Page
Requirements
• Hero section with CTA, course cards, instructor section.
• Pricing plans and FAQ accordion UI style.
• Testimonials carousel with scroll snap.
• Responsive typography using clamp.
• Accessible focus states.
• Bonus: animated gradient background.
Submission Checklist
• Desktop view complete
• Mobile view complete
• No horizontal overflow
• All buttons have hover/focus
• Code organized in sections
• Screenshots ready for portfolio
26. CSS Interview Questions
Q. CSS box model kya hota hai?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. class aur id selector me difference?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. position relative vs absolute?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. Flexbox aur Grid me difference?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. rem aur em me difference?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. z-index kab work nahi karta?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. Media query kya hoti hai?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. Pseudo class aur pseudo element difference?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. box-sizing border-box kyu use karte hain?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. Specificity ka order kya hota hai?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. display none vs visibility hidden?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. object-fit cover kya karta hai?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. CSS variable ka benefit?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. transition aur animation difference?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
Q. Mobile-first CSS ka matlab?
Answer: Iska answer apne words me likho, phir code example ke saath revise karo.
27. 30-Day CSS Practice Plan
Days Work
Day 1-3 Syntax, selectors, colors, units
Day 4-6 Typography, box model, display
Day 7-9 Position, overflow, shadows
Day 10-13 Flexbox deep practice
Day 14-17 Grid deep practice
Day 18-20 Responsive design and media queries
Day 21-23 Forms, tables, accessibility
Day 24-26 Transitions, transforms, animations
Day 27-28 Modern CSS, variables, architecture
Day 29-30 Mega project build and polish