Learning Sass with CodePen

If you’ve been working with CSS for a while, you’ve probably heard of Sass and even switched to it by now. Using Sass allows you to code much faster and efficiently. Getting started can be a bit daunting though. Tools like CodeKit can help or if you’re familiar with the command line then installing Sass is a breeze, but if you’re not, then you’re stuck. That is, until now.

Dudley Storey, at The New Code has created a free comprehensive course that allows you to learn Sass while using CodePen. Because Sass is built into CodePen, you can get started right away. His excellent tutorial series, takes you through the basics,  nesting, extends and imports and concludes with loops.  If you’re just getting your toes wet, this is a great place to start.

 

Flexbox fundamentals with Wes Bos

I’ve had the chance to play with Flexbox for a while on a few different projects and it’s been super handy. Flexbox allows you to do things that floats just make you scream and pull your hair out.

Although very simple, flexbox can be a bit tricky, especially when using it in a WordPress theme where you may not have full control of how the HTML is generated ( i.e. menus and search box). One of the best guide for using flexbox is Chris Coyier’s “Complete Guide to Flexbox“. I constantly refer back to this guide every time I’m using flexbox.

A few months ago, Wes Bos released a series of videos at Flexbox.io. I was curious about these and so signed up, got the videos, but hadn’t had the chance to go through them until this week. I spent a couple of days listening and playing around with the code. Although, most of the information was a review for me, the videos clarified quite a few things and highlighted very important points. I even burst out laughing when Wes said, “now this is when people normally say, What? This flexbox stuff doesn’t work“. I had literally just said something very similar.

I must admit, I’m not a big fan of video tutorials. I would rather just see code and read a brief explanation, but these were fabulous. Wes explains things very well, he’s very clear and repeats the most important points frequently. Best of all, the videos are free, so you should really check them out if you haven’t had a chance yet.

In Video 13, Wes introduces gulp and node which he uses for auto prefixing. I had some issues installing all of this and since I never write CSS, but work with Sass instead, I opted to use mixins instead and as always, a quick search lead me to a great collection that fits the bill.

A big thanks to all you fabulous people sharing knowledge online. You’re awesome.