Free Course

Freelance Web Design & Development

Master the complete freelance system with 3 comprehensive free modules covering mindset, tools, and portfolio strategy.

Get Access to the Full Course[FREE]Modules 1, 2, 3

What's Inside

  • 3 modules and 14 lessons covering mindset, tools, and portfolio strategy
  • About 35% of the full guide's content included in this free version
  • 100% free — built to help you start earning your first $$

FREE MODULE

MODULE 1

Mindset & Market Reality

"Understand the game before you play it"

MILESTONE

Written 90-day plan + niche hypothesis

Lessons in this module

1.1 Why Freelancing Works — and Why Most Fail

1.2 Choosing Your Stack & Specialization

1.3 Picking Your Niche — The $10K/Month Decision

1.4 Setting Goals & Building Your 90-Day Plan

MODULE 1LESSON 1.1

Why Freelancing Works — and Why Most Fail

The 3 income phases · Building a business vs. a hustle

The Honest Truth About Freelancing

Freelance web design and development is one of the most accessible paths to a high income in 2025 — but only for people who treat it like a business from day one. The web is the world's largest marketplace, and every single business on the planet either has a website already or needs one. The demand is enormous and growing. The Bureau of Labor Statistics projects web developer employment to grow 7% between 2024 and 2034 — more than twice the average for all occupations.
Yet the majority of people who try freelancing fail within the first six months. Not because they can't code or design. Because they have no system. They rely on luck, post in random Facebook groups, wait for referrals that never arrive, and burn out wondering why clients aren't finding them. This course fixes that. You will leave with a repeatable, predictable system for getting clients and growing income.

Why Most Freelancers Fail: The Real Reasons

No niche. Generalists compete on price. Specialists command premium fees. 'I do websites' is not a business offer.
No portfolio system. They wait for real clients before building a portfolio. You will build yours first — with or without clients.
No outreach process. They post once on Instagram and wait. Clients don't come to you in year one; you go to them.
Underpricing out of fear. New freelancers charge $200 for a site that should cost $1,500 and resent every minute of it.
No contract, no deposit. One bad client with no contract will wipe out months of profit and morale.
Feast-or-famine cycle. They work on a project, ignore marketing; when it ends, they scramble. No pipeline = no business.

The 3 Income Phases Every Freelancer Goes Through

Understanding which phase you're in removes anxiety and sets the right expectations. Most beginners try to skip Phase 1 and go straight to Phase 3. That never works.

PhaseTimelineMonthly RevenueYour #1 Focus
Phase 1: SurvivalMonths 1–3$0 – $2,000First 2–3 clients, proof of concept
Phase 2: StabilityMonths 4–9$2,000 – $6,000Repeatable pipeline, retainers
Phase 3: ScaleMonth 10+$6,000 – $15,000+Systems, team, passive income

KEY INSIGHT: Building a Business vs. a Hustle

A hustle trades time for money and stops when you stop. A business has systems, a pipeline, packages, and repeatable processes that work while you sleep. Every decision you make from day one should be building toward the business, not the hustle. This means: creating templates, writing processes down, raising rates intentionally, and never relying on a single client for more than 40% of revenue.

What the First 90 Days Actually Look Like

Week 1–2: Set up your mindset, choose your niche, pick your tools. Week 3–4: Build two spec sites and publish your portfolio. Week 5–6: Begin warm outreach — message 50 people in your network. Week 7–8: Apply to five freelance platform projects. First paid project. Week 9–10: Deliver excellently, request testimonial, ask for referral. Week 11–12: Follow up on all warm leads, begin cold outreach to local businesses. By the end of month 3, you should have 1–2 paid projects completed and a working pipeline.

Common Mindset Trap: Waiting Until You're Ready

There is no 'ready.' Every successful freelancer launched before they felt confident. The first client teaches you more than 100 hours of tutorials. Your job in week one is not perfection — it is momentum. Progress beats perfection every single time.

ACTION TASK — Before You Move On

  • Write down in a notebook or Google Doc:
  • 1. Why do you want to freelance? (Be honest — freedom, income, escape a job?)
  • 2. What is your current monthly income goal for month 3?
  • 3. What is your biggest fear about starting? Name it out loud.
  • Naming your fears removes their power. Keep this document — you'll look back at it.
MODULE 1LESSON 1.2

Choosing Your Stack & Specialization

Frontend · Full-stack · No-code — what the market actually pays for

Stack Choices: The Decision That Shapes Everything

The tool you choose to build websites is not just a technical decision — it determines your client type, your income ceiling, your learning curve, and how fast you can deliver projects. In 2025, three paths dominate the freelance web market.

Path 1: No-Code / Visual Builders

Tools: WordPress + Elementor/Divi, Webflow, Framer, Squarespace, Wix. No-code is the fastest path to your first dollar. You can build a professional 5-page business website in a weekend without writing a single line of code. The market for no-code sites is enormous — the vast majority of small businesses don't need custom code; they need a good-looking, functional site.
Income range: $800 – $8,000 per project. Best for: Beginners who want clients fast. Ceiling: High — Webflow specialists regularly charge $5,000–$15,000 for complex builds.

Path 2: Frontend Custom Code

