Mastering Native Webflow
Go beyond the basics of native Webflow — how classes really work, CSS positioning, Flexbox layout patterns, fluid hover effects, and pro workflow tricks. No plugins.
Most Webflow “advanced” tricks are really just the native tools used well. This course is about getting genuinely fluent with what Webflow already gives you — no plugins, no libraries, just a deeper, more confident grasp of the fundamentals that everything else is built on.
We start with the concept every single style depends on — classes, and what really happens when you rename, duplicate, or combo them — then work through CSS positioning (static to sticky), reusable Flexbox layout patterns, and smooth hover underlines built with nothing but box-shadow. Along the way you’ll pick up pro-workflow moves too: simulating a landscape viewport right in the Designer, and a CMS folder trick for a cleaner URL architecture. By the end, native Webflow stops feeling limiting and starts feeling like a superpower.
Your route through the course
-
Webflow classes: share a style, create a variation
Learn to share styles, create variations and predict which elements will change through Webflow exercises guided by your own AI assistant.
-
CSS Positioning in Webflow: Everything You Need
Master position in Webflow — static, relative, absolute, fixed, and sticky — plus how offsets, stacking, and reference containers actually behave.
-
Flexbox in Webflow: three layout patterns
Build three Webflow layouts: equal-width columns, cards that wrap onto new rows, and text with a side index. Your AI tutor guides the exercises.
-
Smooth Hover Underlines in Webflow (Box-Shadow)
Build smooth, growing hover underline effects in Webflow with box-shadow and CSS transitions — from bottom, top, left, right, to full-height fills, no code.
-
Test Landscape Viewports in the Webflow Designer
Simulate a landscape (short) viewport right inside the Webflow Designer with one number variable and a calc() height — no publishing, no dev tools.
-
Nest CMS Categories Under /blog in Webflow
Use a little Webflow glitch to nest a CMS collection under an existing collection path — like /blog/categories/… — for a cleaner, more intentional content structure.
-
Build Accessible Breadcrumbs in Webflow (Manual + Auto)
Build two reusable, accessible breadcrumb systems in Webflow — a manual component you configure by hand and an automatic one that reads the URL for you.
-
Build a No-Code Masonry Layout in Webflow
Create a Pinterest-style masonry layout in Webflow using pure CSS columns — no plugins, no JavaScript, fully responsive and ready for the CMS.
-
Build a Horizontal Masonry Layout in Webflow
Recreate a fully responsive, accessible horizontal masonry gallery in Webflow using only Flexbox — no custom code — then wire it up to the CMS.
-
Inner Grid Borders in Webflow: Responsive & Accessible
Create clean inner borders between Webflow grid items using only gap and background color — fully responsive and accessible, even with CMS content.
-
Build a Cursor-Following Glow Effect in Webflow
Create a glow that follows the cursor across a grid of cards in Webflow using variables, native interactions, and a few lines of CSS — no JavaScript.
-
Build a Logo Glow Hover Effect in Webflow (No Code)
Create a glowing logo-on-hover effect in Webflow with no code — using CSS masking, a backdrop-filter blur, and layered move and scale transforms.
-
Build a Parametric Neon Glow Effect in Webflow
Recreate Webflow's retro neon glow on hover with a parametric system built on CSS variables, color-mix(), and swappable variable modes — no manual color picking.
-
Apple Liquid Glass Navbar in Webflow (No Code)
Recreate Apple's liquid glass navbar in Webflow with layered divs and a tiny SVG filter — no external libraries and no heavy code, just native elements.
-
Webflow Spotlight Effect With a GSAP Prism Filter
Build a cursor-following spotlight in Webflow with a radial gradient overlay, then layer on a GSAP-powered SVG prism filter for a premium color-shift glow.