Web & Interface Design

Web Design with Webflow

Design and launch real websites in Webflow, no code required

12 lessons4 modules9h 45m durationbeginner level

Instructor: StretchLearn Faculty

About this course

This course takes you from an empty Webflow project to a live, responsive, content-driven site. You will learn how Webflow maps the visual canvas to real HTML and CSS, build layouts with flexbox and CSS Grid, structure dynamic content with CMS Collections, add scroll and hover interactions, and publish to a custom domain. By the end you have a multi-page marketing site plus a CMS-powered blog, built entirely without code.

Curriculum

Module 1: The Webflow Designer and How the Web Works3 lessons

Touring the Designer: Canvas, Panels, and the NavigatorPreview45m
The Box Model and the HTML Tags Behind Every Element🔒50m
Classes: Webflow's Styling System Demystified🔒50m

Module 2: Responsive Layout with Flexbox and Grid3 lessons

Flexbox: Aligning and Distributing in One Direction🔒50m
CSS Grid: Two-Dimensional Layouts🔒50m
Breakpoints and the Mobile-First Mindset🔒45m

Module 3: Dynamic Content with the Webflow CMS3 lessons

Collections and Fields: Structuring Your Content🔒50m
Collection Lists and Dynamic Binding🔒50m
Collection Pages: Templates for Every Item🔒45m

Module 4: Interactions, Polish, and Going Live3 lessons

Interactions: Hover and Scroll Animations Without Code🔒50m
A Global Style System: Variables, Typography, and Components🔒50m
Pre-Launch QA, SEO, and Publishing to a Custom Domain🔒50m