100% LIVE CLASS · NEW BATCH

Complete CSS live class — basics to pro level.

Eight live, mentor-led sessions that take you from your first CSS rule to Flexbox, Grid, animations and a complete multipage website you host yourself. Part of the Kodyfier Full Stack live classes.

₹99 ₹3,999 97% OFF · LAUNCH PRICE
0.0
Student rating
0+
Students trained
0
Live sessions
Live online CSS class with the Kodyfier instructor and students on a video call
DURATION
2 weeks · live
SESSIONS
8 live classes
LEVELS
Basics → Advanced → Pro
OUTCOME
10+ projects + certificate
display: gridgrid-template-columns@keyframestransform: rotate3d()linear-gradient()backdrop-filter: blur()clamp():has()aspect-ratiovar(--brand)position: stickyobject-fit: cover@container:nth-child()box-shadowtransition: .3s easeflex: 1 1 autoz-indexfilter: hue-rotate()::beforeoverflow: hidden@media (min-width)display: gridgrid-template-columns@keyframestransform: rotate3d()linear-gradient()backdrop-filter: blur()clamp():has()aspect-ratiovar(--brand)position: stickyobject-fit: cover@container:nth-child()box-shadowtransition: .3s easeflex: 1 1 autoz-indexfilter: hue-rotate()::beforeoverflow: hidden@media (min-width)
</> SEE IT MOVING

Everything moving on this page is CSS. Yes, these too.

No images, no libraries, no JavaScript — just the properties you will be writing yourself by session 7.

display: flex; transform: scaleY();

@keyframes + rotate3d() + perspective

linear-gradient() + hue-rotate()

01 — WHY THIS CLASS

Stop fighting layouts. Start designing them.

CSS is where most beginners quit — centering breaks, layouts collapse on mobile, nothing looks like the design. Taught live, you get unstuck in minutes instead of days.

100% Live Classes

Every session is taught live — not a pre-recorded playlist. Ask, interrupt, and code along in real time.

Daily Doubt Sessions

A property not behaving? A layout collapsing? Dedicated doubt-clearing time so nothing stays broken overnight.

Flexbox & Grid, Properly

The two layout systems every modern site runs on, taught until they feel obvious — not copy-pasted from Stack Overflow.

Animations That Look Pro

Transforms, transitions, keyframes and perspective — build 10+ animated components you can drop into any project.

Performance & Clean Code

BEM and SMACSS naming, CSS variables, nesting and optimization so your stylesheets stay fast and maintainable.

Ship It Live

Finish with a complete multipage website, tested, SEO-ready and hosted on a real URL you can share.

02 — COURSE TOPICS

Three levels. Every CSS topic that matters.

Nothing is skipped and nothing is padded — here is the exact topic list, level by level.

BASICS
  • What is CSS?
  • CSS rule structure
  • How to use CSS in HTML
  • Types of selectors
  • Comments in CSS
  • Colors & background properties
  • CSS units & dimensions
  • Fonts & text properties
  • CSS box model
  • Border, padding & margin
  • CSS display, floats etc.
  • CSS positions & z-index
  • CSS overflow
ADVANCED
  • CSS3 gradients
  • CSS3 shadows & filters
  • CSS combinators
  • CSS pseudo class & element
  • CSS3 column layout
  • CSS3 Flexbox & Grid
  • CSS3 animations & transform
  • Transitions & perspective
  • CSS specificity & prefixes
  • CSS media & container queries
  • CSS BEM, SMACSS etc.
  • CSS3 variables, nesting etc.
  • New CSS3 features & bonus
PRO LEVEL
  • 50+ interview questions
  • 30+ tips & tricks
  • Complete notes + codes
  • 100+ animated slides
  • 10+ animated projects
  • Project — complete multipage website using HTML & CSS
  • CSS performance and optimization
  • SEO + testing + LIVE hosting (free & paid)
03 — SYLLABUS

Eight sessions, two weeks.

Every topic in the order that actually makes sense — each session built around live coding, not slides being read out.

01
SESSION 1 LIVE

CSS foundations & every selector

Understand what CSS really is, how the browser applies it, and how to target exactly the element you mean.

What is CSS? CSS Rule Structure Inline, Internal & External CSS Element, Class & ID Selectors Attribute & Group Selectors Comments in CSS
02
SESSION 2 LIVE

Colors, units & typography

Make things look intentional — the color systems, sizing units and text properties real designers use.

Color Names, HEX, RGB & HSL Background Properties px, %, em, rem, vh & vw Font Families & Google Fonts Text Align, Spacing & Decoration Line Height & Letter Spacing
03
SESSION 3 LIVE

The box model & spacing