Tools: HTML, CSS, JavaScript, React, Tailwind CSS. You build sites from scratch with code. Higher perceived value, more complex projects, higher rates — but a steeper learning curve. Typical timeline to first paid project: 3–6 months of learning before you're client-ready.
Income range: $2,000 – $20,000+ per project. Best for: Those willing to invest 3–6 months learning before earning. Ceiling: Very high.

Path 3: Full-Stack Development

Tools: Node.js, Python/Django, PHP/Laravel, databases, APIs. Full-stack adds backend logic, databases, and server-side work. This is the highest-paying path but requires the most skill. Not recommended for pure beginners — focus on one front end first, add backend later.
Income range: $5,000 – $50,000+ per project. Best for: Those with existing dev background or willing to invest 12+ months.

PathTime to First $Typical RateBest Tool to Learn First
No-code (WordPress)2–6 weeks$800–$5,000/siteWordPress + Elementor
No-code (Webflow)4–8 weeks$2,000–$12,000/siteWebflow University (free)
Frontend custom code3–5 months$2,000–$15,000/siteHTML/CSS JavaScript
Full-stack6–12 months$5,000–$50,000+Node.js or Django

Recommended Starter Stack for Beginners (2025)

WordPress + Elementor OR Webflow. Both have massive job markets, excellent free learning resources, and let you deliver professional results fast. WordPress powers 43% of all websites on the internet — the demand is virtually unlimited. Webflow is growing fast with agencies and offers higher rates. Pick one. Learn it deeply. Resist tool-hopping.

The 'Learn vs. Earn' Balance

Many beginners spend 12 months learning before they ever try to get a client. This is a mistake. The correct approach: learn just enough to deliver a basic site (4–6 weeks), then get your first client. You will learn 10x more working on a real project with a real deadline than you ever will from tutorials alone. Tutorials teach syntax. Clients teach business.

ACTION TASK — Stack Decision

  • Decide your path right now. Write it down:
  • My chosen stack is: [WordPress / Webflow / Custom Code]
  • My reason: [speed to income / existing skills / long-term interest]
  • Time I will commit to learning per week: [X hours]
  • Date I will have my first demo site built: [DATE]
MODULE 1LESSON 1.3

Picking Your Niche — The $10K/Month Decision

High-value niches · Evaluation framework · Specialists earn 2–3x more

Why Niche Selection Is the Highest-ROI Decision You'll Make

If you only take one thing seriously from this entire module, make it this: picking a niche will make or break your freelance business. A freelancer who says 'I build websites for everyone' competes with every other web designer on price. A freelancer who says 'I build websites for dental practices in Texas' competes with almost no one — and can charge accordingly.
Specialists consistently earn 2–3x more than generalists for equivalent work. A dentist is far more likely to hire someone who specifically understands their industry, their patient acquisition challenges, and their compliance needs — even if that specialist charges double.

The 3 Niche Dimensions

A strong niche has up to three dimensions: Who (the client type), What (the service), and Where (geography or platform). You don't need all three, but more specificity = less competition and higher rates.

Vague (avoid)GoodExcellent
Web designerWeb designer for restaurantsWebflow designer for upscale restaurants in NYC
WordPress developerWordPress developer for coachesWordPress + membership sites for online business coaches
Website builderE-commerce developerShopify developer for beauty & cosmetics brands
UI/UX designerDesigner for SaaS startupsMobile-first UI designer for B2B SaaS products

High-Value Niches in 2025

Healthcare & Medical Practices: $3,000–$10,000/site — doctors, dentists, physios all need local SEO sites. High trust = high budget.
Law Firms & Legal Services: $4,000–$15,000/site — lawyers understand the value of digital presence and have the budget.
Real Estate Agents & Brokerages: $2,000–$8,000/site — highly competitive space, agents spend freely on marketing.
Restaurants & Food Businesses: $1,500–$5,000/site — huge volume, repeat maintenance revenue from menu updates.
E-commerce (Shopify/WooCommerce): $5,000–$25,000/store — the most lucrative single project type.
SaaS & Tech Startups: $8,000–$40,000/project — high budgets, complex needs, repeat work.
Coaches & Course Creators: $2,000–$8,000/site — exploding market, need memberships and funnels.
Local Service Businesses: $1,200–$4,000/site — plumbers, electricians, landscapers — volume play.

The Niche Evaluation Framework

Score each potential niche on these 5 criteria (1–5 each). Highest score wins.

CriterionWhat to AskScore /5
Market sizeAre there thousands of potential clients?
Willingness to payDo they spend money on marketing?
Your interest/knowledgeDo you already know this industry?
Competition levelAre there few niche specialists?
Recurring revenue potentialDo they need ongoing maintenance?

Niche Paralysis Is Real — Here's How to Beat It

You don't need to commit to a niche forever. Pick the best hypothesis right now and test it for 60 days. If you get interest, go deeper. If not, pivot. Your niche evolves with your portfolio and your clients. Action beats analysis every time.

ACTION TASK — Write Your Niche Statement

  • Write your niche hypothesis:
  • I help [TYPE OF BUSINESS] get [SPECIFIC RESULT] through [YOUR SERVICE].
  • Example: 'I help independent restaurants in [City] attract more customers through professionally designed, mobile-first websites and Google Business optimization.'
MODULE 1LESSON 1.4

Setting Goals & Building Your 90-Day Plan

