Just Enough CSS for Web Developers

[sushilburagute]

11 Basic points you should cover in CSS as a Web Developer!

---

1. How CSS works?

• Selectors https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• Specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• Cascade https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

---

2. How to render an element?

Box Model

• Padding https://developer.mozilla.org/en-US/docs/Web/CSS/padding
• Border https://developer.mozilla.org/en-US/docs/Web/CSS/border
• Outline https://developer.mozilla.org/en-US/docs/Web/CSS/outline
• Margin https://developer.mozilla.org/en-US/docs/Web/CSS/margin

---

3. How to render where I want?

• Positioning https://developer.mozilla.org/en-US/docs/Web/CSS/position
• Float https://developer.mozilla.org/en-US/docs/Web/CSS/float

---

4. How to Render the entire row of elements?

• Flex https://developer.mozilla.org/en-US/docs/Web/CSS/flex

---

5. How to Render the Entire page as I wish?

• Grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid
• Layout https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

---

7. How to layout on different screen size?

• Media Queries https://developer.mozilla.org/en-US/docs/Web/CSS/@media
• Responsive Design https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

---

8. How to make it Beautiful?

• Colors https://developer.mozilla.org/en-US/docs/Web/CSS/color
• Fonts https://developer.mozilla.org/en-US/docs/Web/CSS/font
• Gradients https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
• Background https://developer.mozilla.org/en-US/docs/Web/CSS/background

---

9. How to make it more interesting?

• Animation https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• Transform https://developer.mozilla.org/en-US/docs/Web/CSS/transform
• Transitions https://developer.mozilla.org/en-US/docs/Web/CSS/transition

---

10. How to ease Teamwork and Separation?

• BEM: Block Element Modifier https://css-tricks.com/bem-101/

---

11. How to make Dev faster and Organised?

• Sass, Less , Post CSS or any pre-processor https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor

---

Summary

There are some basic ideas when learning CSS.

1. Start from the smallest element
2. Learn the concept not the keyword.
3. When learning something know what you'll do with it.

---

[BhaveshSSingh]

thanks for this

[Himanshu-Dhawale]

Great article