CSS Learning Roadmap

Cascading Style Sheets (CSS) is a fundamental technology for web development, empowering you to transform raw HTML into stunning, well-designed web pages.

In this roadmap, we'll provide a straightforward enumeration of key concepts, techniques, and areas of focus to help you progress in your CSS journey. Whether you're a novice or a seasoned developer, this roadmap is designed to be your reference for what to learn next.

Let's begin.

CSS Syntax

Understading CSS Syntax is fundamental in order to start learning CSS. This section introduces learners to selectors, properties, and values, explaining how to target HTML elements and apply styling.

• Basic syntax
• Selectors: (pseudo)classes, (pseudo)elements, attributes and combinators
• Media queries and responsiveness

CSS Basics

In this section, you will dive into core styling principles. This provides a strong foundation for fundamental CSS concepts, which are used in many different situations.

• Color, Texts and Fonts
• Size and Units: absolute (px, in, pt, etc) and relative (em, rem, vh, vw, %, etc)
• CSS Cascade
• Basic display: Block elements and Inline elements
• Height and Width: (min, max, fit)-content, maximum and minimum, etc.
• CSS Box Model:
  • Margin
  • Border
  • Padding
• Managing overflow
• Images: sizing, positioning and fitting

Positioned Layout

The use of position layout allows to control the placement of elements on a webpage. By mastering these key concepts, you'll gain the skills to design complex web layouts and add creative touches to your projects.

• Relative positioning
• Absolute positioning
• Fixed positioning
• Sticky positioning
• Stacking contexts and z-index

Flexbox

Flexbox, or the Flexible Box Layout, is a powerful CSS layout model for creating responsive and dynamic page structures. This section serves as an introduction of these layout key concepts. As soon you understand them all, you will master this type of layout.

• Understanding Flex layout basics
• Content vs Items vs Self
• Spacing, Justifying and Aligning
• flex property: flex-grow, flex-shrink and flex-basis

Grid Layout

CSS Grid Layout is another essential layout tool. It allows to create two-dimensional grids and control the placement and alignment of elements with precision. This section presents some of the main grid concepts and properties, providing the steps to follow to build intricate page layouts.

• Understanding Grid layout basics
• Managing rows and columns
• Content vs Items vs Self
• Spacing, Justifying and Aligning

Bonus

This last section includes some CSS topics and practical applications that don't really fit in the sections above. This encompass topics like CSS animations, transitions, responsive design, and best practices for optimizing CSS code. It's a space to explore more specialized concepts and techniques that enhance a web developer's skill set.

• Accessibility
• Animations and effects:
  • Transitions, transforming, keyframes
  • Shadows, effects and gradients
• Learning to manage CSS in the Browser Inspector
• Styled-components and SASS

From my experience, I have always found it challenging to discover a guide to follow in order to master CSS. I must point out that this list is based on my personal experience. Each person should have its own path. Use this list as a guide, not as the source of true.

I hope this list proves to be useful for you.

Thanks for your time!