Realistic revenue targets · The part-time to full-time roadmap

The Document That Separates Dreamers from Earners

A 90-day plan is a specific, written, week-by-week action plan. It replaces vague ambitions ('I want more clients') with concrete targets ('I will send 10 outreach messages per day Monday–Friday, targeting restaurant owners in my city'). People with written plans are 42% more likely to achieve their goals — and in freelancing, the gap between having a plan and not having one is the difference between $0 and $3,000 in month three.

Setting Realistic Revenue Targets

TimelineRealistic Monthly RevenueHow to Get There
Month 1$0 – $8001 small project or 1 free project for testimonial
Month 2$500 – $2,0001–2 paid projects, word-of-mouth starting
Month 3$1,500 – $4,0002–3 projects, first retainer client
Month 6$3,000 – $7,000Steady pipeline, raised rates, repeat clients
Month 12$5,000 – $15,000+Referral engine, retainers, possibly outsourcing

Your 90-Day Weekly Action Plan Template

Week 1–2: Choose niche. Choose stack. Set up Figma and your build tool. Study 1–2 examples of excellent sites in your niche.
Week 3–4: Build Spec Site #1 — a fake business in your niche. Publish it live. Create a simple portfolio page (even one page is enough).
Week 5–6: Build Spec Site #2. Write your first case study. Create your outreach message template. Message 20 people in your network.
Week 7–8: Apply to 5 freelance platform projects (Upwork or Contra). Send 5 cold emails to local businesses with bad websites. First discovery call if possible.
Week 9–10: Deliver your first project (paid or pro-bono). Request a testimonial. Add the project to your portfolio. Ask for one referral.
Week 11–12: Follow up on all warm leads. Begin posting once a week on LinkedIn. Research agency partnership opportunities. Plan month 4.

Part-Time to Full-Time Roadmap

Most people starting freelance are doing it alongside a job. That's smart — never quit your job until your freelance income has replaced at least 80% of your salary for three consecutive months. Here's the typical transition path:
Months 1–3: Side income ($0–$2K/mo). Nights and weekends. Build portfolio, land first clients.
Months 4–6: Part-time serious ($2K–$5K/mo). Consider reducing hours at job. Strong pipeline forming.
Months 7–9: Transition zone ($4K–$8K/mo). When 3 months consistent income = your salary, plan the exit.
Month 10+: Full-time freelance. Full focus, higher rates, scaling begins.

Module 1 Complete — Key Takeaways

Most freelancers fail from lack of system, not lack of skill. Pick your stack (WordPress or Webflow recommended) and commit for 90 days. Niche down immediately — specialists earn 2–3x generalists. Write your 90-day plan this week. Then execute it one week at a time.

MODULE 1 MILESTONE — 90-Day Plan

  • Write your full 90-day plan. Include:
  • • Your income goal for months 1, 3, 6, and 12
  • • Your chosen niche and stack
  • • Week-by-week tasks for the next 12 weeks (use the template above)
  • • The date you will have your portfolio live
  • Keep this document open. Review it every Sunday.

FREE MODULE

MODULE 2

Skills, Tools & Tech Stack

"Get tool-ready — know what to learn, skip the rest"

MILESTONE

Working demo site published live

Lessons in this module

2.1 The Minimal Viable Tech Stack

2.2 Design Fundamentals for Non-Designers

2.3 The Modern Web Designer's Workflow

2.4 AI Tools That Will Double Your Speed

2.5 Build Your First Demo Site

MODULE 2LESSON 2.1

The Minimal Viable Tech Stack

WordPress vs. Webflow vs. custom code — which path to take and when

The Tool Trap: Why Less Is More

One of the biggest mistakes new web designers make is tool-hopping. They spend three months learning WordPress, then switch to Webflow, then see a YouTube video about Framer, then spend a week comparing React frameworks. Meanwhile, someone else landed four clients. The rule is simple: pick one build tool, become excellent at it, earn money. Add tools only when a client's needs genuinely require it.

Your Core Tool Stack

Design — Figma: Free tier is more than enough. Used by virtually every professional design team. Learn the basics in 2–3 days. Cost: figma.com — free
Code Editor — VS Code: Free, industry-standard editor for all code. Thousands of extensions. Even if you use no-code tools, you'll need this for tweaks. Cost: code.visualstudio.com — free
CMS / Builder — WordPress + Elementor OR Webflow: WordPress powers 43% of the web. Elementor makes it visual and fast. Webflow offers cleaner code, steeper learning, higher-end clients. Cost: Both have free plans to start
Local Dev — Local by Flywheel: Test WordPress sites on your own computer before pushing live. No hosting costs during development. Cost: localwp.com — free
Version Control — GitHub: Save and track every version of your code. Looks professional to developer clients. Free for public repos. Cost: github.com — free
AI Assist — Claude or GitHub Copilot: Claude for writing, strategy, and code generation. Copilot for inline code completion as you type. Both are transformative for speed. Cost: claude.ai / GitHub Copilot
Project Management — Notion or Trello: Track client projects, deliverables, deadlines. Keep everything out of your head and into a system. Cost: Free tiers sufficient
Invoicing — Wave or Bonsai: Send professional invoices, accept online payments, track expenses. Wave is free; Bonsai is $24/mo with more features. Cost: waveapps.com — free

