Advanced CSS: Flexbox, Grid & Responsiveness

style.css|index.html
1 / 6
CSS Editor
Element 1
<div>
Element 2
<div>.box
Class Match
Element 3
<div>.box#hero
ID Match

Specificity Scoreboard

ID
0
-
Class
0
-
Type
0
Winner: Universal (*)

A.D.A:Welcome to the CSS arena. When multiple rules match an element, how does the browser decide which style wins? It's called Specificity.

Advanced CSS: Flexbox, Grid & Responsiveness

Duration: 2.0 hours
Lessons: 15
(4.7)

Take your CSS skills to the next level. Design responsive and complex layouts using Flexbox, CSS Grid, and media queries for a flawless user experience on any device.

Curriculum

  • Advanced Selectors and Specificity
  • Font and Text Styles
  • Box Model and Display Properties
  • Introduction to Flexbox
  • Flex Container Properties
  • Flex Item Properties
  • Introduction to CSS Grid
  • Designing with CSS Grid
  • Grid Areas and Templates
  • Media Queries for Responsiveness
  • Relative and Absolute Units
  • CSS Transitions and Transforms
  • CSS Animations
  • Custom CSS Variables
  • Pseudo-classes and Pseudo-elements
  • CSS Optimization