• Webflow account, preferably with CMS plan
• Basic knowledge of HTML and CSS

To make sure everyone is on the same page, we’ll kick off with a refresher of CSS and HTML. Coding isn’t required for Webflow but a basic understanding of how it works will help us visualize what exactly is happening in the backend when we use the tool.

There’s a lot going on with Webflow selectors that we’re just going to have to clarify. With Webflow it’s easy to unknowingly make a whole bunch of custom styles because you changed just one small thing in an element you created. To know how to go back and update or revise it, we’re going to have to figure out what happens in the CSS.

• Introduction or refresh of CSS/HTML
• HTML [Button element] vs CSS [btn class]
• Structure of global classes and how they work
• Pseudo-classes, styling states
• Class order doesn’t matter

On the second day, we’ll transfer our design system from Figma to Webflow. We'll deconstruct the elements of the static layout—color, typography, spacing and content. We'll explore how to effectively translate color and typography into Webflow using reusable global css classes. This method will make sure that if you ever want to change your visual style from Picasso to Rembrandt, you’ll only need to go to one place to change everything.

We’ll also talk about how to set standards for spacing, margins and padding. Using global classes to define them will help us maintain a consistent system and avoid having to name new styles like “card-home-more-spaced-out” or "heroSection without top margin 2"

• Webflow System and Utilities vs Figma Design System Components
• Setting up type, color
• Spacing, margins, paddings
• Margin vs padding, when to use each or both

Now that we’ve set up our design system on Webflow, it’s time to put things on our website! On Day 3, we’ll lay down the basic layout of a website such as navigation, sections and footer using scaffolds and symbols. Don’t allow yourself to type the same thing over and over again, Webflow’s gotchu for that.

• Scaffolding, basic layouts, symbols
• Nav, footer

Webflow lets us design responsive websites pretty easily by allowing us to set styles for every breakpoint at the click of a button. But when we’re building a multi page site, things can quickly get out of hand. Using responsive utilities we can quickly convert desktop layouts into mobile ones with only a few additional classes.

CSS grid and flex displays are useful for- well- grid layouts, but they’re also useful for responsive design. There’s a trick to it that’ll easily let you change from a desktop to mobile layouts without having to create repetitive unique styles. Less custom class names = less janky and unpredictable websites.

• Using grids/flex for mobile
• Properties

Now that we’ve covered all of the basics, on the last day we’ll demystify absolute and relative positioning for elements that don’t conform to the top-down, left-right ordered norms of HTML. We’re going to make sure that top-left will go to precisely the top-left that you want with minimal custom classes.

Before we end the course, we’ll show you how you can use all of these basic tools we just learned to create a totally crazy but cohesive and manageable website.