Total Cost of Your Starter Stack: $0–$50/month

Every tool above has a free tier sufficient to start. You do not need to spend money on tools before you have clients. Once you earn your first $1,000, invest $25–$50/month in a Webflow plan or Bonsai for professional invoicing. Your tools cost should never exceed 5% of your revenue.

WordPress vs. Webflow: The Real Comparison

FactorWordPress + ElementorWebflow
Learning curveModerate (2–4 weeks)Moderate-high (4–8 weeks)
Client baseSMBs, local businesses, blogsAgencies, startups, tech companies
Typical project rate$800–$5,000$2,000–$12,000
HostingClient managesWebflow Hosting (built-in)
Code qualityVariable (plugin-dependent)Clean semantic HTML/CSS
Job market sizeEnormousGrowing fast, niche premium

ACTION TASK — Stack Setup Checklist

  • This week — set up your entire tool stack:
  • [ ] Create a free Figma account at figma.com
  • [ ] Install VS Code at code.visualstudio.com
  • [ ] Create a free WordPress.com or Webflow.com account
  • [ ] Download Local by Flywheel (for WordPress users)
  • [ ] Create a GitHub account
  • [ ] Sign up for Claude at claude.ai (free tier)
  • [ ] Set up a free Notion account for project management
MODULE 2LESSON 2.2

Design Fundamentals for Non-Designers

Contrast · Repetition · Alignment · Proximity · Color · Typography

You Don't Need to Be an Artist — You Need to Know the Rules

The most common fear among non-designers entering web design is 'I'm not creative.' Here's the truth: professional web design is 80% following established principles and 20% creative judgement. The principles can be learned in a single week. Once you understand them, you'll look at any website and immediately know what's working, what isn't, and how to fix it.

The 4 Core Design Principles (C.R.A.P.)

Every well-designed website uses these four principles. They were formalized by designer Robin Williams and remain the foundation of all visual communication.
Contrast: Make different things look different. Headlines vs body text. Buttons vs background. Dark vs light. If two elements aren't the same, make them very different — never almost the same. Almost-same is the enemy of good design.
Repetition: Repeat design elements throughout the site. Same font for all H2s. Same button color everywhere. Same card layout for all service items. Repetition creates consistency and professionalism.
Alignment: Nothing is placed randomly. Every element aligns to an invisible grid. Left-aligned text, right-aligned images — both work, but they must be intentional. Misalignment looks amateurish.
Proximity: Related items group together. The heading and its description should be close. Unrelated items have space between them. White space is not empty — it's a design element that guides the eye.

Color Theory Essentials

You don't need to understand the full color wheel. You need three colors per website: a primary (your brand color), a secondary (for accents), and a neutral (for text and backgrounds). Use the 60-30-10 rule: 60% neutral, 30% primary, 10% accent.
Safe starter palettes for business sites: Navy + White + Gold | Dark Green + Cream + Forest | Deep Blue + Light Gray + Orange. Use Coolors.co or Adobe Color to generate professional palettes instantly. Never use more than 3 main colors on a site.

Typography Basics

Typography is the single fastest way to make a site look professional or amateur. Follow these rules and your sites will immediately look better than 80% of what's out there:
• Use maximum 2 font families per site — one for headlines, one for body.
• Never use decorative fonts for body text — readability is non-negotiable.
• Body text should be 15–18px on desktop, 16px on mobile.
• Line height (leading) should be 1.5–1.7x your font size.
• Headlines: bold, large, high contrast. Body: regular weight, medium contrast.
• Google Fonts: Inter, Plus Jakarta Sans, DM Sans are all professional and free.
• Avoid Comic Sans, Papyrus, and any font that feels 'fun' by default.

Free Design Resources to Bookmark Today

Coolors.co — instant color palette generator Google Fonts — 1,000+ free professional fonts Unsplash.com — free high-quality stock photography Awwwards.com — inspiration from award-winning websites Refero.design — real-world UI design references UI Patterns (ui-patterns.com) — common UI solution library

ACTION TASK — Design Audit Exercise

  • Choose a website you use regularly and audit it:
  • Does it use contrast effectively? (Headlines vs body, buttons vs background)
  • Is there visual repetition? (Consistent buttons, fonts, spacing)
  • Is everything aligned to a grid?
  • Are related items grouped together?
  • Name one thing that works well and one thing you'd improve.
MODULE 2LESSON 2.3

The Modern Web Designer's Workflow

Discovery to delivery · 6-step process · Responsive design · Wireframing

How Professional Projects Actually Run

