CSS Learning Roadmap
Tags: css, webdev, learning, react
Published: 2023-10-23 20:18:43

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!