Learn
🤖 AI Hub 📰 News 📖 Dictionary 🧰 Resources
Grow
💼 Jobs 🚀 Community 🏆 Challenges
Explore by Stage
🌑 Zero 📚 Learn 🔧 Practice 🏗 Build 🚀 Launch 💰 Earn
Account
Login Sign Up
🏗️HTML 🎨CSS ⚡JavaScript 🐙Git & GitHub ⚛️React Soon 📘TypeScript Soon 🐍Python 🗄️Database & SQL Soon 🌐Web Development Soon ☁️Cloud & DevOps Soon 🤖AI & ML Soon 📄Resume Prep Soon 🎤Interview Prep Soon 💼Freelancing Soon 🚀SaaS & Side Projects Soon 🤖Automation Soon
🎨

CSS

Style your pages: colours, fonts, Flexbox, Grid, animations, dark mode and responsive design.

All (13) Beginner (13) Intermediate (12) Advanced (5)
Lesson 1
What is CSS? — Making Websites Look Good
CSS controls the visual appearance of your web pages — colors, fonts, spacing, and layout. Learn how CSS works...
Lesson 2
CSS Selectors — Targeting HTML Elements Precisely
CSS selectors determine which elements get styled. Learn element, class, ID, attribute, and combination select...
Lesson 3
CSS Colors & Typography — Making Text Look Great
Colors and typography set the tone of your website. Learn hex, RGB, HSL colors, Google Fonts, font sizes, line...
Lesson 4
Fonts in CSS: font-family, Google Fonts and Readable Text
Learn how font-family and fallbacks work, add free Google Fonts (including a Hindi font) and use weight, line-...
Lesson 5
Backgrounds and Gradients: Colours, Images and Banners
Use background colours, images, cover and contain, the background shorthand and linear and radial gradients to...
Lesson 6
Borders, Rounded Corners and Shadows
Add borders, rounded corners, circle avatars, pill badges and soft box shadows to build clean product cards fo...
Lesson 7
The CSS Box Model — Padding, Margin, Border, Content
Every HTML element is a box. Understanding the CSS box model is essential for controlling spacing and layout. ...
Lesson 8
CSS Units: px, %, em, rem, vw and vh
Understand absolute and relative CSS units, avoid the em compounding trap and choose between px, %, em, rem, v...
Lesson 9
Width, Height, max-width and Overflow
Control the size of boxes with width, height, min and max values, keep images and text safe on phones, and han...
Lesson 10
CSS Display Property — Block, Inline, and Inline-Block
The display property controls how elements flow on a page. Learn the difference between block, inline, and inl...
Lesson 11
Pseudo-classes: :hover, :focus, :nth-child and More
Style elements by state and position with :hover, :active, :focus-visible, :nth-child, :not and form pseudo-cl...
Lesson 12
Styling Lists and Tables
Style lists with custom markers and turn them into navigation menus, then build clean, striped, phone-friendly...
Lesson 13
CSS Flexbox — Modern Layout Made Easy
Flexbox is the modern way to create layouts in CSS. Learn flex containers, flex items, alignment, spacing, and...