E-Tutorial
Sign In Get Started
Tutorials Courses Interview Prep (100 Q&A) AI Tools (50) Developer Tools (50) Tracks Pricing Plans Blog & Articles Contact Us
Home / Courses / CSS / Modern CSS & Responsive Design Masterclass
CSS Beginner Free Course

Modern CSS & Responsive Design Masterclass

Master CSS3 stylesheets from fundamentals and specificity to modern Flexbox, CSS Grid, animations, and custom properties.

20 hours 55 Lessons Certificate (Pass Score: 75%)
Start Course Free

What's Included

  • Full step-by-step interactive reader
  • Practice exercises with solutions
  • Quizzes & Knowledge Assessments
  • Verifiable Digital PDF Certificate
A

Alex Morgan (Senior Engineer)

Lead Instructor

Curriculum & Chapters

CSS Syntax, Inclusion Methods & The Cascade
12 mins Free
CSS Selectors, Combinators & Specificity
16 mins Free
CSS Introduction, Three Ways to Insert CSS & The Cascade
15 mins Free
CSS Simple Selectors (Element, Class, ID, Universal)
15 mins Free
CSS Combinators (Descendant, Child, Adjacent, General Sibling)
15 mins Free
CSS Pseudo-classes (:hover, :focus, :nth-child, :is, :where)
15 mins Free
CSS Pseudo-elements (::before, ::after, ::placeholder)
15 mins Free
CSS Specificity Calculations & The !important Rule
15 mins Free
CSS Inheritance & The unset/revert Keywords
15 mins Free
The CSS Box Model & Universal box-sizing: border-box Reset
15 mins Free
CSS Padding, Margin & Margin Collapse Behavior
15 mins Free
CSS Borders, Outlines & border-radius Shapes
15 mins Free
CSS Display Property (block, inline, inline-block, none)
15 mins Free
CSS Positioning (static, relative, absolute, fixed, sticky)
15 mins Free
CSS Stacking Contexts & z-index Layering
15 mins Free
CSS Overflow (hidden, scroll, auto, clip) & Text Truncation
15 mins Free
CSS Flexbox: Complete One-Dimensional Layouts
22 mins Free
CSS Grid: Complete Two-Dimensional Layouts
25 mins Free
CSS Color Formats (HEX, RGB, HSL, modern OKLCH)
15 mins Free
CSS Typography & Font Properties (font-family, @font-face, font-weight)
15 mins Free
CSS Text Styling (line-height, letter-spacing, text-transform)
15 mins Free
CSS Backgrounds, Multi-Backgrounds & Gradients
15 mins Free
CSS Box Shadows, Text Shadows & Drop Shadows
15 mins Free
CSS Backdrop Filters (backdrop-filter: blur(10px))
15 mins Free
CSS Opacity, Visibility & Display:none Differences
15 mins Free
Media Queries & Mobile-First Breakpoints
18 mins Free
Flexbox Architecture & The Main / Cross Axis Concept
15 mins Free
Flex Container Properties (flex-direction, flex-wrap, flex-flow)
15 mins Free
Flexbox Alignment (justify-content, align-items, align-content)
15 mins Free
Flex Item Sizing (flex-grow, flex-shrink, flex-basis shorthand)
15 mins Free
Flexbox Ordering & Align-Self Overrides
15 mins Free
Building Common UI Layouts with Flexbox (Cards, Navbars, Footers)
15 mins Free
CSS Custom Properties (CSS Variables) & Theming
15 mins Free
CSS Transitions, Transforms & @keyframes Animations
16 mins Free
CSS Grid Architecture & Explicit vs Implicit Grids
15 mins Free
Grid Columns, Rows & The Fractional Unit (fr)
15 mins Free
Responsive Grids with repeat(auto-fit, minmax(280px, 1fr))
15 mins Free
Grid Item Placement & grid-column / grid-row Spanning
15 mins Free
Named Grid Template Areas (grid-template-areas)
15 mins Free
CSS Grid Alignment & Gap Spacing (row-gap, column-gap)
15 mins Free
CSS Subgrid: Nested Child Track Synchronization
15 mins Free
CSS Subgrid & Cascade Layers (@layer)
18 mins Free
Viewport Sizing & Modern CSS Units (rem, em, vh, vw, dvh, ch)
15 mins Free
Mobile-First Media Queries (@media (min-width: ...))
15 mins Free
CSS clamp(), min(), max() Mathematical Fluid Functions
15 mins Free
CSS Container Queries (@container) for Component Responsiveness
15 mins Free
CSS prefers-reduced-motion & prefers-color-scheme Media Features
15 mins Free
CSS Print Stylesheets (@media print)
15 mins Free
CSS Custom Properties (CSS Variables) & Dynamic Dark Theming
15 mins Free
CSS Transitions (transition-property, duration, timing-function)
15 mins Free
CSS 2D and 3D Transforms (translate, rotate, scale, skew, matrix)
15 mins Free
CSS Keyframe Animations (@keyframes, animation-iteration, fill-mode)
15 mins Free
CSS Scroll-Driven Animations (animation-timeline: scroll())
15 mins Free
CSS Cascade Layers (@layer) for Specificity Architecture
15 mins Free
CSS Nesting Native Specification (Standard CSS Nesting)
15 mins Free