Web Design with Webflow

This workbook turns the Web Design with Webflow course into a finished, live website: a multi-page marketing site plus a CMS-powered blog on your own domain. Each section maps to one course module and moves you from mastering the Designer and box model, through responsive flexbox and grid layout, into the CMS, and finally to interactions, a global style system, and a clean launch. Work through the items in order inside a single Webflow project and keep your class naming consistent throughout.

Get fluent in the Designer, the box model, and Webflow's class-based styling before you design anything serious.

In a blank Webflow project, add a Section, then nest a Container, a Div Block, a Heading set to h2, and a Paragraph inside it. Open the Navigator (Z) and study the nesting tree. Practice selecting the Paragraph, then pressing Escape repeatedly to climb to each parent. Do not style anything; the goal is to feel selection and nesting.

Build a simple card: a Div Block with a visible background color, 24px of padding on all sides, a Heading (h3), a Paragraph, and a button inside. Give the card a 32px top margin. Toggle the card background on and off to watch padding (inside, colored) versus margin (outside, transparent) behave.

Decide your class naming system before you create your tenth class. Fill in each value and write three example class names that follow your rule.

Build real layouts with flexbox and CSS Grid, then make them adapt cleanly across all four breakpoints.

Build a navbar as a flex parent (direction row, align items center, justify content space-between) with a logo on the left and three links on the right. Then build a three-card feature row as a flex parent with a 24px gap and align items stretch so all cards match the tallest. Use gap rather than per-child margins.

Create a six-cell image gallery using a Div Block set to display Grid, with a 3-column track of 1fr 1fr 1fr, two rows, and a 24px gap. Make one image span two columns to create a feature cell. Then change the grid to 2 columns at the tablet breakpoint and 1 column at mobile portrait.

For each key layout block, plan the specific changes you will make at each breakpoint. Remember the cascade flows downward only. Fill one row per block.

Model your content as a Collection, display it with a Collection List, and generate a page per item with a template.

Plan your Blog Posts collection before creating it. List every field, its type, and whether it is required. Add a row for each field, and note any supporting collections (Categories, Authors) you must build first.

Create the Blog Posts collection with at least six fields plus a referenced Categories collection, and add three or four real sample items. On the blog index page, add a Collection List, design one card, and bind the heading to Name, the image to Main Image, the summary to Summary, and the card link to the item. Sort newest first and style the Empty State.

Open the Blog Posts Collection Page template. Bind the title to Name, the hero image to Main Image, and the article body to the Rich Text Post Body field. Constrain the body to about 720px reading width. Bind the page Title Tag to Name and Meta Description to Summary. Add a related-posts Collection List filtered to the same category.

Add purposeful motion, lock in a global style system, run pre-launch QA, and publish to a custom domain.

Add a While Scrolling Into View interaction to your sections: initial state at 0 percent opacity and moved down 40px, visible state at 100 percent opacity and 0px. Add a Mouse Hover interaction to your cards: lift up 4px and increase the box shadow on hover, returning on hover-out, with a 200 to 300 millisecond ease-out duration.

Define your site-wide system so consistency happens by default. Fill in your variables and base type settings, then confirm your shared components.

Record the exact DNS values Webflow provides so you can connect your domain correctly. Connect the domain at least a day before any launch deadline to allow propagation.