Chapter 0—Preparation

Preparing for the workshop

You’ll need to bring your laptop with a modern browser and your favorite code editor installed. During the workshop, there are several code demos. I put both the code into the page and on Codepen is live demo. You can find those live demos in the following Codpen collection. Please fork them and play around the code yourself. You won’t learn it until you hack it.

Code examples on CodePen

-prefix-free library

-prefix-free is the JS library made by Lea Verou. It parses the CSS properties and apply centain vendor prefixes on the rules by determing the browser version. This library allows us to skip worrying about different syntaxes—prefixes and the old syntaxes.


The logic in CSS preprocessor provides us the DRY—Don’t repeat yourself— way to write the CSS code. We will use some SCSS code when defining the grid layout. It’s loop and list feature helps reducing the lines of code a lot. If you are using other preprocessor, you may find their equivalents in If you aren’t using any preprocessor, no worry, we also provide the full CSS code.

You can find the PDF/ePub/Mobi edition at Buy now and read the book in your favorite reader.