The single concept that explains why your layout is 20px off — learned properly, once and for all.

Content, Padding, Border, Margin Box Sizing & Border Box Margin Collapse Width, Height & Max/Min CSS Overflow Borders & Border Radius
04
SESSION 4 LIVE

Display, floats, position & z-index

Control exactly where an element sits on the page and which element wins when two overlap.

Block, Inline & Inline-Block Floats & Clearing Static, Relative & Absolute Fixed & Sticky Positioning Z-index & Stacking Context Visibility vs Display
05
SESSION 5 LIVE

Flexbox, Grid & column layout

The two layout engines behind every modern website — built live, from simple rows to full page templates.

Flex Container & Items Justify, Align & Flex Wrap Grid Template Rows & Columns Grid Areas, Gap & Auto-Fit CSS3 Multi-Column Layout Real Page Layouts Built Live
06
SESSION 6 LIVE

Responsive design, gradients & effects

Make one site look right on every screen, then add the depth and polish that makes it look premium.

Media Queries & Breakpoints Container Queries Mobile-First Workflow CSS3 Gradients Box & Text Shadows CSS Filters & Blend Modes
07
SESSION 7 LIVE

Animations, transforms & advanced selectors

Bring the page to life — transitions, keyframes, 3D perspective, plus the selectors that remove extra markup.

Transitions & Timing Functions Transform: Translate, Rotate, Scale Keyframe Animations Perspective & 3D Transforms Combinators (>, +, ~) Pseudo Classes & Pseudo Elements
08
SESSION 8 LIVE

Pro level: architecture, performance & hosting

Write CSS like a professional, then ship your capstone website to a live URL anyone can visit.

CSS Variables & Nesting BEM, SMACSS & Naming Specificity & Vendor Prefixes Performance & Optimization SEO, Testing & Validation Capstone: Multipage Website + Live Hosting
04 — WHAT YOU BUILD

Real, designed, responsive builds.

Styled from scratch in class with HTML and CSS only — plus 10+ smaller animated components along the way.

Personal Portfolio Website

A polished, fully responsive portfolio with a hero section, project grid, animated cards and a contact layout — styled entirely by you.

Flexbox Grid Hover Animations

Responsive Landing Page

A premium SaaS-style landing page with gradients, shadows, sticky navigation and breakpoints for mobile, tablet and desktop.

Media Queries Gradients Sticky Nav

Multipage Website (Capstone)

Your final project: a complete multipage website with a shared design system, product cards and consistent layout — then hosted live.

Design System Multipage Live Hosting
05 — WHAT'S INCLUDED

Everything you get for ₹99.

The class is live, but nothing disappears after it ends — the notes, codes, slides and recordings stay yours.

8 Live Sessions

Taught live, doubts cleared on the spot.

Lifetime Recordings

Every session recorded to your dashboard.

Complete Notes + Codes

All source code and written notes included.

100+ Animated Slides

The exact slides used to explain each concept.

10+ Animated Projects

Small builds you can reuse anywhere.

50+ Interview Questions

The CSS questions interviewers actually ask.

30+ Tips & Tricks

Shortcuts and habits that save hours.

Verified Certificate

Awarded after your capstone submission.

LIMITED TIME LAUNCH PRICE

The whole CSS live class. Just ₹99.

Cost shouldn't be the reason anyone can't start. Reserve your seat and get all eight sessions, the recordings, complete notes, 100+ slides and every project file.

₹99 ₹3,999
Lifetime recordings Complete notes & codes Verified certificate
06 — FAQ

Questions, answered.

Basic HTML helps, but it is not compulsory. We revise the little bit of markup you need in the first session, then build everything in CSS from scratch. If you have never touched CSS before, this class is designed exactly for you.
Yes — all of it. Flexbox, CSS Grid, multi-column layout, transitions, transforms, keyframe animations and 3D perspective each get proper live sessions, not a passing mention.
Yes. CSS is one module of our Full Stack live program, and this page lets you join just the CSS part at a token price of ₹99 instead of buying the whole program.
Yes! Every live session is recorded and uploaded to your dashboard, and you get the complete notes, source codes and 100+ animated slides used in class. Lifetime access.
Classes are scheduled in the evenings, typically between 8:00 PM and 9:30 PM (IST) on weekdays, making it perfect for college students and working professionals.
Yes! Once you complete all eight sessions and submit your multipage website capstone project, you will be awarded a verified Kodyfier completion certificate.
This is a limited-time launch price so that cost is never the reason someone can't start learning to code. The token fee simply keeps seats reserved for students who genuinely show up.
Complete CSS Live Class
New batch · seats filling
₹99 ₹3,999