| Hey I was in the same place as you about a year ago and these are a few of the things I did to practice: Pick a CSS framework and look through the source. Bootstrap is a great one (https://github.com/twbs/bootstrap/blob/master/dist/css/boots...). You can read through their documentation and find the styles in the source to see how it works (http://getbootstrap.com/). Whenever you see something cool on a website, Right Click -> Inspect Element and figure out how they did it. Google Chrome developer tools are really awesome for this. You can toggle existing styles, add styles, edit html, etc (https://developer.chrome.com/devtools/docs/elements-styles) For detailed explanations use Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/CSS). They have very comprehensive write ups for every style attribute. CSS Tricks has great write ups for specific styles and sets of styles to achieve things like centering, layout, and pretty much everything else you can think of (https://css-tricks.com/) The Codrops CSS Reference is also very, very detailed (http://tympanus.net/codrops/css_reference/) Like many other people have said, if you think up a design you can use jsfiddle, jsbin, coderpen or any in browser editor to quickly try and style something up. For larger CSS code bases you'll need to keep things readable and easily understandable for yourself and others. My team follows the Medium CSS/LESS Style Guide. It's a really excellent way to keep your code organized when you start working in larger code bases.
https://medium.com/@fat/mediums-css-is-actually-pretty-fucki... Good luck! Edit
I forgot to mention reading up on media queries. Media queries are extremely important for when you get into responsive design and dealing with content layout across all sorts of different screen sizes. Google has a very good write up on this (https://developers.google.com/web/fundamentals/layouts/rwd-f...) as well as CSS Tricks (https://css-tricks.com/snippets/css/media-queries-for-standa...) |