Full site build

Start off the year with a 21-day portfolio challenge

Intermediate
4hr 17min

Start off the year with a 21-day portfolio challenge

Thinking you could never build a site from scratch? Follow along and let us prove you wrong — we've got you! In this site build section of the Freelancer's Journey, we'll build a full CMS-driven website in Webflow. Starting with a blank canvas, learn how to design a responsive layout, build a dynamic content management system (CMS), and successfully launch the site.

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Yes, this course is from the future.

Use this version to clone the completed project
Blank pages without hitting page limits
  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser

Lessons in this course

Getting started
Coming soon
Site build
Coming soon
Homepage: grid-based hero section
9:48
Coming soon
Portfolio page: client detail page
17:39
Coming soon
Portfolio page: client detail page responsiveness
8:12
Coming soon
Team page: team member detail page
17:40
Coming soon
Team page: team member detail page responsiveness
9:09
Coming soon
Homepage revisited: secondary sections
17:38
Coming soon
Site launch
Coming soon

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12

Summary

Thinking you could never build a site from scratch? Follow along and let us prove you wrong — we've got you! In this site build section of the Freelancer's Journey, we'll build a full CMS-driven website in Webflow. Starting with a blank canvas, learn how to design a responsive layout, build a dynamic content management system (CMS), and successfully launch the site.

Use this version to clone the completed project
Blank pages without hitting page limits
Enroll for free

Course outline

Getting started
Coming soon
Introduction
4:55
Coming soon
Site build
Coming soon
Homepage: grid-based hero section
9:48
Coming soon
Homepage: navigation
4:40
Coming soon
Homepage: testimonials
19:05
Coming soon
Homepage: footer
9:31
Coming soon
Homepage: responsiveness
22:57
Coming soon
Portfolio page
16:23
Coming soon
Portfolio page: responsiveness
6:48
Coming soon
Portfolio page: client detail page
17:39
Coming soon
Portfolio page: client detail page responsiveness
8:12
Coming soon
Process page
15:11
Coming soon
Process page: responsiveness
7:22
Coming soon
Team page
14:06
Coming soon
Team page: responsiveness
10:53
Coming soon
Team page: team member detail page
17:40
Coming soon
Team page: team member detail page responsiveness
9:09
Coming soon
Contact page
11:45
Coming soon
Contact page: responsiveness
4:14
Coming soon
Contact page: reCAPTCHA setup
2:41
Coming soon
Homepage revisited: secondary sections
17:38
Coming soon
Site launch
Coming soon
Pre-flight site review
16:53
Coming soon
Connecting a custom domain
4:12
Coming soon
Publishing the website
0:19
Coming soon
Preparing the CMS Editor
3:10
Coming soon

Related courses

Full site build

24
Lessons
Getting started
Getting started
Coming soon
Coming soon
Site build
Site build
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Site launch
Site launch
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Introduction

We'll provide an introduction to the site build section of the course.

Transcript
Download assets
Clone this project
Read the full article

Learn how to design and develop a full CMS-driven website for a client.

Transcript
Download assets
Clone this project
Read the full article

Homepage: grid-based hero section

Build a layout powered by CSS grid. This lesson covers building and stying the grid section, image block, content block, and body tag.

Transcript
Download assets
Clone this project
Read the full article

Homepage: navigation

Configure a site navigation bar that links to each major page and stays fixed to the top of the browser's viewport.

Transcript
Download assets
Clone this project
Read the full article

Homepage: testimonials

To emphasize both trust and authority for Hayes Valley Interior Design, we'll integrate CMS-driven testimonials on the homepage.

Transcript
Download assets
Clone this project
Read the full article

Homepage: footer

Build a grid-based footer section which houses the company logo, navigation links, and business information.

Transcript
Download assets
Clone this project
Read the full article

Homepage: responsiveness

Test and adapt responsiveness and fluidity for the homepage layout on desktop, tablet, mobile landscape, and mobile portrait.

Transcript
Download assets
Clone this project
Read the full article

Portfolio page

Build a portfolio page that spotlights the value your client has to offer their potential clients.

Transcript
Download assets
Clone this project
Read the full article

Portfolio page: responsiveness

Configure the portfolio page so that it is responsive across device and screen sizes.

Transcript
Download assets
Clone this project
Read the full article

Portfolio page: client detail page

We'll design a client detail page from scratch based on our CMS...and we'll watch as 8 more client detail pages generate automatically.

Transcript
Download assets
Clone this project
Read the full article

Portfolio page: client detail page responsiveness

We'll take our client detail page and optimize it for desktop, tablet, mobile landscape, and mobile portrait.

Transcript
Download assets
Clone this project
Read the full article

Process page

In this lesson, we'll break down each of the four steps clients go through when they work with Hayes Valley Interior Design.

Transcript
Download assets
Clone this project
Read the full article

Process page: responsiveness

The process page will be tested and optimized on desktop, tablet, mobile landscape, and mobile portrait.

Transcript
Download assets
Clone this project
Read the full article

Team page

The team behind Hayes Valley won't just get headshots; they'll get automatically-generated, CMS-driven links to their bio pages.

Transcript
Download assets
Clone this project
Read the full article

Team page: responsiveness

We'll take everything we designed in the team page and make it work across all device types.

Transcript
Download assets
Clone this project
Read the full article

Team page: team member detail page

We'll build a full bio page for each and every team member at Hayes Valley Interior Design.

Transcript
Download assets
Clone this project
Read the full article

Team page: team member detail page responsiveness

We'll take each team member's bio page and test and adapt it for desktop, tablet, mobile landscape, and mobile portrait.

Transcript
Download assets
Clone this project
Read the full article

Contact page

We'll make a full contact page that has a contact form and additional contact information for Hayes valley Interior Design.

Transcript
Download assets
Clone this project
Read the full article

Contact page: responsiveness

We'll make the contact form and the additional contact information work across all kinds of devices.

Transcript
Download assets
Clone this project
Read the full article

Contact page: reCAPTCHA setup

reCAPTCHA is more than a word. It's validation for humans using forms.

Transcript
Download assets
Clone this project
Read the full article

Homepage revisited: secondary sections

We'll revisit the homepage, adding sections that link to Hayes Valley Interior Design's process and team member pages.

Transcript
Download assets
Clone this project
Read the full article

Learn how to prepare a client site and the CMS Editor so that your client is confident with the finished product.

Transcript
Download assets
Clone this project
Read the full article

Pre-flight site review

We'll do a review of each page on the Hayes Valley site before we send a link to the staging domain to Rebecca.

Transcript
Download assets
Clone this project
Read the full article

Connecting a custom domain

We'll connect a custom domain for Hayes Valley Interior Design using Google Domains.

Transcript
Download assets
Clone this project
Read the full article

Publishing the website

In this in-depth video, we'll cover publishing the completed website to the custom domain.

Transcript
Download assets
Clone this project
Read the full article

Preparing the CMS Editor

We'll set up the CMS Editor so the team at Hayes Valley Interior Design can go in, make changes, and publish their own site.

Transcript
Download assets
Clone this project
Read the full article

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

McGuire Brannon

Director of Education

Designs by

-

Related courses

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

Shoot, something didn't work. Try again later, bud.