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.
15 lessons
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.
In this course
- Master Webflow Classes: Combo, Global & Beyond Understand how classes really work in Webflow — renaming, duplicating, combo classes, global classes, and how Webflow rewrites your class names on publish.
- 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 Design Patterns in Webflow Build three reusable Flexbox layout patterns in Webflow — even columns, a fluid grid-ish layout, and content + sidebar — and understand why each one works.
- 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.