Most beginners dive straight into design without a structured process, which leads to scope creep, endless revisions, and clients who are never happy. The professionals who consistently deliver great results and get repeat clients follow a disciplined process every single time. Here is the 6-step workflow used by top freelancers.
Step 1: Discovery (30–60 minutes)
Before touching any design tool, understand the client's business. Complete the onboarding questionnaire (Module 7). Key questions: What's the main goal of the site? Who is the target customer? What sites do you like/dislike? What does success look like in 6 months?
Step 2: Research & Inspiration (1–3 hours)
Research the client's industry. Look at 5–10 competitor sites. Identify design patterns that work in this niche. Collect 3–5 inspiration examples to share with the client in a mood board. Tools: Awwwards, Behance, Mobbin.
Step 3: Wireframe (2–4 hours)
Build a low-fidelity wireframe — grey boxes and placeholder text that defines the layout before any visual design. This prevents you from wasting time on detailed design that the client changes. Wireframe in Figma or even on paper. Get client approval before moving to design.
Step 4: Design (4–12 hours)
Create the high-fidelity design in Figma or directly in your build tool. Apply color, typography, imagery, and content. For WordPress/Webflow, you may design directly in the builder rather than Figma first. Present 1 design direction (not 3) — too many options leads to confusion and scope creep.
Step 5: Build (4–20 hours)
Implement the design in your chosen tool. Build mobile-first — design for 375px wide first, then scale up to desktop. Test on real devices. Check loading speed with Google PageSpeed Insights. All images should be under 200KB.
Step 6: Review & Launch (1–3 hours)
Run your pre-launch checklist (Module 7). Send to client for final sign-off. Launch. Request a testimonial within 48 hours. Hand over credentials and a simple guide so the client can make basic updates.

Responsive Design: Non-Negotiable in 2025

Over 60% of all web traffic comes from mobile devices. A site that doesn't work perfectly on mobile is a broken site. Both WordPress/Elementor and Webflow handle responsive design visually — you can switch between desktop, tablet, and mobile views in the builder and adjust each breakpoint separately.
Mobile-first rule: Always design and test on mobile first. Common mistakes: text too small to read, buttons too small to tap (minimum 44×44px touch targets), images that overflow the screen, navigation menus that don't collapse properly.

ACTION TASK — Document Your Workflow

  • Map out your personal workflow on one page:
  • Write the 6 steps with the specific tools you'll use at each stage.
  • Example: Discovery (questionnaire + Zoom call) → Wireframe (Figma) → Build (Webflow) → Test (iPhone + Chrome DevTools) → Launch
  • This becomes your repeatable system — the foundation of your business.
MODULE 2LESSON 2.4

AI Tools That Will Double Your Speed

Claude · Copilot · Midjourney · Firefly — what to delegate and what not to

AI Is the Unfair Advantage Available to Every Freelancer

In 2025, AI tools have genuinely transformed what a single freelancer can produce. Tasks that used to take hours — writing website copy, generating placeholder images, debugging CSS, writing proposal templates — now take minutes. The freelancers who embrace AI as a productivity multiplier will outcompete those who ignore it. The key is knowing which tasks to delegate to AI and which require your human judgement.
Claude (claude.ai)Writing & Strategy
Write all website copy from a brief. Generate proposal drafts. Write cold email templates. Explain code errors. Brainstorm niche positioning. Summarize client briefs. Generate case study drafts from your notes. Best general-purpose AI for text tasks.
Cost: claude.ai — free tier available
GitHub CopilotCode Completion
Suggests code as you type in VS Code. Particularly powerful for CSS, JavaScript, and any repetitive coding patterns. Can complete entire functions from a comment. Dramatically speeds up custom code projects.
Cost: $10/mo — worth it if you write custom code
ChatGPT (GPT-4o)Research & Content
Great for research, idea generation, and content outlines. Similar to Claude for many text tasks. Use both and compare outputs for important client deliverables.
Cost: free.openai.com
Midjourney / Adobe FireflyImage Generation
Generate placeholder images, hero backgrounds, concept visuals, and mockup assets. Firefly integrates directly with Photoshop and is commercially safe. Midjourney produces the most photorealistic results.
Cost: Midjourney $10/mo · Firefly: included with Adobe CC
Framer AILanding Page Generation
Generate a complete landing page design from a text prompt. Excellent for rapid prototyping and client wireframe presentations.
Cost: framer.com — free to start

What NOT to Delegate to AI

Client relationships and calls — AI cannot build trust
Final design decisions — AI doesn't know your client's brand
Contract review — always use a human lawyer for legal documents
Pricing strategy conversations — context and nuance matter
The final polish pass on copy — AI text often sounds generic; edit it

AI Workflow Tip: The 5-Minute Copy Method

When a client gives you a website brief, paste it into Claude with this prompt: 'You are an expert web copywriter. Based on this brief, write homepage copy for: [Hero headline], [Subheadline], [3 service sections], [About section], [CTA]. Write for [target audience]. Tone: [professional/friendly/etc].' Edit the output — don't publish raw AI copy. But this gives you a strong first draft in 5 minutes instead of 2 hours.

ACTION TASK — AI Setup

  • Set up your AI toolkit this week:
  • [ ] Create a free Claude account at claude.ai
  • [ ] Try this prompt: 'Write homepage copy for a [your niche] business. Include a headline, subheadline, 3 service descriptions, and a CTA.'
  • [ ] Save your best prompts in a 'Prompt Library' Notion doc
MODULE 2LESSON 2.5

Build Your First Demo Site

Multi-section site from scratch · Hero · Services · Testimonials · CTA · Footer

Your Demo Site Is Your #1 Sales Tool

Before you have a single real client, you need at least one site to show. A demo site (also called a spec site or concept site) is a fake business website you build yourself to demonstrate your skills. It looks exactly like a real client site — professional photography, real copy, real layout — but the 'business' is fictional. You'll build at least 2 of these before approaching any client.

The 6-Section Site Framework

