blogredesigned

blogredesigned
Blog Products
Blogger Templates
Extra Elements
 Pricing
Free
Premium
 Categories
Material Design
Web Design Basics
HTML/CSS
 About

Steps to Master CSS by Practice

 February 02, 2016 by Posted in:
As a learner, there's always so much to learn. Mastering and perfecting a skill takes time and effort. So if you want to master css all you need to do is to practice css and read the right material. Before we even begin listing the things needed to master CSS, I'll have you known that CSS is often thought to be a fairy simple language, but in my opinion it gets quite complex when you think of mastering it because you need to give sufficient time for learning it.



There is a plethora of things that should be considered before even you start designing a modern day website or some app or anything similar. The year is 2016 and 55% of the worldwide traffic is mobile so making web apps and websites with mobile support is a no brainier.  
I've listed few of the things that I consider are needed to master any kind of web technology, in our case it would be to master CSS.

  • Syntax and rules
  • Variations in style guides
  • CSS Processors 
  • Browser Support (Cross Platform Support)
  • Knowing the limitations 
  • Knowing the Advantages
  • Knowledge of the current best practices
  • Being able to answer other's questions with correct examples 
  • Frameworks (Every other web technology has a framework)
  • Usage of it with other supporting technology
  • If you think I missed something here please do comment about it, I'll add it here.
So it's obvious that you can't master all of these in a short amount of time because things need time to sink in. Below I have listed the 5 steps that you can follow to master css by practicing it, some are websites, some are tips for getting better in css and html.

What are the benefits of Mastering something like CSS?

If you dream of becoming a front-end-developer, Mastering CSS is something you really want to do. The good news is if you are good with CSS selectors, you'll be very comfortable with using jquery. 
If you are not willing to be a front-end-developer, there's no point mastering it. Because it takes time and will waste your precious time. The articles are listed in such a way that even a beginner will be able to get started easily. 

Here are a few buzzwords in css, if you are around css for a while you might have heard of them.
selectors, pseudo-selectors, Dimensions, Interface, Paging, Tables, Box-model, Animations, Keyframes, Fonts and Colors, Flexbox and many more. Some were concepts, some were properties and stuff. All these for me fall under the category of ,yes you guessed it. "Syntax". So the first step to get better in css is to know the syntax, and how to you know the syntax for css? by practicing it. There are huge and excellent lists for CSS reads at github awesome css, you might want to check that out too.

Mastering CSS 3 Syntax 

The very first thing you should be doing if you haven't already is to go over to MDN and have a overview read about what is CSS and all those stuff.
If you find the MDN a little bit off you can checkout the principles of CSS by smashing. (But is too big to read and understand in one go, I suggest you stick to the overview from MDN if you are just starting with css). 

Mastering CSS 3 Selectors

Using browser inspection tools to see how other websites are built and trying to change the property values is something you should definitely do. Beyond that, here are a few articles and games that can help you build a solid understanding of CSS selectors.

Games (These do help if you are terrified about how big css is in the beginning)

Articles (I spent a lot of time searching for the right articles because the games were enough for me to be honest)

Mastering CSS Positioning 

If you don't know about DevTips (a YouTube channel), you should go and check his videos on CSS positioning. He explains them quite well. Then you would want to do some practice for CSS positioning. Go to your favorite website, pop up developer tools in your browser, change the display properties for different dom nodes, check if it satisfies with the theory that you read about CSS positioning about absolute,static,fixed etc.

Mastering CSS Box Model

The CSS Box Model is a very important concept to gasp, "Everything is a box", Even the circle and any other shapes you see in any website is a box, the curves are achieved through altering border radius and other properties, to know how those property work it's important for you to know about the CSS box model and it's pretty easy too. Here are a few good links for learning the CSS Box Model. Also there is a very useful chrome extension called pesticide which lets you visualize all boxes in the website in real-time, 10/10 Web developers will recommend keeping it.

Links from CSS tricks and MDN.
- If you have time, here's a long and nice article about the Box Model in CSS
- If you are short of time, here's a nice overview of the box model by mdn.

 CSS Units 

Units are very important in CSS, much like any other decorative work you need to cut things down at appropriate lengths here in CSS knowing when to use what units will save you hours of confusion(for larger projects). So, it's recommended that you use one unit throughout except the rare cases. Here is a very nice article about CSS units by CSS tricks.  These days, dynamic units such as em and rem play very important role for good responsive design, so you don't want to skip them.

Pseudo Selectors in CSS

Pseudo class selectors are CSS selectors with a colon preceding them they are extremely helpful, they let you do things that you wouldn't be able to do by adding additional tags in your HTML and styling them, even if you could it would be very tiring to do so. The most popular Pseudo Selectors are the after and before. It purely depends on what kind of project you are working on for the appropriate Pseudo Selector to use. Here are a few nice reads on Pseudo Selectors.


Flexbox

Flexbox is getting more and more popular everyday, It is redefining how we do layouts with CSS. With more stable browser support for Flexbox it will be great for front-end web developers to create dynamic layouts. But learning and using it won't hurt much because most of the modern browsers have support for flexbox. Here are few guides on Flexbox.

Games
- Flexbox froggy for CSS3 Flexbox

Now if you know the basics, you can check these tutorials and articles where they are explaining how you can achieve certain effects, also I would recommend you to join codepen and start creating your own pens.
Now Here are a few miscellaneous resources for learning CSS 3 and hence mastering it with time.



CSS3 Tutorials

The tutorials are extremely helpful, not only for the professionals, but, also for the beginners.


CSS3 Libraries and Examples and CSS Frameworks (the ones that I use often)


  • Blur Menu - This is a really well executed and polished demo of a CSS only menu.
  • Logos In Pure CSS - Company logos created in pure CSS.
  • CSS A/Z - An entirely HTML/CSS animated sketch for each letter made (hopefully) every day for 26 days.
  • Animate.css - This is hugely popular on github
  • Spinkit - Spinkit is a collection of easily customizable loading indicators
  • Buttons - Nothing more, nothing less, just a huge collection of buttons.
  • flatuicolors - flatui colors is for those of you who hate color picking for a hex code.
  • Semantic UI - My Favorite UI Framework.

Conclusion

I hope you gained something from this afticle and the provided links about mastering CSS.
So good luck on your journey to master CSS. If you have any question/suggestion, feel free to drop them in the comments section!





Looking for a custom theme?

Hire us!

Site Map Contact Us Privacy Policy