Build gorgeous, maintainable sites in Webflow

1hr x 5days

$40

A custom designed site beautifully presented on every screen is easier than ever with Webflow. You'll learn how to approach the process of building websites so you don't paint yourself into a corner and end up with a fragile site that you're too afraid to update.

This course is specially designed for new and existing Webflow designers familiar with CSS and HTML looking to create custom websites. We’ll teach you how to use a structured approach that’s easy to maintain in the long term.

Key concepts we’ll cover include:

  • Make it easy for other team members to contribute
  • Use a design systems approach bring consistency
  • Write less meaningless css
  • Makes revisiting completed projects for that little update much less daunting
  • Accessibility is a first class citizen


Course Dates

Webflow Nov 23-27, 12-1 ET
$40
Register

Pre Req's

What you'll need

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

Day 1

Basics 👏 Review 👏

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

Day 2

Creating a Design System (in Webflow!) using Utilities

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

Day 3

Layouts with Scaffolds and Symbols

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

Day 4

Flex 💪 Those Grids

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

Day 5

Positioning is Absolutely Relative

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.

Course Dates

Webflow Nov 23-27, 12-1 ET
$40
Register Here

Attendee Reviews

Andrew Balisacan
Andrew Balisacan
Product Designer

I’m glad I took this course. Dayton did a great job teaching the subject matter within the time allotted. He also took 25 minutes after class to answer questions and if that wasn’t enough he sent an email summarizing what was taught in class with high level notes and links to resources. Highly recommended.

Himesh
Himesh
UX Designer

Dayton explains concepts in a way that's practical and simple to understand

Daliso Ngoma
Daliso Ngoma
Developer

Dayton takes a well paced approach when teaching Webflow, introduced modern web development practices and he's helpful in answering questions proficiently after classes and also through the likes of Slack.

Other courses you might like