Premium Course
A Comprehensive course to master CSS. From novice to master
497 questions
56 lessons
~12h 26m
About This Course
This course guides you in learning css
Ad space
What You'll Learn
29 topicsCSS Concepts
CSS Basics
CSS Typography & Text
Web Typography
CSS Selectors & Combinators
CSS Performance & Rendering
Abbreviations
CSS Units & Values
CSS Architecture (BEM/SMACSS/ITCSS)
CSS Color & Gradients
CSS Abbreviations
CSS Layout: Flexbox
CSS Responsive Design & Media Queries
CSS Cascade, Specificity & Inheritance
CSS Layout: Grid
Modern CSS (Nesting, :has, Layers)
CSS Transitions & Animations
CSS SVG Styling
CSS Custom Properties & Variables
CSS Visual Effects
CSS Forms & UI
CSS Box Model
CSS Accessibility
CSS Transforms
CSS Functions & Math
CSS Printing
CSS Scroll & Overscroll
CSS Layout: Legacy & Misc
CSS Layout: Positioning
What You'll focus on
50 keywordsCSS
Cascading Style Sheets
CSS Basics
CSS Selectors
Box Model
CSS Specificity
CSS Cascade
Flexbox
CSS Grid
Responsive Design
Media Queries
CSS Variables
Custom Properties
CSS Animations
CSS Transitions
Keyframe Animations
Web Typography
Font Properties
CSS Layout
Positioning
CSS Pseudo-classes
CSS Pseudo-elements
CSS Preprocessors
SASS
LESS
CSS-in-JS
BEM Methodology
CSS Reset
CSS Normalization
CSS Performance
Critical CSS
Container Queries
CSS :has()
CSS Nesting
CSS Logical Properties
CSS Clamp
CSS Functions
CSS Z-index
Stacking Context
CSS Overflow
CSS Transforms
CSS Filters
CSS Blend Modes
Web Design
Front-end Development
LinkedIn CSS Assessment
CSS Interview Questions
Beginner CSS
Advanced CSS
CSS Mastery
Learn Path
56 lessonsHere's exactly what you'll learn, step by step. Sign up — it's free — to unlock every lesson.
Lesson 1 - CSS Abbreviations - Why are CSS background images not considered for Largest Contentful Paint (LCP)?
Lesson 2 - CSS Responsive Design & Media Queries - What does '@media (update: slow)' target?
Lesson 3 - CSS SVG Styling - How do you change the colour of an SVG icon sprite used via using CSS?
Lesson 4 - CSS Accessibility - How can ':is()' improve the maintainability of CSS rules targeting multiple heading levels?
Lesson 5 - Modern CSS (Nesting, :has, Layers) - What is the current best CSS-only fallback for the CSS Anchor Positioning API where not yet...
Lesson 6 - CSS Color & Gradients - Which CSS pattern provides an sRGB colour with a P3 wide-gamut enhancement?
Lesson 7 - CSS Custom Properties & Variables - How do you read a CSS custom property value from an element using JavaScript?
Lesson 8 - CSS Abbreviations - What does CSP stand for and how does it affect inline CSS?
Lesson 9 - Modern CSS (Nesting, :has, Layers) - What does the CSS Houdini Layout API allow developers to create?
Lesson 10 - CSS Color & Gradients - How would you create a simple CSS 2-segment pie chart showing 30% red and 70% blue?
Lesson 11 - CSS Layout: Flexbox - How do you add space only between flex columns (not rows) in a wrapping flex container?
Lesson 12 - CSS Abbreviations - What does CRP stand for in web performance and how does CSS relate to it?
Lesson 13 - CSS Units & Values - What does the CSS 'ic' unit measure?
Lesson 14 - CSS Functions & Math - What does 'font-size: calc(pow(1.25, 3) * 1rem)' compute?
Lesson 15 - CSS Typography & Text - What does 'font-optical-sizing: auto' do for variable fonts?
Lesson 16 - CSS Selectors & Combinators - What is the specificity of ':is(.card, #hero) p'?
Lesson 17 - CSS Units & Values - Why is '100svh' better than '100vh' for a full-screen mobile hero section?
Lesson 18 - CSS Custom Properties & Variables - Why can't 'transition: --my-color 0.3s' animate a CSS custom property by default?
Lesson 19 - CSS Cascade, Specificity & Inheritance - How do you create a nested CSS layer inside 'base'?
Lesson 20 - CSS SVG Styling - What does 'vector-effect: non-scaling-stroke' do to an SVG element's stroke?
Lesson 21 - CSS Scroll & Overscroll - What does 'overscroll-behavior: none' on the prevent on mobile?
Lesson 22 - CSS SVG Styling - In CSS, when 'stroke-width' is set on an SVG element, what is the default unit?
Lesson 23 - CSS Scroll & Overscroll - What does 'scroll-snap-align: start' do on a scroll snap child?
Lesson 24 - CSS Units & Values - What does the CSS 'cap' unit represent?
Lesson 25 - CSS Typography & Text - How does 'text-wrap: pretty' differ from 'text-wrap: balance'?
Lesson 26 - CSS Layout: Flexbox - How does 'justify-content: space-evenly' differ from 'space-around'?
Lesson 27 - CSS Color & Gradients - What does the 'image-set()' CSS function do?
Lesson 28 - CSS Transitions & Animations - What is the relationship between CSS animations and the Web Animations API (WAAPI)?
Lesson 29 - CSS Typography & Text - Which CSS property enables automatic hyphenation of words at line breaks?
Lesson 30 - CSS Selectors & Combinators - What does the experimental ':local-link' pseudo-class target?
Lesson 31 - CSS Forms & UI - When does the ':in-range' pseudo-class apply to a number input?
Lesson 32 - Modern CSS (Nesting, :has, Layers) - What does the CSS '@starting-style' at-rule enable?
Lesson 33 - CSS Visual Effects - What is the key difference between 'filter: drop-shadow()' and 'box-shadow'?
Lesson 34 - CSS Transforms - If 'transform: scale(2)' is applied to an element, what happens to the surrounding layout?
Lesson 35 - CSS Custom Properties & Variables - Can CSS custom properties be used inside 'calc()' expressions?
Lesson 36 - CSS Layout: Flexbox - What does 'flex-direction: row-reverse' do to flex items?
Lesson 37 - CSS Concepts - What does the ':focus-within' pseudo-class match?
Lesson 38 - CSS Concepts - Which CSS media feature detects when a user has enabled forced colours mode (Windows High Contrast)?
Lesson 39 - CSS Concepts - What does 'isolation: isolate' do in CSS?
Lesson 40 - CSS Concepts - What is the difference between 'scroll-padding' and 'scroll-margin'?
Lesson 41 - CSS Concepts - Which modern CSS property prevents a page break inside an element when printing?
Lesson 42 - CSS Concepts - What happens to a 'position: fixed' element when the user scrolls?
Lesson 43 - Web Typography - What does 'font-variant: small-caps' do to text?
Lesson 44 - CSS Concepts - What does 'flex: 1' expand to in longhand?
Lesson 45 - CSS Basics - What does the 'outline-offset' property control?
Lesson 46 - CSS Concepts - In 'linear-gradient(to right, red 25%, blue 75%)', what happens between 25% and 75%?
Lesson 47 - CSS Concepts - What does the CSS keyword 'initial' do when applied to a property?
Lesson 48 - Abbreviations - What does OOCSS stand for in CSS architecture?
Lesson 49 - CSS Concepts - Which CSS declaration correctly uses calc() to make an element 100% wide minus 2rem on each side?
Lesson 50 - CSS Concepts - Which property uses ASCII-art-style strings to define grid layout areas?
Lesson 51 - CSS Basics - What does 'button:not(.disabled)' select?
Lesson 52 - CSS Basics - In the 'background' shorthand, which value sets the background image?
Lesson 53 - CSS Concepts - What must be set on a parent element before a child can use a container query?
Lesson 54 - Web Typography - Which CSS at-rule is used to import an external font (such as a Google Font)?
Lesson 55 - CSS Basics - Which pseudo-element inserts content before an element's actual content?
Lesson 56 - CSS Concepts - Which selector has the highest specificity?
Quizzes
1 quizProve what you've learned. Sign up — it's free — to unlock every quiz.
LinkedIn Exam Simulation
Ad space
References & Study Material
21Ad space