Every effective business website follows the same basic structure. Master this framework and you can build 80% of what small businesses need.
Section 1: Hero — The above-the-fold area — the first thing visitors see.
Headline: What you do + who you help. Subheadline: The primary benefit. CTA button: 'Get a Free Quote' / 'Book a Consultation'. Background: Strong photography or video. This section decides whether the visitor stays or leaves.
Section 2: Social Proof / Trust Strip — Logos, stats, or trust signals.
Client logos (use placeholder logos for demo). A stat: '50+ businesses helped' or '$2M revenue generated for clients.' Star rating from Google. This section immediately validates the business.
Section 3: Services / Features — What the business offers.
3–4 service cards with an icon, short headline, and 2–3 sentence description. Use a consistent card layout. This is where the visitor learns what they can buy.
Section 4: About / Story — The human side.
A photo of the founder or team. 2–3 paragraphs: Why they started, what they believe in, who they serve. Builds trust and differentiation.
Section 5: Testimonials — Proof that others have gotten results.
3 testimonials minimum. Include a photo, name, company, and specific result ('My revenue increased 40% in 3 months'). For demo sites, write plausible fictional testimonials clearly labeled as examples.
Section 6: Contact / CTA — Convert the visitor into a lead.
A clear headline: 'Ready to Grow Your Business?' A contact form: name, email, message. Phone number and address if applicable. A strong, single CTA button.

Footer Requirements

• Business logo and one-line description
• Navigation links (duplicates main nav)
• Contact information (address, email, phone)
• Social media links
• Copyright notice: © 2025 [Business Name]. All rights reserved.
• Privacy Policy link (use a free generator like Termly.io)

Images: The Single Biggest Visual Quality Factor

The most common reason a good layout still looks unprofessional: bad photography. Use Unsplash.com, Pexels.com, or Picsum.photos for free professional images. Never use photos from Google Images (copyright). Compress all images to under 200KB using Squoosh.app before uploading.

MODULE 2 MILESTONE — First Demo Site

  • This week — build and publish your first demo site:
  • Choose a fictional business in your niche (e.g., 'Peak Performance Physiotherapy')
  • Use free stock photos from Unsplash
  • Build all 6 sections in Elementor or Webflow
  • Publish it live on a free subdomain
  • Share the link in the course community for feedback
  • This is your Module 2 Milestone — do not skip it.

FREE MODULE

MODULE 3

Portfolio That Converts

"Your silent salesperson — make it work 24/7"

MILESTONE

Live portfolio with 3+ case studies published

Lessons in this module

3.1 Portfolio Strategy — Most Freelancers Get This Wrong

3.2 Creating Portfolio Work Without Real Clients

3.3 Writing Case Studies That Sell

3.4 Building Your Portfolio Website

3.5 The Portfolio Review Checklist

MODULE 3LESSON 3.1

Portfolio Strategy — Most Freelancers Get This Wrong

3 great projects beats 20 average ones · The Problem Process Result formula

Your Portfolio Is a Sales Tool, Not a Gallery

Most beginners build a portfolio that's essentially a photo album — a grid of website screenshots with no context. A client looking at that has one question in their mind: 'Can this person solve MY problem?' Screenshots alone don't answer that. A converting portfolio answers it immediately by showing not just what you built, but why you built it that way and what result it produced.

Quality vs. Quantity: The 3-Project Rule

You do not need 20 projects. You need 3 outstanding ones. A portfolio with 3 well-documented case studies in your niche will outperform a portfolio with 15 screenshot-only projects every single time. Here's why: a high-quality case study proves strategic thinking, not just technical skill. It shows you understand business problems — which is what clients are actually paying for.

The Problem Process Result Formula

PROBLEM: What was broken or missing before you got involved? Make it relatable. PROCESS: How did you approach solving it? Show your thinking, not just your output. RESULT: What changed? Use numbers wherever possible. 'Bookings increased 40%' is infinitely more convincing than 'The client was happy.'

What to Include in Each Portfolio Project

Project title: Clear and specific: 'E-commerce redesign for Peak Nutrition' not 'Project 4'
Hero image: Full-width screenshot of the above-the-fold design — your best visual hook
Context summary: 1 sentence: industry, client type, project scope
The problem: 2–3 sentences — what was broken or missing?
Your process: 3–5 sentences — what did you decide and why?
The result: 2–3 sentences with numbers if possible
Live link: Always link to the live site if available
Technologies used: WordPress, Webflow, Shopify — helps clients filter for what they need

ACTION TASK — Portfolio Plan

  • Plan your 3 portfolio projects right now:
  • Project 1: [Niche] — [what problem does it solve?] — [which tool?]
  • Project 2: [Different angle in same niche or adjacent niche]
  • Project 3: [E-commerce OR service business OR personal brand]
  • Even if all 3 are spec projects, 3 well-documented case studies = a working portfolio.
MODULE 3LESSON 3.2

Creating Portfolio Work Without Real Clients

Spec work · Redesigns · Non-profits · Open source — all count as real work

