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.

Lessons in this course

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

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!

Introduction

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

Download assets
Clone this project
Learn more
Transcript

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

Download assets
Clone this project
Learn more
Transcript

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.

Download assets
Clone this project
Learn more
Transcript

Homepage: navigation

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

Download assets
Clone this project
Learn more
Transcript

Homepage: testimonials

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

Download assets
Clone this project
Learn more
Transcript

Homepage: footer

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

Download assets
Clone this project
Learn more
Transcript

Homepage: responsiveness

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

Download assets
Clone this project
Learn more
Transcript

Portfolio page

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

Download assets
Clone this project
Learn more
Transcript

Portfolio page: responsiveness

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

Download assets
Clone this project
Learn more
Transcript

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.

Download assets
Clone this project
Learn more
Transcript

Portfolio page: client detail page responsiveness

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

Download assets
Clone this project
Learn more
Transcript

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.

Download assets
Clone this project
Learn more
Transcript

Process page: responsiveness

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

Download assets
Clone this project
Learn more
Transcript

Team page

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

Download assets
Clone this project
Learn more
Transcript

Team page: responsiveness

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

Download assets
Clone this project
Learn more
Transcript

Team page: team member detail page

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

Download assets
Clone this project
Learn more
Transcript

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.

Download assets
Clone this project
Learn more
Transcript

Contact page

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

Download assets
Clone this project
Learn more
Transcript

Contact page: responsiveness

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

Download assets
Clone this project
Learn more
Transcript

Contact page: reCAPTCHA setup

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

Download assets
Clone this project
Learn more
Transcript

Homepage revisited: secondary sections

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

Download assets
Clone this project
Learn more
Transcript

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

Download assets
Clone this project
Learn more
Transcript

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.

Download assets
Clone this project
Learn more
Transcript

Connecting a custom domain

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

Download assets
Clone this project
Learn more
Transcript

Publishing the website

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

Download assets
Clone this project
Learn more
Transcript

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.

Download assets
Clone this project
Learn more
Transcript

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser

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

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

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