Building a landing page with grid

In this course, we'll build a single-page landing page using grid in the Webflow Designer. We'll cover responsiveness in grid as it applies to each breakpoint: from desktop down to mobile portrait.

12
 Video Lessons
Intermediate
36 mins

About this course

This is a full site build from start to finish. In this course, we start by creating a hero section which uses fractional units inside a grid, and continue by building a brands logo wrapper, a grid-based call to action, and a grid-based footer. At the end, we'll do an accessibility check, configure our page settings, and publish our project for the world to see.

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • Treats/snacks

Course outline

Introduction

1:27

Hero section using FRs

8:22

Hero section responsiveness

3:51

Brands wrapper using grid

3:49

Brands wrapper responsiveness

2:17

Grid-based form

4:22

Form responsiveness

2:27

Grid-based footer

3:38

Footer responsiveness

1:40

Accessibility

1:33

Page Settings

1:32

12
 video lessons
Intermediate
36 mins