The Classic Catch-22 — and How to Break It
Every new freelancer faces the same problem: 'You need experience to get clients, but you need clients to get experience.' This feels like a trap. It isn't. There are at least five proven ways to build real portfolio work before you have a single paying client — and clients genuinely cannot tell the difference between a spec project and a paid one if it's done professionally.
Spec / Concept SitesHIGH VALUE
Build a completely fictional business website in your niche. Choose an industry you want to serve — say, 'Denver Roofing Professionals' — and build a full 6-section site as if they were a real client. Use real stock photography, well-written copy, and professional design. Nobody will know it's spec unless you tell them. Build at least 2 of these.
RedesignsHIGH VALUE
Find a real local business with an embarrassingly bad website. Redesign it. Write a case study: 'The original site had no mobile version, 8-second load time, and zero clear CTA. I redesigned it to [results].' You can even send the redesign to the business — sometimes they hire you on the spot.
Non-profit / Charity WorkHIGH VALUE
Offer to build or redesign a website for a local charity or community organization for free or reduced cost. Non-profits have real stakeholders, real briefs, real feedback, and real deadlines — exactly like a paid project. And you get a real testimonial from a real organization.
Friends & Family BusinessesMEDIUM VALUE
Do you know anyone who runs a small business — a restaurant, salon, trade service, online shop? Build or improve their site. Charge a heavily discounted rate or do it free in exchange for a detailed testimonial and case study permission.
Open Source / Community ProjectsMEDIUM VALUE
Contribute a website or design component to an open source project. Less common for client-focused portfolios, but excellent if you're targeting developer-heavy audiences.

The Redesign Email Template

Subject: Quick idea for [Business Name]'s website Hi [Name], I've been following [Business Name] for a while — love what you're doing. I'm a web designer specializing in [their industry], and I noticed your current site could be updated to better reflect the quality of your work. I've taken the liberty of mocking up a redesign concept — no strings attached. Would you like me to send it over? Best, [Your Name]

ACTION TASK — First Spec Project

  • Identify and start your first spec project this week:
  • Find 3 local businesses in your niche with outdated websites
  • Choose 1 and build a redesign concept
  • OR build a fictional business site in your target niche
  • Document it as a case study from day one — take before/after screenshots
MODULE 3LESSON 3.3

Writing Case Studies That Sell

Full template · Challenge · Solution · Results · Use numbers wherever possible

Case Studies Are Your Most Powerful Sales Tool

A strong case study does something screenshots never can: it proves that you think strategically. It shows that you didn't just make something pretty — you understood a business problem, made deliberate decisions, and produced a measurable outcome. This is what separates a $500 website builder from a $5,000 web designer.

The Complete Case Study Template

Follow this structure exactly. Length: 400–700 words total.
HEADLINE (2–3 sentences)
A punchy summary of the project and its outcome. Example: 'How I redesigned a Denver roofing company's website and helped them rank #1 on Google for local searches within 90 days.'
CLIENT & CONTEXT (2–3 sentences)
Who is the client (type of business, size, location)? What do they do? What was the scope of the project? Example: 'Peak Roofing is a family-owned roofing contractor serving the Denver metro area since 2008. They needed a complete website redesign with SEO optimization.'
THE CHALLENGE (2–3 sentences)
What problem were they facing before you got involved? Be specific. Example: 'Their existing site was built in 2015, had a 12-second load time, no mobile version, and generated virtually zero inbound leads. They relied entirely on word-of-mouth.'
MY APPROACH (3–5 sentences)
What decisions did you make and why? Explain your process, not just your tools. Example: 'I started with a competitor analysis of the top 5 Denver roofing companies. I identified that none had clear emergency contact CTAs above the fold. I designed a mobile-first site with load time under 2 seconds, a prominent call button on mobile, and structured all content around the 3 questions every roofing customer asks first.'
THE SOLUTION (2–3 sentences)
What did you actually build? List key features. Example: '6-page responsive website. Emergency service CTA on mobile. Google Business integration. Before/after gallery. SEO-optimized service pages.'
THE RESULTS (2–3 sentences)
Numbers whenever possible. If no analytics, describe qualitative results. Example: 'Within 60 days of launch, the site ranked page 1 for 'Denver roofing company.' Organic inquiries increased from 0 to 8/month. Owner reported 2 contracts directly attributed to the new site in month one.'
TESTIMONIAL (1 quote)
A direct quote from the client (for spec projects, write a plausible quote and label it 'Example testimonial — spec project'). Example: '"I wasn't sure a new website would make a difference. Within 6 weeks I got my first call from someone who found us on Google. Worth every penny." — John M., Peak Roofing'

If You Have No Numbers — Here's What to Do

Not every project will have measurable results, especially spec projects. In that case, describe qualitative outcomes: 'The client reported feeling confident sending the site link to prospective customers for the first time.' Or compare specific before/after elements: load time, number of CTA placements, mobile readability score, number of pages. Something is always measurable.

ACTION TASK — Write Case Study #1

  • Write your first case study this week:
  • Use the 7-section template above
  • Target length: 500 words
  • Include at least one before/after screenshot
  • Include at least one number (load time, pages built, time saved — anything)
  • Publish it on your portfolio site
MODULE 3LESSON 3.4

Building Your Portfolio Website

Structure · SEO basics · About page formula · Webflow / Framer / WordPress / Hand-coded

Your Portfolio Site Is Your Permanent First Impression

Before you send a single outreach message, your portfolio site needs to be live. It should be the best website you've ever built — it's your number one demo. A portfolio built in Elementor that looks clean and loads fast will get you clients. An unfinished or cluttered portfolio will kill deals before they start.

