EN IT
Home About Learn Blog
Beginner

Webflow Explained

The concepts behind Webflow — classes, positioning, flexbox, CMS structure, variables, and more — explained plainly so the tools finally make sense.

11 lessons

Most Webflow frustration isn’t about the buttons — it’s about the ideas underneath them. Why do classes cascade the way they do? When should you reach for flexbox over grid? How does the CMS really structure content? This course slows down and explains the concepts, so the Designer stops feeling like guesswork.

Each lesson takes one idea — classes, positioning, flexbox patterns, CMS folders, variables, and a few techniques that lean on them — and makes the mental model plain. No gatekeeping, no “just trust me”: once you understand why something works, you can apply it far beyond the example.

In this course

  1. 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.
  2. 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.
  3. 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.
  4. Staggered Split-Text Animations in Webflow (GSAP) Reveal headings word by word or letter by letter in Webflow with the native GSAP panel — master stagger, the From origin, Split Text, masks, and easing.
  5. 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.
  6. 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.
  7. Advanced-Looking Hover in Webflow (Just CSS) Build a card hover interaction in Webflow — darker border, scaling image, desaturated siblings — with no Interactions, just hover states, variables, and a little CSS.
  8. 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.
  9. Build a 3D CMS Slider in Webflow (Native + Finsweet) Build a premium 3D slider in Webflow with the native Slider, a CSS reflection, a Slider Change interaction, then make it CMS-driven with Finsweet.
  10. 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.
  11. Webflow Workspace Plans vs Site Plans, Explained Finally understand Webflow workspace plans, site plans, seats, and client seats — explained with one simple story so the official docs stop feeling confusing.