🪴ttuan's garden

Sep 18, 20244 min read

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, and vh.

Resources:

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, and fixed positioning works.

Resources:

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, and animation properties.
  • Pseudo-Classes and Pseudo-Elements: Use these to target specific parts of elements or states (like :hover, :before, :after).

Resources:

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

  1. Basics: Selectors, Box Model, Units
  2. Layout: Flexbox, CSS Grid, Positioning
  3. Responsive Design: Media Queries, Mobile-first
  4. Advanced Topics: Animations, Transitions, Pseudo-classes
  5. 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.

Resource

Graph View

Backlinks

  • No backlinks found