Freelance web design boot camp

Start off the year with a 21-day portfolio challenge

Beginner
6hr 4min

This course covers every step of a typical freelancing journey. Learn how to land high-paying clients, create standout proposals, price your work, and communicate with clients to establish trust and authority. Learn valuable content strategy skills, design principles, and how to design, build, and launch a professional custom client website. The Freelancer’s Journey offers the support, guidance, and resources you need to build a fulfilling and successful freelance career.

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Yes, this course is from the future.

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

Lessons in this course

Getting clients
Developing a content strategy
Design principles
Site build
Site launch
Portfolio

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
Bring your portfolio to life
13
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Summary

This course covers every step of a typical freelancing journey. Learn how to land high-paying clients, create standout proposals, price your work, and communicate with clients to establish trust and authority. Learn valuable content strategy skills, design principles, and how to design, build, and launch a professional custom client website. The Freelancer’s Journey offers the support, guidance, and resources you need to build a fulfilling and successful freelance career.

Open the completed project
Open the project with blank pages
Enroll for free

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Getting clients
Developing a content strategy
Design principles
Site build
Site launch
Portfolio

Related courses

Freelance web design boot camp

43
Lessons
Getting clients
Getting clients
Developing a content strategy
Developing a content strategy
Design principles
Design principles
Site build
Site build
Site launch
Site launch
Portfolio
Portfolio
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!

Learn how to start or grow your freelance career from the very beginning: getting clients, doing the work you want to do, and getting paid to do it.

Transcript
Download assets
Clone this project
Read the full article

The Freelancer's Journey introduction

Learn how to start or grow your freelance career from the very beginning: getting clients, doing the work you want to do, and getting paid to do it.

Transcript
Download assets
Clone this project
Read the full article

Introduction to getting clients

In this lesson, we'll cover trust and authority, then do a brief overview of both inbound and outbound marketing.

Transcript
Download assets
Clone this project
Read the full article

Client proposal research

We'll analyze 5 potential clients, identify their specific needs, and make informed recommendations to include in our client proposal.

Transcript
Download assets
Clone this project
Read the full article

Sending a proposal

We'll use the observations and recommendations from our client research to create a client proposal that communicates trust and authority.

Transcript
Download assets
Clone this project
Read the full article

Meeting a potential client

We'll take the concepts we’ve covered so far and prepare for our first scheduled client meeting.

Transcript
Download assets
Clone this project
Read the full article

Pricing your work

We'll cover everything you need to know confidently to price your services: valuing your work, pricing models, and saying "no" to free work.

Transcript
Download assets
Clone this project
Read the full article

The scope of work

We'll create scope of work that defines the client needs and clearly defines the services we're offering to meet those needs.

Transcript
Download assets
Clone this project
Read the full article

Learn about content-driven design and develop a content strategy that simplifies your design process and adds value for your clients — long after the build is done.

Transcript
Download assets
Clone this project
Read the full article

Content-driven design

An overview of content-first design, value propositions, visitor anticipation, and when to use an FAQ.

Transcript
Download assets
Clone this project
Read the full article

User stories & information architecture

We'll develop an information architecture that will inform the content strategy we develop for a client.

Develop an information architecture that informs your content strategy.

Transcript
Download assets
Clone this project
Read the full article

Content strategy

We'll develop a content strategy for each part of the client site: the homepage, portfolio, process, team, and contact pages.

Develop a content strategy for each part of your site: the homepage, portfolio, process, team, and contact pages.

Transcript
Download assets
Clone this project
Read the full article

Learn the principles of great design and bring your web design career to the next level.

Transcript
Download assets
Clone this project
Read the full article

Introduction to web design principles

We'll provide an overview of the web design principles that will be covered in this section of the course.

Transcript
Download assets
Clone this project
Read the full article

Visual hierarchy

We'll cover visual hierarchy and explain how to set up a hierarchy that adds clarity and emphasis to the right parts of your design.

Transcript
Download assets
Clone this project
Read the full article

Repetition

We'll cover repetition and explain how to use repetition to achieve consistency in your designs.

Transcript
Download assets
Clone this project
Read the full article

Grid systems & alignment

We'll cover alignment, knolling, when grids are useful — and when they’re not.

Transcript
Download assets
Clone this project
Read the full article

Space

We'll cover space: the visual blanks between elements in our design and how to use space to achieve legible, clean designs.

Transcript
Download assets
Clone this project
Read the full article

Typography

We'll cover display typefaces, super families, typeface versus font, and wrap up with some typography best practices.

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

Introduction

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

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

Learn how to feature the work you’ve done in a portfolio that attracts the clients you want to work for — and reflects the work you want to do.

Transcript
Download assets
Clone this project
Read the full article

Portfolio overview

In this video, we'll cover some of the best ways to present your work without having to build an intricate portfolio.

Transcript
Download assets
Clone this project
Read the full article

Showcasing your site

We'll showcase our site for Hayes Valley Interior Design on the Webflow Showcase.

Transcript
Download assets
Clone this project
Read the full article

Closing thoughts

This isn't the end of the journey. Everything we've built enhances our ability to move forward and grow our freelancing business.

Transcript
Download assets
Clone this project
Read the full article

Requirements

  • Free (or paid) 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

Stacy Han

Video Producer

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Mariah Driver

Head of Diversity, Equity, and Inclusion

https://twitter.com/Mariah__Driver

Article by

-

Edited by

Stacy Han

Video Producer

Grímur Grimsson

Video Producer

Designs by

McGuire Brannon

Director of Education

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.