Webflow 201

Hey! I'm Keegan Leary, You might know me as Web Bae, but not too long ago I was the person who thought Webflow was impossible. I watched hours and hours of Webflow tutorials and scoured the forums (thank you Matt Munger and Vincent) trying to figure out why my slider element was acting buggy and what was causing horizontal scroll on my latest project.

Even the basic concepts of Flexbox and CSS Grid were confusing me, and don't get me started on how I felt about more complex things like accessible modals and custom code. I just felt like no matter what I did things didn't work like I expected them to.

Even with all these issues, though, I was able to eventually get to the point where I could struggle through and very slowly build projects using Webflow, which sounds great, but what I didn't realize at the time was my development practices were awful.

The problem was I never truly learned to think and program the Webflow way. I was still trying to apply knowledge from drag and drop tools that just didn't work. I was that guy trying to position elements with margin and padding only to discover my layout fell apart as soon as I resize the window.

It took me a year of tough learning and late nights to realize my mistakes and then another year to truly learn how to build quickly and for scale in Webflow. In that process I stumbled upon the perfect learning technique that allowed me to develop in Webflow with such ease that I felt confident building any project. I want to share this knowledge with you so you can save yourself years of frustration and confusion and get straight to the fun part of Webflow, building beautiful websites FAST.

‍

It's all about relationships

Yes - a cheesy metaphor for life but also it's the key to building truly responsive layouts. Proper HTML structure is the first step in making sure your document will flow properly and adjust to different screen dimensions. Only once you have your HTML markup done correctly can you leverage powerful CSS tools like Flexbox, CSS Grid, and position absolute.

🤯 It took me months to learn that the Webflow navigator is just HTML and the styles pane is just CSS.

However, once I figured that out, I fell in love with Chrome devtools and codepen. I started reading code and found that my Webflow skills very improving WAY FASTER than it had before.

Once I dove into complex interactions, I finally realized the importance of relationships. Div Blocks were related to each other by parent, child, or sibling relationships and understanding this was the key to unlocking new skills in Webflow.

‍

There aren't any courses that bridge the gap between Webflow 101 and doing it professionally

There are a lot of great Webflow tutorials out there, but most of them don't get into the nitty gritty of what it really takes to launch a production-grade site. My very first client on Upwork wanted help building a job board website. He had already purchased a Brix template and I figured we could set him up with a thoughtful CMS design... until he said he wanted it to filter results without loading a new page - the Webflow default behavior!

I spent a night researching what was available in the forums until I came across two options: Jetboost and Finsweet CMS Library.

Jetboost was paid and Finsweet was free so you know what I went for. Also, this guy Joe Krug was all over YouTube talking about Webflow hacks and how he built this crazy jungle-themed website. He seemed like a smart guy and he was making Webflow do a lot of interesting things I didn't know it could do.

Day 2 of my first paid gig and I was writing (copy/pasting) Javascript! I thought I was supposed to be a no-code developer!

(Where were you when CMS Library was rebuilt as Attributes?)

It's pretty amazing what can be done WITHOUT code in Webflow, so that's my main focus of this course, but I'm completely serious when I say haven't had a single client project yet that didn't require SOME SORT or custom code.

This is not a CSS or Javascript course, but I do believe you'll need a basic understanding of how to find and use code snippets online. We'll work on that in this course :).

What's in the course?

Check out the cloneable

Check out the Figma file

Advanced responsive design techniques: We'll work with both Flexbox and CSS Grid to establish a strong understanding of responsive design. We'll go beyond direction, align, and justify properties to look at setting manual positions and we'll even catch a few bugs in Safari along the way because THAT'S WHAT HAPPENS WHEN YOU BUILD REAL WEBSITES.

Client-first v2 framework: The gold standard for Webflow community builds. I'm seeing it everywhere these days so it pays to understand the core concepts. We'll start from the blank Client First Cloneable and build everything WITHOUT libraries, components, or templates. By the end of this course you could make your own component library.

