Coding design blocks

A code session where we'll focus on HTML & CSS. We'll talk about utility-first CSS and how to code with Tailwind CSS.


  • A brief background on HTML & CSS (5 min)
  • What is utility-based CSS and why is it different
  • Building a landing page from scratch with three blocks (hero, features & call to action) with Tailwind CSS using only 6 lines of CSS.

If we have time in the end we'll look on a couple of real world examples on how Snowfire is using blocks instead of themes on live websites.

During the session we'll code with vanilla HTML & CSS but Tailwind CSS works with all the big frameworks such as Vue, React & Angular.


Dig deeper

Read more about Tailwind CSS and search their documentation on

Adam Wathan, the creator of Tailwind, have a great video course on how to get started with Tailwind on

Charli Prangley, the lead designer on ConvertKit, has a great video on how to create design systems in Figma.