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.

Agenda

• 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.

Resources

• Download example files (HTML/CSS/JS)
• Slides (PDF)
• Figma File
• Figma Simple Design system (created during the session)

Dig deeper

Read more about Tailwind CSS and search their documentation on tailwindcss.com.

Adam Wathan, the creator of Tailwind, have a great video course on how to get started with Tailwind on tailwindcss.com/screencasts

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