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
-
flexproperty:flex-grow,flex-shrinkandflex-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!
Top comments (0)