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 9-13, 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 9-13, 12-1 ET
$40
Register Here

Attendee Reviews

Kevin Guan
Kevin Guan
UX/UI Designer

Dayton’s Webflow course helped me build confidence in crafting a website, I didn’t know how easy it can be!

Daniel Churchill
Daniel Churchill
UX Design Student

The RSG Webflow 300 course was exactly what I needed at the time I took it! After using webflow for a year prior, it elevated my level of understanding of what could be done with the platform.

Amos Werner
Amos Werner
UI/UX Designer

As the intro to Webflow was only three, one hour courses, Dayton did an amazing job in that short amount of time clearly explaining features of Webflow, providing insights not only for best practice in Webflow but UX/UI design as well and readily answered all questions. Really glad I woke up early every day to take this course, will definitely be continuing in Webflow and taking more courses with Dayton.

Other courses you might like