🎨

CSS

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

All (30) Beginner (13) Intermediate (12) Advanced (5)

🌱 Beginner 13 lessons

Start here. No experience needed.

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...

Beginner 2 min

Lesson 2

CSS Selectors — Targeting HTML Elements Precisely

CSS selectors determine which elements get styled. Learn element, class, ID, attribute, and combination select...

Beginner 2 min

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...

Beginner 2 min

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-...

Beginner 15 min

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...

Beginner 14 min

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...

Beginner 14 min

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. ...

Beginner 2 min

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...

Beginner 13 min

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...

Beginner 14 min

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...

Beginner 2 min

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...

Beginner 17 min

Lesson 12

Styling Lists and Tables

Style lists with custom markers and turn them into navigation menus, then build clean, striped, phone-friendly...

Beginner 19 min

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...

Beginner 2 min

⚙️ Intermediate 12 lessons

You know the basics. Build real skills.

Lesson 14

CSS Positioning — Static, Relative, Absolute, Fixed, Sticky

CSS positioning controls exactly where elements appear on a page. Learn static, relative, absolute, fixed, and...

Intermediate 3 min

Lesson 15

CSS Variables — Reusable Values with Custom Properties

CSS variables (custom properties) let you define values once and reuse them everywhere. Essential for themes, ...

Intermediate 2 min

Lesson 16

Responsive Design & Media Queries — Mobile-First CSS

Learn how to make websites that look great on any screen size. Understand media queries, breakpoints, mobile-f...

Intermediate 2 min

Lesson 17

CSS Grid Basics: Rows, Columns and Gaps

Learn CSS Grid step by step: create columns and rows with px, fr and repeat(), add gaps, and make items span s...

Intermediate 12 min

Lesson 18

CSS Grid Layouts: Template Areas and Responsive Grids

Build full page layouts with grid-template-areas, make cards wrap with auto-fit and minmax(), rearrange areas ...

Intermediate 14 min

Lesson 19

Specificity and the Cascade: Which CSS Rule Wins?

Find out why some CSS rules win and others are ignored. Learn the cascade, count specificity, understand inher...

Intermediate 12 min

Lesson 20

CSS Transitions: Smooth Changes on Hover and Focus

Make buttons and cards change smoothly with CSS transitions. Learn duration, timing functions, delay and the s...

Intermediate 12 min

Lesson 21

CSS Transforms: Move, Rotate, Scale and Skew

Move, rotate, scale and skew elements with CSS transforms, change the transform origin and build a 3D flip car...

Intermediate 12 min

Lesson 22

CSS Animations with @keyframes

Create CSS animations with @keyframes: loading spinners, staggered dots, a pausing offer banner and a flickeri...

Intermediate 12 min

Lesson 23

Pseudo-elements: ::before, ::after and More

Add sale ribbons, decorative quotes, underlines and drop caps with CSS pseudo-elements like ::before, ::after ...

Intermediate 12 min

Lesson 24

Styling Forms: Inputs, Buttons and Focus States

Style HTML forms that are easy to use on any phone: consistent inputs, labels, focus states, accent-color, sel...

Intermediate 16 min

Lesson 25

z-index and Stacking: What Sits on Top

Understand why z-index sometimes does nothing. Learn the default stacking order, stacking contexts and a clean...

Intermediate 14 min

🚀 Advanced 5 lessons

Go deeper, write professional code and build projects.

Lesson 26

Responsive Layout Patterns That Work on Every Screen

Learn the responsive patterns professionals use every day: fluid containers, stack to columns, sidebars, auto-...

Advanced 19 min

Lesson 27

Dark Mode with CSS Variables

Build a real dark mode for a study planner: colour tokens in custom properties, prefers-color-scheme, the colo...

Advanced 17 min

Lesson 28

Organising CSS: BEM Naming and a Clean Structure

Stop CSS fights in team projects. Learn BEM naming (block, element, modifier), keep specificity flat and organ...

Advanced 16 min

Lesson 29

Modern CSS: clamp(), :has(), Container Queries and Nesting

Use the modern CSS features that replace old tricks: clamp(), min() and max(), aspect-ratio, logical propertie...

Advanced 17 min

Lesson 30

Project: Build a Restaurant Landing Page with HTML and CSS

Build a complete, responsive landing page for a South Indian restaurant step by step: design tokens, sticky he...

Advanced 45 min 🔨 Project