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:
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.
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"
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.
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.
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.
Dayton is an excellent teacher and humble guide with thorough knowledge about his tools. Loved learning from him.
.jpeg)
What I learned from in this course is the understanding of a systematic approach to building reliable manageable systems in Webflow!
Learning with Dayton is an great experience. His wealth of knowledge and approachability make him an amazing teacher. His teaching style makes learning online feel like a natural and fun experience!
