Workshops

Episode #

84

—

June 13, 2017

Rebuilding the Freelance.tv homepage in Webflow

Freelance.tv, created by Dann Petty, has a very eye catching, yet simple layout that could easily be recreated in Webflow. In this workshop, we'll focus on background videos, flexbox and lightboxes.

Dann Petty:

http://freelance.tv

https://www.youtube.com/user/dannpetty

https://www.facebook.com/freelancedottv

https://twitter.com/dannpetty

https://www.instagram.com/dannpetty/

------

Clone this project: tba

Discuss this episode

Clone this project

Timestamps

00:05:40 - Visual breakdown

00:09:18 - The build begins

00:14:32 - Creating the top bar with social icons and a newsletter sign up form

00:28:22 - Creating the main navbar

00:36:30 - Building the hero row content with flexbox

00:41:30 - DINOPLAYFUN figures out why the new section pushed the background video down

00:44:19 - Adding a lightbox component with a custom interactive play button

01:03:37 - Creating the intro paragraph row with a YouTube subscribe button

01:08:34 - Creating the "full episodes" card with flexbox

01:32:05 - Q&A and site reviews

01:36:01 - Creating the footer row

01:39:30 - Fixing the layout to become responsive

01:52:32 - 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