Learn Essentials of CSS

Quickly learn and master the basics of CSS.

Your guide to quickly master the CSS essentials as an experienced UI/UX designer.

Fundamentals & Core Concepts

Ways to reference CSS in HTML pages, CSS syntax, CSS properties, values and units, Type & Universal selectors, ID & Class selectors, Pseudo-classes and pseudo-elements, Debugging styles with developer tools

CSS Box Model

Intro to the CSS box model, The box model properties, Box-sizing and the box model fix, Inline, block, and display, Managing box model quirks

Grid Layout

Intro to CSS Grid, Explicit grid and implicit grid, Adding gutters with the gap property

Flex Layout

Intro to Flex Layout, Using Flexbox for responsive design & layout control, Orientation and ordering, Sizing with flex properties, Aligning flex items, Aligning elements with Flexbox

CSS & Typography

Introduction to Typography, Fonts and Typefaces, , Character Encoding Best Practices, Using LT Browser to test CSS Typography and Encoding

Responsive design

Introduction to responsive design, Understanding mobile-first design principles, Using media queries, Breakpoints, Fluid layouts, Viewport meta tag, Testing responsive layouts

Feel free to explore and understand these topics from any useful source. I am adding the link to the CSS tutorials on w3schools.com i.e. a great place to start if you are an absolute beginner.

Learn CSS from Start
Selectors
Box Model
Pseudo Elements
Flexbox
Grid
Media Queries
Animations
Typography
Z-index
Browser Support
Mobile First Design
CSS Preprocessors