DEV Community

Cover image for CSS Learning Guide 2022
Idukpaye alex
Idukpaye alex

Posted on

CSS Learning Guide 2022

CSS Stands for Cascading Stylesheet, it is a scripting language for controlling the presentation, flow, and style of HTML Elements. To be honest CSS is not an easy thing to master, it requires practice and practice, in this article I will show you the roadmap of how you can start your CSS Journey.

Completely New To CSS

If you are completely new to CSS I personally recommend one of the best teachers on youtube The Net ninja, he will take you nice and easy and teach you so many CSS concepts such as The basics, positioning, responsive design, etc. Check Him out.
If you are the type that prefers reading search out freecodecamp.org or mdn on Google.

Familiarity With The Basics

After you are familiar with the basics of CSS, what you will need to do is apply that knowledge and build useful stuff. There is a great website called https://frontendmentor.io it offers you design problems you can try out yourself and get community feedback when you submit them. if you are stuck building these challenges check out these youtube channels.

Practice and Consistency

Even though you can build one or two challenges you can't stop, you have to keep on practicing and practicing and that's why I highly recommend checking out frontendmentor. io. Frontendmentor challenges are from newbie to Guru levels, so build up your skills with newbie -challenges and slowly progress to junior-challenges then to intermediate-challenges, then to advanced-challenges and finally Guru-challenges.

Basic CSS Roadmap

  1. CSS First Steps (what is css, why use it, etc.)
  2. CSS Building Blocks
    • CSS Selectors
    • The box model
    • Backgrounds and border
    • overflowing content
    • values and units
    • images, media, and forms
    • Styling Tables
  3. CSS Layouts
    • Flexbox
    • CSS Grid
    • Positioning
    • Reponsive design and media queries
  4. Styling Text
    • Fundamental text and font styling
    • styling lists
    • Google Fonts
    • Responsive typography(typography is a fancy word for font,)

Good Refrences

  1. MDN
  2. css-tricks
  3. freecodecamp
  4. internetingishard

Good Youtube Channels To Follow

  1. The Net Ninja
  2. tsbsankara
  3. Tech upfront
  4. kevin powell
  5. Florin pop

Conclusion

CSS Requires practice and dedication, just keep on building websites, and evenentually you will become a CSS pro, and learn some important CSS concepts. Do not forget to check out the references list above, thank you for reading see you next time ✌🏽✌🏽.

Top comments (3)

Collapse
 
toulthg profile image
灰色の果实

Thanks! Good job

Collapse
 
mojodev profile image
Idukpaye alex

very happy to hear this. if it helped you out, please consider following me for more, please.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good roadmap.