Tricky Layouts Demystified: What happens to full bleed (edge to edge) layouts on a 3000 pixel wide monitor? BUY THE COURSE I'D LOVE TO SHOW YOU! 🫡🫡

Position Absolute, Fixed, and Sticky: All the beasties are here. I swear once you get to know them they aren't so bad. Just let me introduce you...

Figma-to-Webflow plugin: It's a brand new tool that really offers a unique opportunity to improve the normal Figma to Webflow workflow (hint hint stylesheet transfers take only 2 minutes now!)

CMS Blog System with multi-reference categories: This ain't your mom's crochet blog (though it could be eh?). We'll leverage the full power of Webflow CMS by creating a multi-reference category collection that our blog utilizes.

Finsweet Attributes: We'll make the CMS blog items filterable with this Finsweet's fantastic, powerful Attributes library. You can't call yourself a Webflow developer and not use Finsweet's suite of tools.

Finsweet Accessible Components: We'll use this attribute-based solution to create the accessible modal that is missing in far too many Webflow builds.

Tabs Component with Custom CSS Animation: Customizing the Webflow native tabs component is pretty difficult without a little knowledge of CSS. I'll give you a gentle introduction here so that you can feel confident grabbing CSS code snippets from the corners of the internet (or ChatGPT) to help you get the perfect functionality.

My favorite scrolling marquee: With some CSS knowledge under our belt, we'll check out this super cool CSS-only scrolling marquee.

Advanced Webflow Slider Development Techniques: Webflow sliders are the trickiest of the bunch. Did you know it has a height already coded that doesn't appear in designer? Ever tried to fit 3 slides in one view instead of just one? It's rough, but worth knowing what's available. I'll show you how I work with the mask and UI elements to make you more confident using it in future projects.

<span> design elements with simple Javascript: We all need cool squigglies on our websites. I'll introduce you to Javascript with a few lines of code to append design elements to <span> tags.

My 32-point pre-launch checklist: This is the same checklist I use for REAL WEBSITES THAT I SELL FOR ACTUAL MONEY. It consistently helps me get green Lighthouse scores (>90) and ensures we don't let anything slip through the cracks (I'm looking at you, form success and error states).

Video List

Project Prep

• Figma Overview (3:25)
• Figma to Webflow Plugin (3:25)
• Stylesheet (3:11)

Webflow Build

• Navbar (9:42)
• Hero Image (5:15)
• Fonts Import (1:12)
• Hero Content (5:38)
• Favorite Stores Section (9:04)
• Features Section (14:51)
• Tabs Section (16:33)
• Testimonial Slider (16:44)
• Background Circle Design Elements (5:49)
• Blog Preview Section (19:43)
• Call to Action Section (4:08)
• Footer Start (4:40)
• Digression - Links (1:10)
• Footer Finish (1:06)

Advanced Techniques

• Span Design Elements (7:55)
• Scrolling Marquee (3:28)
• Tabs Animation w/ Custom CSS (8:09)
• Blog Preview Page (2:03)
• Finsweet CMS Filter - Search (6:07)
• Finsweet CMS Filter - Radio Buttons (3:04)
• Finsweet CMS Filter - Active Class (3:36)
• Blog Template Page (4:44)
• Navbar Links (0:38)
• Finsweet Accessible Components - Modal (14:23)
• Finsweet Disable Scroll on Modal Open (1:29)

Final Details

• Responsive Design - All Breakpoints (22:48)
• Feature Grid Manual Positions (4:25)
• Button Hovers (1:50)
• Tabs Component - Finishing Touches (2:00)
• Testimonial Slider - Finishing Touches (2:14)
• Blog Preview Card Hover (2:48)
• Blog Page Finishing Touches (0:49)
• Blog Template Page Sticky Aside and Finishing Touches (6:21)
• Finishing Touches - Nav Menu (2:15)
• Safari Debugging - CSS Grid (5:14)
• Modal - Finishing Touches (2:06)

Launch

• Prelaunch checklist (15:42)