CSS Roadmap - 80/20
Think before learning
- 80/20 ⇒ Lọc ra 20% các selectors quan trọng nhất ⇒ Focus vào nó
- Basic Layout: Có những loại layout nào, khác nhau như thế nào, code ví dụ cho từng loại.
- Một số cách để quản lý source code HTML & CSS cho clean/ reuseable.
80/20
1. Understand the Basics of CSS
- Selectors and Properties: Learn how CSS selectors target elements, such as class, id, element types, and attribute selectors. Understand how properties (like
color
,margin
,padding
,font-size
) work. - Box Model: This is essential to CSS layout. It consists of margins, borders, padding, and the content itself.
- Units of Measurement: Get familiar with units like
px
,em
,rem
,%
,vw
, andvh
.
Resources:
- CSS Tricks – Selectors
- MDN CSS Documentation
2. Learn CSS Layout Techniques
Mastering layout is critical for modern web development.
- Flexbox: Provides a powerful way to align elements in rows and columns. Perfect for building responsive layouts.
- CSS Grid: A newer layout system that gives you more control over complex layouts.
- Positioning: Understand how
static
,relative
,absolute
, andfixed
positioning works.
Resources:
- Flexbox Froggy (interactive game to practice Flexbox)
- Grid Garden (interactive game to practice CSS Grid)
3. Responsive Design and Media Queries
- Learn how to make your design adapt to different screen sizes using media queries. Responsive design is key to modern web development.
- Mobile-first Design: Learn the principles of designing for mobile devices first, then progressively enhancing for larger screens.
Resources:
4. Advanced Styling Techniques
- Animations and Transitions: Learn how to add dynamic effects with
@keyframes
,transition
, andanimation
properties. - Pseudo-Classes and Pseudo-Elements: Use these to target specific parts of elements or states (like
:hover
,:before
,:after
).
Resources:
- MDN – CSS Animations
- CSS Tricks – Pseudo-Classes
5. CSS Architecture and Best Practices
As a backend developer, you’re probably already familiar with the importance of code maintainability and scalability. These principles apply to CSS as well:
- BEM (Block Element Modifier): A popular naming convention to keep your CSS modular and reusable.
- CSS Variables: Learn how to define and use CSS variables for more maintainable styles.
- Sass/Less: Consider using a preprocessor like Sass or Less to write more efficient and organized CSS.
Resources:
6. Practice, Practice, Practice
Practice is crucial when learning CSS. Try creating small projects like landing pages, portfolios, or recreating existing websites.
Challenges & Projects:
- Build a personal portfolio page.
- Clone existing websites for practice.
- Participate in CSS Challenges (e.g., Frontend Mentor).
7. Stay Updated and Learn from the Community
- Follow CSS news, blogs, and updates. CSS evolves, and new features are added frequently (e.g.,
container queries
,subgrid
in CSS Grid). - Join communities like Stack Overflow, Dev.to, or Reddit’s web development communities to ask questions and see how others solve problems.
Most used properties
Layout and Position
display: block;
display: flex;
display: grid;
position: relative;
position: absolute;
width: 100%;
height: 50px;
margin: 10px 20px;
padding: 15px;
float: left;
clear: both;
Text and Typography
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
color: #333;
text-decoration: none;
letter-spacing: 1px;
Color and Background
background-color: #f0f0f0;
background-image: url("image.png");
background-position: center;
background-size: cover;
border: 1px solid #ccc;
Box model
box-sizing: border-box;
border-radius: 10px;
Flexbox (for Layout)
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
Grid (for Layout)
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr;
grid-gap: 10px;
Transition and Animation
transition: all 0.3s ease;
animation: slide 1s forwards;
Responsive Design
@media (max-width: 768px) {
/* Styles for mobile */
}
Learning Path Overview
- Basics: Selectors, Box Model, Units
- Layout: Flexbox, CSS Grid, Positioning
- Responsive Design: Media Queries, Mobile-first
- Advanced Topics: Animations, Transitions, Pseudo-classes
- Architecture: BEM, Variables, Sass
By following this approach, you’ll move from knowing nothing about CSS to being capable of styling full-fledged, responsive websites.
Good luck! Let me know if you need any specific resources or help with a particular concept.