Workshops

Episode #

85

—

June 20, 2017

Bringing a static mockup to life in Webflow

In the next Webflow Workshop, we'll be transforming a static mock Dribbble user Gil Huybrecht created. After we rebuild the mock, we'll bring it to life by adding custom interactions and animations.

Design by:

https://dribbble.com/gilhuybrecht

https://dribbble.com/shots/3535879-Antelope-Canyon/attachments/784942

https://twitter.com/gilhuybrecht

----------

Clone this project: TBA

Discuss this episode

Clone this project

Timestamps

00:03:57 - Visual breakdown of the static mock

00:06:17 - Creating the left side navigation bar

00:20:20 - Creating the hero section

00:24:55 - Using Flexbox to space out the hero section content

00:33:00 - Making a custom lightbox link element

00:43:22 - Creating the bottom row of content for the hero section

00:49:49 - Creating the in-page section nav with custom interactions

01:01:30 - Q&A and site reviews

01:17:59 - Fixing the page to be mobile responsive

01:31:49 - Creating background scroll interactions

01:53:35 - Q&A and site reviews

‍

Past Workshops

How Webflow onboards new users

Chloe Qi

The brand design process at Webflow with Ryan Morrison and JP Teixeira

Webflow Ecommerce: new features, and what's ahead

Building responsive footers with CSS grid

Live Q&A with Vlad, CEO of Webflow (End of 2018)

Vlad Magdalin

Creating a split page layout in Webflow

A sneak peek at Grid in Webflow

Linda Pham

Creating full screen menus in Webflow

View All Past Workshops