In the real world, a common task for a web developer is to be given a PNG or PSD from a designer and asked to implement it in HTML/CSS.
And so it was, in week 3 of the Houston Rails class, that we asked students to implement a PNG in HTML/CSS.
Sass(scss) is awesome when used with HTML5 … I’m finally at that stage with CSS that I feel completely comfortable going like 3 levels deep into a child of a child element and making it do exactly what I want it to do. – Dwight
Breaking a design down into its components, and the components into styles is a learned skill. Knowing what styles and tricks to use is knowledge available on the internets though; so I thought I’d share what works for the Houston Rails course:
1. http://learnlayout.com/ – This site teaches the CSS fundamentals that are used in any website’s layout.
3. https://www.codeschool.com/courses/front-end-foundations – Learn how to create a website with HTML and CSS, and in the process build a strong foundation for more advanced front-end development. (Paid)
1. http://www.codecademy.com/tracks/web – Learn how to create websites by structuring and styling your pages with HTML and CSS.
2. http://www.atozcss.com/ – Podcasts, and a free free CSS selectors cheat
3. http://www.csszengarden.com/ – And oldy, but a goodie, showcasing what can be done with CSS (the HTML doesn’t change from site to site)
Once complete with the courses above, mastering your CSS skills is somewhat simplistic. Find a website and recreate it in HTML/CSS. Refrain from using Bootstrap/Bourbon and use only in plain-jane HTML/CSS. Then, add in Sass and Bourbon (hint: use http://codepen.io/). Repeat as necessary.
— Sam Kapila (@samkap)