The 5 Essential Pages

Homepage: Headline: who you help and how. 3 portfolio thumbnails. 1–2 testimonials. CTA: 'Let's Work Together.' Keep it concise.
Work / Portfolio: Your 3 case studies. Each links to its full case study page. Filter by project type if you have 6+ projects.
Case Study Pages: One page per project using the template from Lesson 3.3. These are your conversion pages — give them the most attention.
About Page: The most underrated page on any portfolio site (see formula below).
Contact Page: Simple form: name, email, project type, budget range, timeline. Your email address. Response time promise: 'I respond within 24 hours.'

The About Page Formula

Most freelancers write an About page that's entirely about themselves. The professional approach: make it about the client's experience of working with you.
Para 1: A relatable hook — a problem your ideal client faces, or a clear statement of who you serve.
Para 2: Your background and why you're positioned to solve that problem.
Para 3: Your approach/philosophy — what makes working with you different.
Para 4: A personal human touch — one authentic detail that makes you memorable.
CTA: Invite them to get in touch: 'Ready to talk about your project? Let's connect.'

Basic SEO for Your Portfolio

• Your page title should include your name and specialty: 'Jane Smith | Webflow Designer for SaaS Startups'
• Write a meta description for every page (155 characters max)
• Use your target keywords naturally in headings: 'Freelance WordPress Developer in Chicago'
• Make sure your site loads in under 3 seconds (check with PageSpeed Insights)
• Add your portfolio to Google Search Console (free — submits your site to Google)
• List yourself on Google Business Profile if you serve local clients

Which Platform to Build Your Portfolio On

PlatformBest ForCost Pros
WebflowWebflow specialists$14/mo Showcases your Webflow skills directly
FramerModern/startup aesthetic$10/mo Beautiful animations, fast
WordPressWordPress specialists$5–20/mo hosting Full control, familiar
Hand-coded HTML/CSSFrontend developers~$3/mo hosting Maximum credibility to dev clients
Squarespace/WixQuick setup$16–25/mo Easy but limited customization

MODULE 3 MILESTONE — Portfolio Live

  • This week — build and publish your portfolio site:
  • [ ] Choose your platform (match it to your tech stack)
  • [ ] Build the 5 essential pages
  • [ ] Write your About page using the formula
  • [ ] Add your 3 case studies
  • [ ] Set up your domain (namecheap.com — ~$10/year)
  • [ ] Submit to Google Search Console
MODULE 3LESSON 3.5

The Portfolio Review Checklist

10-point pre-send checklist · Peer feedback · Headline testing · Update cadence

Never Send a Portfolio Link Without Running This Checklist

Your portfolio will be the first thing every prospective client looks at. A broken link, a slow load, or a typo in a headline will cost you the project. Run this checklist every time you update your portfolio and before sending the link to any new prospect.

The 10-Point Portfolio Review Checklist

1. Mobile Experience
Open the site on your own phone. Does everything look correct? Can you read all text without zooming? Are all buttons tappable?
2. Load Speed
Test with Google PageSpeed Insights (pagespeed.web.dev). Mobile score should be 70+, desktop 85+. Compress images if needed.
3. Headline Clarity
Read your homepage headline out loud to someone who doesn't know you. Do they immediately understand who you help and what you do?
4. Contact Form Works
Fill out your own contact form and confirm the email arrives. Check spam folder. A broken contact form means zero inbound leads.
5. All Links Work
Click every link on every page. No 404s. No broken portfolio links.
6. Case Studies Are Complete
Each case study has: problem, process, result, screenshot, live link (or explanation if unavailable).
7. Testimonials Are Present
At least 1–2 testimonials visible on the homepage.
8. Professional Email Address
Use yourname@yourdomain.com — not gmail.com or hotmail.com. Use Google Workspace ($6/mo) or Zoho Mail (free).
9. Social Proof Consistency
Your LinkedIn, portfolio, and any other profiles all use the same headshot, headline, and description.
10. One Clear CTA
Every page should have one primary call-to-action. Not three. Not zero. One. 'Schedule a Free Call' or 'Get a Quote' — and it should be above the fold.

Getting Peer Feedback

Before sending your portfolio to a real client, get feedback from someone who represents your target client — not a fellow designer. Find a friend who runs a business and ask: 'Looking at this portfolio for 60 seconds, what do you think I do? Would you feel confident hiring me? What's unclear?' Their answers will reveal gaps a designer's eye would never catch.

Portfolio Update Cadence

Your portfolio should never go more than 90 days without an update. As you complete real projects, add them and remove your weakest spec work. Over time, every project in your portfolio should be a real paid project with real results. Set a recurring calendar reminder: every 90 days, review and update.

Module 3 Complete — You Now Have a Live Portfolio

3+ case studies published with the Problem-Process-Result formula A professional portfolio website with all 5 essential pages A working contact form and professional email address Passed the 10-point review checklist This is the foundation that will get you your first paying client.

ACTION TASK — Portfolio Launch

  • Final Module 3 Task:
  • Run through all 10 checklist items above. Fix every issue.
  • Share your portfolio link with at least 2 people for feedback.
  • Update your LinkedIn profile to link to your new portfolio.
  • You're now ready for Module 4 — pricing and getting paid.