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
  • <span> design elements with simple Javascript
  • Finsweet Attributes
  • Finsweet Accessible Popup Modal with Form
  • My 32-point pre-launch checklist
  • No templates - everything from scratch
Get the Course

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.


matt evans avatar

Matt Evans

"ChatGPT4 vs a @WebIsBae explainer video @WebIsBae wins every time. No contest."

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.


anjola omole avatar

Anjola Omole

"I understand the basics of layouts and the box model but I struggle with positioning items, responsive layouts and anything advanced really haha."


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 :).

corey moen avatar

Corey Moen

"I am a self-proclaimed Webflow Tech Lead, who works by day as a Sr. Brand Designer, Web at Webflow, and as a tenured Digital Designer and Webflow Developer by night. Keegan has been such a light in the community since he started sharing content around technical javascript and various other custom code challenges. It's clear he is up for any challenge that crosses his path, and pursues each project with a passion to deliver top quality, while educating others along the way."


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).

joe krug avatar

Joe Krug

"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."

Video List

Project Prep

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)


  • Prelaunch checklist (15:42)

Learn how to build REAL websites that you can sell for REAL money today

In this course, you'll learn advanced Webflow techniques to create a fully responsive (and accessible) website featuring a gorgeous fullscreen hero, popup modal with form, tabs component, testimonial slider, searchable CMS blog with Finsweet Attributes, custom code (CSS and Javascript), and so much more, all in Webflow. At the end, you'll have the skills to develop your own professional Webflow sites that you can sell to real clients.

Webflow 201

What's Included:

  • 40 videos, over 4 hours of content
  • Figma design file
  • Access to Discord to ask questions
  • Webflow Cloneable
$ 59.99 USD
$ 79.99 USD
Buy now


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?

No, I assume you don't know anything about HTML, CSS, or Javascript in this course. We will write some custom CSS and Javascript in this course, but I aim to provide a gentle introduction so that you can feel more confident copy/pasting snippets from around the web into your client projects. In my experience, every client project I've ever worked on required some sort of custom code, so I think it's important to have a basic understanding of the core principles behind HTML, CSS, and Javascript.

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?

The videos will have auto-generated subtitles. The video player can also auto-translate these auto-generated captions to the language of your choosing.‍

What if I buy the course and do not like it?

If you don't like it, simply email me at keegan@webbae.net within 30 days of purchase for a full refund.

Any other questions?

Just email me at keegan@webbae.net.



Web Bae avatar

Hey There! I'm Keegan Leary.

I've been using Webflow since 2020 and love how it enables us to create beautiful websites FAST. I went through a four-year Electrical Engineering program at UCLA and spent 10 years as a Submarine Nuclear Propulsion Officer in the Navy but learned nothing about web development. When I left the Navy, I was playing around with coding in Python and Unity, but was having trouble building things I felt confident charging REAL money for. When my friend introduced me to Webflow, I was overcome with excitement for the possibilities of being able to build websites without having to spin up my own content management system, or learn HTML and CSS. As my confidence grew, I took the leap into freelancing and was able to make money from anywhere in the world and control my own schedule. I had finally found some FREEDOM in my professional career. Since then, I've started sharing my learnings on YouTube and have really enjoyed unlocking even more possibilities by using custom code (CSS, Javascript) to augment the Webflow experience. I feel confident that I can build just about anything in Webflow now, and wish to share that with you.