Build production-grade Webflow sites that you can sell for real money
- Over 4 hours of no-fluff on-demand video content
- Advanced responsive design techniques
- Figma-to-Webflow plugin
- Client-first v2 framework
- Advanced Layouts (full bleed)
- CMS Blog System with multi-reference categories
- My favorite scrolling marquee
- Tabs Component with Custom CSS Animation
- Advanced Webflow Slider Development Techniques
- Position Absolute, Fixed, and Sticky
- Finsweet Attributes
- Finsweet Accessible Popup Modal with Form
- My 32-point pre-launch checklist
- No templates - everything from scratch
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.
(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.
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.
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).
"Keegan has had immediate impact on the Finsweet Technical Developer team. He has a powerful mix of technical knowledge and Webflow experience, which makes him a valued member of our technical team. I'm always impressed by the contributions he makes to the Webflow community. If Keegan is offering something, I recommend it."
- Figma Overview (3:25)
- Figma to Webflow Plugin (3:25)
- Stylesheet (3:11)
- 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)
- 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)
- 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)
- Prelaunch checklist (15:42)
- 40 videos, over 4 hours of content
- Figma design file
- Access to Discord to ask questions
- Webflow Cloneable
What do I need to know to take this course?
This course is ideal for someone who has completed Webflow introductory tutorials on Webflow University (Webflow 101, 21 day design portfolio course, etc) and is looking to take the next step to intermediate/advanced Webflow builds that you could sell. Ideally, you've also tried building a few sites of your own and have run into problems with responsive/efficient development for more complex layouts. It will also help if you've explored various unit types including REM, EM, VW, %, DVH but fine to just understand the basic concepts behind them.
I prefer tutorials that get straight to the point and reveal efficient ways of doing things. As a result, I don't spend a lot of time in this course reviewing theory behind concepts you could easily learn about from Webflow University courses, documentation, and one-off YouTube videos. If you don't understand something though, I'll be happy to answer questions in the course Discord channel.
The goal of this course is to get you to a point where you understand what is needed to sell a REAL website to a REAL client for REAL money as quickly as possible.
How do I access the course after purchasing it?
You'll receive an email with a link to the course. Additionally, you can access the course via your use dashboard on webbae.net or simply by visiting the course page.
Do I need to know how to code?
When was this course recorded?
I recorded this content in April 2023, right after Webflow made the top bar span the whole window width :). I even use the Figma to Webflow Plugin which was just recently released at the time of recording.
Do the videos have subtitles?
What if I buy the course and do not like it?
If you don't like it, simply email me at firstname.lastname@example.org within 30 days of purchase for a full refund.
Any other questions?
Just email me at email@example.com.
Hey There! I'm Keegan Leary.