How to learn CSS as a rails developer

By Jesse Wolgamott, Houston Rails Engineering Instructor

Rails Engineering is a back end class focusing more on databases, logic, and APIs than on creating awesome web designs. (If that’s more your bag, there’s a class for that too, obvs)

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.
    2.    https://dash.generalassemb.ly/ – Dash teaches HTML, CSS, and JavaScript through fun projects you can do in your browser.
    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)

Want moar?
    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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About theironyard

The Iron Yard exists to create exceptional growth and mentorship for people, their companies and their ideas through code education and startup accelerators.