Build gorgeous, maintainable sites in Webflow

This intermediate course assumes you already have a paid Webflow account, preferably with the CMS plan. If you've already built a site or two with Webflow even better.

Webflow is a no-code platform, which means you don't have to write any code at all, but understanding a few good coding practices like naming conventions and DRY (don't repeat yourself) go a long way. You'll need to have a good understanding of CSS and have had some experience with it; either writing it from scratch or working alongside a colleague.

‍

The first day of this course kicks off with the introduction of a multipage responsive static layout designed in Figma. Our goal by the end of the week is to build the entire site from scratch using Webflow.

We'll start by deconstructing the elements of the static layout—color, typography, spacing and content (if this sounds like the language of design systems that's because it is). We'll explore how to effectively translate color and typography into Webflow using reusable global css classes.

We'll recreate the static layout using the section/container/content layout structure, a common blueprint for almost every page design you'll ever encounter.

Next combo classes, how they work, the CSS they generate and how to use them.

We'll wrap the day by identifying two approaches for naming classes in Webflow that will keep your sanity intact—BEM and Global Utilities.

‍

DRY is one of the most basic principles of programming, it stands for Don't Repeat Yourself. It's objective is to keep your work free of unnecessary duplication. Webflow being a blank canvas, allows you to design however you choose, and if you aren't careful you can paint yourself into a tangled mess of poorly named CSS classes that do unpredictable things.

Day 1 introduced BEM and Global Utilities classes. Today we'll deep dive into how to use them to build modular systems for almost anything you can imagine. We'll jump in with another part of the static layout and build it in Webflow with a combination of BEM and Utilities.

Next up symbols. Symbols in Webflow are reusable static components with properties that can be overwritten with every instance of them, like you might find in Sketch. We'll learn how to use them to keep your sites free of duplication.

Finally we'll wrap with a demo of the CSS utility framework I use in all my work with over 500 responsive utility classes. It's a free cloneable resource you can use. We'll get deep into it on Day 3.

Responsive web design in Webflow can be pretty simple with a few clicks to change the layout of things. However, when building a multipage site, things can quickly get out of hand. If only there way a predictable way of RWD, of course there is. Responsive utilities.

Using responsive utilities we can quickly convert desktop layouts into mobile ones with a few additional classes. Responsive utilities can control visibility, spacing and layout really easily between various breakpoints.

Using utilities reduces the need to write CSS altogether. Less custom class names = less janky and unpredictable websites.

But there's more, we'll learn how to create our own utilities that might be necessary for your project, and with Webflow it's easy.

This is a jam packed lesson, you're in for a treat. CMS collections are one of the most powerful features of Webflow. You'll need a Webflow site plan that includes the CMS to try it out. Collections are used to create dynamic templated sections. The content you're reading now comes from the CMS.

Today's class will cover creating CMS collections, designing dynamic pages with the collections. Creating dynamic galleries, and lighboxes, sorting, filtering and pagination.

We'll also cover powerful CMS fields like options, reference and multi-reference fields.

Finally, we'll take a look to use custom code to dynamically add 3rd party plugins, like the event registration embedded on this site.

This lesson started with learning a basic layout structure section/container/content. Today we are going to break that mold and explore more advanced layouts that utilize CSS Grid and Flex-box together.

Next we'll tackle the phrases we love to hear, "It need a little pop," or "Humm, it's missing something." We'll do that with interactions. Specifically, mouse hover effects, Lottie animations, dark mode and scroll events.

Webflow makes these stunning interactions really easy to do with no code to write at all, and this lesson will give you the foundations of how to make them yourself and unleash your creativity (just don't go too crazy).

‍