Ray DelVecchio's Blog

The difference between people who get garbage from AI and people who get gold isn’t intelligence. It’s structure.

A year ago, a single blog post took me 6–8 hours. Research, outline, draft, edit, rewrite, edit again. Now I can produce better content in a fraction of that time — not because AI writes it for me, but because I stopped treating ChatGPT like a magic eight ball and started giving it a blueprint.

That blueprint is what you’re getting today.

One template. Three layers. Real examples pulled from the workflows I use to run my freelance web design business. You can copy it, paste it into ChatGPT, Claude, Gemini, or any large language model, and start getting consistent, usable outputs in minutes.

Here’s what’s inside: the hybrid framework that combines XML, Markdown, and JSON into a single reusable prompt — plus guidance on adapting it to your own tasks, feeding AI multiple data sources at once, and four complete real-world examples you can steal.

No theory. No fluff. Just the system.

Table of ContentsThe Hybrid Stack: XML + Markdown + JSONThe Universal Template You Can CopyWhen to Use Each Layer (Without Overcomplicating)Common Pitfalls and Fast FixesHow to Adapt the Template to Any TaskMulti-Source Prompts: Feeding Real Data Into AI Real Examples You Can Copy Example 1: Content Strategy AuditExample 2: Blog Post Refresh BriefExample 3: Personal Story ExtractionExample 4: Codebase-to-Tutorial PipelineThe Hybrid Stack: XML + Markdown + JSON

Most people write prompts the way they write text messages. One long paragraph. No structure. No sections. Then they wonder why the AI rambles, misses the point, or hallucinate details.

The fix is a three-layer system. Each layer does one job.

XML gives you the scaffold. Wrap sections of your prompt in simple tags like , , , , and . These create clear boundaries the model can follow. Think of them like labeled containers — the AI knows exactly where your background info ends and your instructions begin.

Markdown keeps it human. Inside those XML tags, use headings, bold text, numbered lists, and bullets. This makes your prompts easy to read, easy to edit, and easy to share with teammates. You’re not writing code. You’re writing clear instructions that happen to have structure.

JSON locks the data. When you need to feed structured inputs (a spreadsheet, a list of products, query data) or get machine-readable outputs back, JSON is your format. It’s strict by design — perfect for automations, validation, and anything that plugs into another tool downstream.

XML = structure and segmentation for the modelMarkdown = readability and instruction clarity for humansJSON = precision for data input/output at scale & when using via API code

This isn’t about making prompts complicated. It’s about making them reliable. The same template, the same structure, predictable results every time — whether you’re writing a proposal for a client or auditing a blog for SEO gaps.

The Universal Template You Can Copy

Use this as your default starting point. One clear role, scannable context, numbered steps, explicit constraints, and a dual-output format: a human-friendly report plus a machine-readable JSON object.

Define who the AI is in one clear sentence.Example: You are a pragmatic senior reviewer who writes concise,actionable feedback.Provide background using simple Markdown.- Audience: [who this is for]- Objective: [the outcome you need]- Scope: [what's in or out]- Key constraints: [3–5 bullets max]Tell the AI exactly what to do, in order:1. [Step one]2. [Step two]3. [Step three]Rules and limitations:- Must do: [requirement]- Avoid: [anti-pattern]- Style: [tone, length, formatting]```json{ "inputs": { "items": [], "source_text": "", "variables": {} }}```Describe the desired outputs:- Human report: headings, bullets, and a short summary paragraph- Machine data: valid JSON that follows the schema below{ "status": "", "summary": "", "details": [ {"id": "", "label": "", "score": "", "notes": ""} ], "meta": { "timestamp": "", "confidence": "<0–1>" }}

Here’s what each field does:

— One sentence. Include the persona and the goal. “You are a senior WordPress developer who writes beginner-friendly tutorials” is better than “You are helpful.” — Bullet your audience, objective, and scope. No paragraphs. Keep it scannable so the AI (and you) can see the boundaries at a glance. — Number your steps. Three to five is the sweet spot. Each step should map to one piece of your expected output. — Your must-do and must-avoid rules. Style, tone, length, format. Short and specific beats long and vague. — Structured inputs as JSON. A list of blog posts. Query data from Search Console. Product specs. Anything the AI needs to reference. — Describe exactly what you want back. A bullet list? A table? Both a human-readable report and a JSON object? Say it here. — The exact keys and types you need in the machine-readable output. Defining the schema up front prevents the AI from inventing its own structure.

Two practices that eliminate re-prompting: Make your constraints short and specific. And always define the JSON schema you want returned. Vague constraints get vague results. No schema gets inconsistent structure. Nail these two and you’ll cut your retry rate in half.

If you want a tool that formats your source files into clean, structured prompt blocks automatically, the AI Prompt Formatter does exactly that — paste in messy files and get perfect XML-wrapped prompt inputs in seconds.

When to Use Each Layer (Without Overcomplicating)

Keep XML for boundaries, Markdown for clarity, and JSON for strictness. If you’re tempted to add more tags, you probably need better steps — not more structure.

LayerWhat it does bestWhen to use itXMLSegments tasks and rolesAlways — to define , , , , MarkdownHuman-readable rules and stepsWithin XML tags to format bullets, headings, and emphasisJSONMachine-validated inputs and outputsFor and when integrating with code or pipelines

Do this:

- Style: Casual and conversational- Length: Around 500 words- Avoid: Jargon, passive voice, filler phrases

Not this:

The first version is clear to the AI and to the human editing the prompt next Tuesday. The second is XML cosplay. Use the simplest structure that gets the job done.

Common Pitfalls and Fast FixesPitfallWhy it hurtsFix in your templateVague rolesUnstable tone and scopeWrite a one-sentence with persona and goalWall-of-text contextModel misses constraints buried in paragraphsBullet the with audience, objective, scopeNo output schemaInconsistent, unpredictable returnsDefine with exact keys and typesOverlong instructionsHallucinated or skipped stepsUse 3–5 numbered steps, each tied to one output elementDoing everything in one promptOverwhelmed model, shallow resultsBreak complex tasks into chained prompts (output of one feeds the next)Starving the AI of contextGeneric or wrong answersPaste your actual source data — the AI can’t read your mind

That last one catches more people than anything. You know your business inside and out. The AI doesn’t. If you’re asking it to write a web design proposal but you haven’t told it who the client is, what they sell, or what their budget looks like — don’t be surprised when the output sounds like it was written by a stranger. Because it was.

How to Adapt the Template to Any Task

The template structure never changes. The content inside it does. Here are four questions that make customization fast:

1. “What expert would I hire for this?”
The answer becomes your . Writing a blog post? You’d hire a content strategist. Reviewing code? A senior developer. Pricing a new web design service? A freelance business consultant. Be specific — “You are a freelance pricing strategist who specializes in web design services” outperforms “You are a helpful assistant” every single time.

2. “What would I tell that expert on day one?”
That’s your . The background, the audience, the goal, the boundaries. Everything you’d cover in a 10-minute briefing before handing someone the project.

3. “What are the 3–5 concrete deliverables?”
Those are your . Not “analyze the data.” Instead: “1. Identify the top 3 underperforming pages by impressions vs. clicks. 2. Recommend specific title tag changes for each. 3. Prioritize by estimated traffic impact.” Concrete. Numbered. Tied to outputs.

4. “What format do I need the result in?”
That’s your . A table? A bullet list? A narrative report? Both a human summary and a JSON object for your CMS? Spell it out.

Here’s the thing — I learned this the hard way. Early on I had ChatGPT generate a fully working WordPress shortcode using the Google Developer API. It was impressive. It worked. But a simple Google Maps embed URL would’ve done the same job in 30 seconds. The AI over-engineered the solution because I hadn’t constrained the enough. I didn’t tell it I wanted the simplest path. Lesson: the better your context and constraints, the less you have to clean up after.

Whether you’re writing a client proposal, debugging a WordPress plugin, or auditing your content strategy, you fill in the same six fields. The structure stays. Only the contents change.

Multi-Source Prompts: Feeding Real Data Into AI

This is where prompting goes from useful to powerful.

Most people stuff everything into one big block. Their strategy notes, their data, their instructions — all crammed together. The AI loses track. Important details get buried. The output suffers.

The fix: use separate named XML blocks for each data source. Think of each block as a labeled folder you’re handing the AI.

← your strategy document ← the content to work on ← performance data from Search Console ← personal anecdotes to weave in ← what you actually want done

Each block is self-contained. The AI can reference when it needs strategic direction and when it needs performance data — without the two bleeding together.

Here’s why this matters in practice: when I refresh a blog post now, I feed ChatGPT five separate data sources in one prompt. My SEO strategy. My internal linking rules. The current published content. Search Console performance data. And my personal story bank. The AI gets everything it needs, organized and labeled. And because each source is in its own XML block, I can swap out just the and rerun the same prompt for a different article. No rewiring. No rewriting the whole prompt.

This multi-source approach is literally how the content workflows behind this site operate. The AI article generator I built uses chain prompting and structured data blocks to turn a topic into a publish-ready article — same principle, scaled up.

When you see examples below using shorthand like , that represents the full YOUR_COMPLETE_CODE_FILES block. It’s a notation style that keeps examples scannable while reminding you that real, substantial data lives inside those tags.

Real Examples You Can Copy

The template adapts to any workflow. Here are four examples pulled directly from tasks I run for my freelance web design business. Every one of these started as the universal template above — just with different contents in the fields.

Example 1: Content Strategy Audit

Scenario: You’ve got a WordPress blog with 50+ published posts, but you’re not sure what’s working, what’s missing, or where to focus. You export your blog data and Google Search Console reports and need a strategic audit.

[Full CSV of your blog titles, URLs, and meta descriptions] [Pages performance report — impressions, clicks, CTR, position] [Query-level report — what keywords drive traffic]You are a strategic content marketing manager specializing inWordPress businesses.Analyze the three data sources above and deliver:1. Content cluster analysis — group posts into themes, identify pillar opportunities2. Content gap identification — topics where I have authority but incomplete coverage3. Top 10 SEO quick wins — internal linking fixes, refresh candidates, title/meta optimization4. Content repurposing plan — high-performing posts to convert into videos, email courses, or downloadable guides5. Keyword opportunity analysis — page 2–3 rankings that could reach page 1, high-impression/low-CTR terms needing better titlesBe specific. Reference actual post titles, URLs, and metrics.Make recommendations tactical and immediately actionable.

What makes this work: Three separate data blocks feed one comprehensive task. The AI doesn’t have to guess what your “blog data” means — it’s clearly segmented. The five numbered deliverables in tie directly to the outputs you need. And the closing constraint — “Be specific. Reference actual post titles” — prevents the generic, hand-wavy analysis that wastes your time.

This is the exact structure I used to audit the content strategy for this site. The output mapped every post into clusters, flagged the biggest SEO opportunities, and built the roadmap I’m executing right now.

Example 2: Blog Post Refresh Brief

Scenario: You’ve identified a blog post that needs updating — it’s ranking on page 5 for a high-value keyword and the content is stale. You need to create a detailed task brief so the refresh hits every mark: SEO, internal linking, brand voice, and conversion.

[Your content strategy document with keyword targets and cluster priorities] [Linking rules: how many links, what types, anchor text guidelines, sitemap] [The current published version of the article to be refreshed] [Query performance data for keyword opportunities] [Collection of personal anecdotes with emotional arcs, lessons, and proof points]You are creating a detailed task brief for a copywriter whowill refresh the blog post in .Generate a complete task description that includes:1. Context — why this post is being refreshed, its strategic value, relevant performance data2. Target keywords — primary, secondary, and long-tail from and 3. Target personas — who reads this, what they need4. What to preserve vs. what to fix in the current version5. Proposed outline with H2/H3 structure, section guidance, and word count targets6. Internal linking requirements per 7. Where stories from could naturally fitThe copywriter should be able to read this document andexecute without back-and-forth.

What makes this work: Five data sources. One task. The gives strategic direction. The enforces linking standards. The shows what exists. The reveal keyword opportunities. And the ensures the refreshed post has authentic voice — not just SEO keywords.

This is a prompt that creates prompts. Meta-level productivity. You run it once and get a complete creative brief that any writer can follow. When I need to get web design clients through content marketing, this is the system that makes every blog post refresh count.

Example 3: Personal Story Extraction

Scenario: You have raw content — blog drafts, email newsletters, podcast transcripts — and you want to mine it for reusable personal stories that strengthen future content. Not every anecdote is worth saving. You need a filter.

[Raw text — emails, blog drafts, transcripts, journal entries] [Your existing collection of extracted stories, so you don't duplicate]Scan and extract only the most bankable personalstories using this strict filtering criteria:**BANKABLE STORY TEST — Must pass ALL five:**1. Universal Appeal: addresses a challenge 70%+ of the target audience faces2. Emotional Resonance: contains a clear emotional transformation others relate to3. Reusable Lesson: core insight applies across different projects, clients, or decisions4. Storytelling Value: has narrative tension, stakes, or surprise5. Broad Context: lesson works across industries, not just one narrow scenario**REJECT stories that are:**- Step-by-step process explanations disguised as stories- Technical troubleshooting with no broader business lesson- Hyper-specific tool details that won't age well- Obvious best practices everyone already knowsFor each story that passes, ask: "Could I tell this storyto illustrate a point in 3 different blog posts aboutdifferent topics?" If no, reject it.Only return NEW stories not already in .

What makes this work: The section (built into the task here) does the heavy lifting. The five-filter “Bankable Story Test” prevents the AI from surfacing every mildly interesting anecdote. The rejection criteria act as negative constraints — equally important. And checking against the existing ensures no duplicates.

This is a masterclass in using constraints to prevent garbage-in, garbage-out. Without those filters, you’d get 30 “stories” that are really just how-to steps with a first-person pronoun.

Example 4: Codebase-to-Tutorial Pipeline

Scenario: You have a working codebase — a web app, a WordPress plugin, a tool — and you want to turn it into a step-by-step YouTube tutorial. The codebase is complex. A single prompt can’t handle the whole thing. So you chain three prompts together.

Prompt 1: Analyze the Architecture

[Complete code files] [Project documentation]Reverse-engineer this codebase for tutorial creation:1. Identify the architectural pattern and key dependencies2. Map 3–5 natural "completion points" where the code runs and shows meaningful progress3. Rate complexity (1–10) and flag concepts needing special explanation4. Suggest areas to simplify for a 15–30 minute tutorial

Prompt 2: Create the Build Sequence

[Output from Prompt 1]Transform the analysis into 3–5 tutorial milestones:- Each milestone shows visible, testable progress- Follow dependency requirements (nothing breaks mid-build)- Include time allocation, files created, and testable outcome- Specify simplification strategy if the original is too complex

Prompt 3: Generate Copy-Paste Code Snippets

[Output from Prompt 2]For each milestone, create:1. Setup instructions (folder structure, commands)2. 3–5 copy-pasteable code chunks with file paths3. Brief explanation of what each chunk does4. Demo moment — when to test and what to expect5. Transition cue to the next milestone

What makes this work: Chaining. Each prompt’s output becomes the next prompt’s input. Prompt 1 produces . That feeds into Prompt 2. Prompt 2 produces . That feeds into Prompt 3. The universal template structure stays the same at every stage — only the data blocks and instructions change.

This is structured prompting at scale. I used a similar chain when I built a web app with AI and zero coding experience. Screenshots and spreadsheet data went in. A working application came out. The chain pattern turned what would’ve been weeks of learning into an afternoon of building.

Ship Fast: Your Prompt-Building ChecklistDefine in one sentence — include persona and goalBullet your — audience, objective, scope (no paragraphs)Number your — 3–5 steps, each tied to one output elementPut raw data in as JSON; define your schemaSet must-do and must-avoid rules under Request both a human report and a machine-readable object when you need bothFor multi-source tasks, use separate named XML blocks — one per data sourceVersion your templates per task type — save what works, iterate what doesn’tFrequently Asked QuestionsDoes this template work with ChatGPT and Claude?

Yes. Both ChatGPT and Claude handle XML tags, Markdown formatting, and JSON inputs without issues. Claude is especially strong with XML structure — it was practically designed for it. Gemini and other LLMs work fine too. The template is model-agnostic because it uses open standards, not platform-specific tricks.

Do I really need JSON in every prompt?

No. Skip `` and `` for simple tasks like drafting an email or brainstorming ideas. Use them when you’re feeding structured data (a spreadsheet, a list of products, search console metrics) or when you need machine-readable output that plugs into another tool. For most creative and writing tasks, the XML + Markdown layers are enough.

How many XML tags should I use?

Three to five is the sweet spot. ``, ``, ``, ``, and `` cover 90% of tasks. Add `` and `` when structured data is involved. More tags doesn’t mean better results. More *clarity* in fewer tags wins every time.

Can I use this for image generation or non-text AI?

The template is designed for text-based LLMs. For image generation prompts (Midjourney, DALL-E, Stable Diffusion), the core principle still applies — structure beats randomness — but the format shifts. Focus on `` for scene description and `` for style, aspect ratio, and mood. Drop the JSON layers unless you’re building an automation pipeline around image generation.

One Template. Infinite Applications.

You’ve got the framework now. XML for structure. Markdown for clarity. JSON for data. Six fields that adapt to any task — from auditing a blog to turning a codebase into a YouTube tutorial.

The shift isn’t about learning “prompt engineering.” It’s about going from trying random prompts and hoping for the best to running a system that produces reliable results every time. Same template. Different contents. Predictable output.

Here’s your next move:

Try it right now. Copy the universal template above. Pick one task you’ve been putting off — a client proposal, a content outline, a code review. Fill in the six fields. Run it. See what comes back.

Want all the examples in one place? Download the free Prompt Template Cheatsheet — the universal template plus all four real-world examples, formatted and ready to paste. Grab your copy here. [Link to email opt-in]

If you work with WordPress, check out our 13 ChatGPT prompts built specifically for WordPress freelancers — each one follows the structured format you learned today. And if you want pre-built system prompts that transform ChatGPT into a team of AI specialists for web design, development, and content — those are ready to go too.

Stop guessing. Start structuring. The template is yours.

The post ChatGPT Prompt Template: The Universal AI Prompt Format for Any Task (XML + Markdown) appeared first on Website Profit Course.

You built a couple of WordPress websites. Maybe one for yourself, one for a friend, one for your uncle’s landscaping company. Now someone asks you to build one for real money — and you freeze.

How much should I charge for a website?

It’s the single most stressful question for every new freelancer. Charge too much and you scare the client away. Charge too little and you work 40 hours for pocket change. Either way, you feel like you’re guessing.

I’ve been building websites for local businesses for over 15 years. I’ve quoted $500 jobs and $5,000+ retainers. I’ve underpriced myself so badly that I lost a contract worth nearly $6,000 a year — and I’ve set rates high enough that clients thanked me for making their lives easier.

Here’s everything I know about web design pricing in 2026 — the structures that work, real-number examples, an interactive cost calculator, and the mindset shifts that separate freelancers who scrape by from those who build real income.

Two rules before we dig in:

❌ DO NOT Charge Per Hour

❌ DO NOT List Your Prices Publicly

I’ll explain why. Let’s go.

How Much To Charge For A WebsiteWeb Design Pricing Structures Hourly RatesProject-Based PricingProductized ServicesMonthly Management & Recurring RevenueWhat to Charge for a Client Website Web Design Pricing TiersWhy Higher Prices Attract Better ClientsHow Much Does a Website Cost? Domain RegistrationWeb HostingWeb Design Tools & TrainingYour Time (The Hidden Cost)Website Cost CalculatorHow AI Changes Web Design Pricing in 2026How to Accept Payments Payment ScheduleA Note on ContractsExpand Your Services to Charge MoreFrequently Asked Questions About Web Design PricingWeb Design Pricing Structures

The first question a potential client asks — 95% of the time — is “What’s this going to cost me?” They ask before they’ve told you a single detail about what they want.

That’s fine. You just need to understand the pricing models available to you so you can steer the conversation instead of getting blindsided by it.

Hourly Rates

Average: $50 – $150/hour (2026 US market)

Track your hours on every project. You need to know your effective hourly rate. But do everything you can to avoid quoting an hourly rate to your client.

Here’s why. Every other pricing model gives your client a known cost upfront. They can budget for it. They can say yes or no with clear eyes.

An hourly rate? You do the work, send the invoice, and your client gets sticker shock. If it wasn’t clear how long the job would take, they feel ambushed. That’s a terrible start to a relationship.

There’s a second problem. As your skills improve, you get faster. If you charge by the hour, getting better at your job means you earn less. That’s backwards.

My very first paid website earned me roughly $100/hour — not because I was brilliant, but because I scoped a 5-page HTML site for a local contractor, knocked it out in one night, and collected $500. You can read the full story in what I learned earning $100/hour on my very first project. The lesson stuck: price the outcome, not the clock.

Project-Based Pricing

Average: Custom quote based on scope

This is the default I recommend for most freelancers. You scope the project, estimate the effort, and quote a flat fee.

The key is never quote before you understand what the client actually needs. A one-page landing page and a 20-page business site with e-commerce require wildly different effort — and wildly different prices.

Before I give any number, I send my web design client questionnaire. It walks through everything: how many pages, what features, who’s providing the content, what their goals are. Even better, I get them on the phone and go through it together. The conversation builds trust that email never will.

One thing I learned the hard way: double your initial time estimate. Early on, I thought I could bang out every project in a weekend. Then a client changes their mind about the homepage layout. Or they take three weeks to send you their photos. Or you hit a plugin conflict at 11 PM.

Pad your timeline. Your sanity (and your hourly rate) will thank you.

Productized Services

Average: $1,000 – $5,000 per package

If you focus on one type of business — like I did when I settled into the home services niche — your projects start looking similar. Same basic needs, same page structures, same questions.

That’s when you build packages.

Instead of a custom quote for every prospect, you offer 2–3 tiers that cover what any business in your chosen niche actually needs. Here’s an example of a 2026 starter package for a local service business at $2,000 – $3,000:

Up to 10 pagesDomain registrationWeb hosting setupGoogle Business Profile optimizationBasic on-page SEOLogo placement and brand colorsContact form with lead notifications

Most business owners will pick one of your packages instead of asking you to custom-build something from scratch. It’s easier for them. It’s more efficient for you. And you can price it confidently because you’ve done this exact job a dozen times.

The magic here is you standardize the work without lowering the value. The client gets a proven system. You get predictable income and faster turnaround.

Monthly Management & Recurring Revenue

Average: $100 – $500/month

This is the model that changed everything for me.

Recurring revenue turns a feast-or-famine freelancing business into something you can actually plan your life around. Instead of constantly hunting for the next project, you build a base of monthly clients who pay you to keep their websites running, updated, and growing.

Right now, monthly management is the only way I charge for web design. The structure is simple: a setup fee for building the website, then a monthly retainer that covers content updates, hosting management, security monitoring, and a Google Analytics report.

Several of my one-time clients from over a decade ago are still with me after shifting to monthly retainers. I’ve earned more than $20,000 from clients who started with invoices under $500 — just because I stuck around, provided consistent value, and made their website one less thing they had to worry about.

High-end clients understand that a website is a living marketing tool, not a one-and-done project. They want someone who pays attention to the details, monitors the data, and keeps things fresh. That person can be you.

If you want to learn more about structuring a business around this model, read the full 5-step plan to start a web design business.

What to Charge for a Client Website

Now let’s build your actual quote. Here’s the framework I use for every project — whether it’s a $1,000 starter site or a $5,000 build with ongoing management.

Step 1: Scope the project. Use a client questionnaire to nail down pages, features, content responsibility, and deadlines. Don’t skip this.Step 2: Estimate your hours. List out the high-level tasks — register domain, set up hosting, install WordPress, customize the theme, add content, test forms, configure SEO basics. Tally up the hours.Step 3: Double your estimate. There are always surprises. Client delays. Plugin conflicts. “One more small thing” that takes two hours. Padding your estimate protects your effective rate.Step 4: Set your target hourly rate. New freelancers: $50–$75/hour is a fair starting point. Experienced freelancers with a portfolio and process: $100–$150/hour. This number is internal — you don’t share it with the client.Step 5: Multiply.

$100/hr × 15 hours = $1,500 project fee

Step 6: Adjust for client value. A website for a newly created yoga studio won’t generate the same revenue as one for an established divorce lawyer whose clients pay $10,000–$20,000 each. The lawyer’s website is a lead generation machine worth tens of thousands per year. Price accordingly.

Focus on businesses that already have money coming in offline and would greatly benefit from adding a website to their marketing arsenal. Those clients have the budget, the willingness to pay, and they get more value from your services.

Present your proposal with a clear bullet list of everything included. If you don’t define the scope, the client will push for more — or claim, “I thought that was included.”

EXAMPLE SCOPE:

✅ 10-page website with custom homepage layout

✅ Professional WordPress theme with brand customization

✅ 1 contact form with lead notification emails

✅ Google Business Profile optimization

✅ Basic on-page SEO setup

✅ Client provides all photos and written content

Simple. Clear. No surprises for either side.

Web Design Pricing Tiers

Here’s a quick reference for what freelance WordPress designers charge in 2026. These are US-market ranges for small-to-mid business clients:

PackageTypical ScopePrice RangeStarter / Landing Page1–3 pages, template-based, basic contact form$500 – $1,500Business Website5–10 pages, custom design, SEO basics, email setup$2,000 – $5,000Advanced / E-Commerce10+ pages, WooCommerce or custom functionality, ongoing support$5,000 – $10,000+Monthly ManagementContent updates, hosting, security, analytics reports$100 – $500/mo

Your local market, your niche, and your experience will shift these numbers. A freelancer in a small Midwest town serving plumbers will price differently than one in Manhattan serving law firms. That’s fine. The framework stays the same.

Why Higher Prices Attract Better Clients

This sounds counterintuitive, but it’s one of the truest things I’ve learned in 15 years: the less you charge, the more your client will try to squeeze out of you.

Psychologically, the more someone pays, the more they value the service — and the less they complain. Cheap clients nitpick every detail, expect miracles on a shoestring, and eat your time with endless “quick” requests.

Premium clients give you breathing room to over-deliver. They trust your judgment. They don’t micromanage. They care about their brand image, and they understand that results take investment from both sides.

I learned this the hard way when I underpriced a project for a large cleaning company. I lost a contract worth over $5,740 a year — not because they chose someone better, but because my low price signaled inexperience. They didn’t trust the number.

If you’re the lowest-cost option, you are a commodity — and therefore replaceable.

The big website builders like Squarespace and Wix start at $10–$20/month. You cannot and should not compete on price with them. You compete on service, expertise, and the personal relationship a solo freelancer provides that no platform can match.

How Much Does a Website Cost? (The Expense Breakdown)

Whether you’re a freelancer understanding your overhead or a business owner evaluating a proposal, these are the real costs behind a WordPress website.

Domain Registration

Average Cost: $10 – $20/year per domain

A domain is your client’s address on the internet. Registration is cheap and straightforward. I use GoDaddy for domain registration, though any reputable registrar works.

Web Hosting

Average Cost: $100 – $500/year

Hosting is where the website’s files live. You can invest in a plan that supports multiple client sites (more cost-effective as you grow) or set up individual plans per client.

I recommend SiteGround for WordPress hosting. Their speed, support, and WordPress-specific tools make client management significantly easier. If you’re brand new to hosting, read the beginner’s guide to web hosting and DNS first.

[image error]SiteGround Web Hosting

Launch your website or blog today on SiteGround, the hosting company recommended by WordPress!

Buy Now

I may earn a commission if you purchase using my links which helps support this website.

Web Design Tools & Training

Average Cost: $100 – $500/year

This covers premium WordPress themes, plugins, and any design tools you rely on. One of my go-to recommendations for beginners is Divi by Elegant Themes. It gives you drag-and-drop page building that lets you create professional layouts without writing code. Check out the full tutorial on building a WordPress website with Divi.

AI tools now handle a lot of the heavy lifting too — generating starter layouts, writing content drafts, and troubleshooting code. More on that in a moment.

[image error]Divi Visual Builder

The #1 WordPress theme on the entire internet to design your website with drag-and-drop!

Buy Now

I may earn a commission if you purchase using my links which helps support this website.

Your Time (The Hidden Cost)

The Biggest Cost: Your hours

Domain and hosting are cheap. Your time is not. Every hour spent customizing a theme, writing meta descriptions, formatting photos, or going back and forth with a client over text changes is time you need to account for.

This is exactly why I tell you to track your hours even when you quote per project. If a $2,000 project took you 40 hours, your effective rate was $50/hour. That’s your baseline. Now your job is to raise it with every project — by getting faster, building templates, or using AI to cut repetitive work.

Website Cost Calculator

Use this interactive calculator to estimate project costs based on your specific scope. Adjust the fields and the estimate updates automatically.

# of Pages: 

Layout:

Template

Custom

Logo Design:

No

Yes

Copywriting:

No

Yes

SEO Optimization:

No

Yes

E-Commerce:

No

Yes

Expert Management:

No

Yes




Cost Estimate

Setup:

$500

Recurring:

$20/month

[image error]SiteGround Web Hosting

Launch your website or blog today on SiteGround, the hosting company recommended by WordPress!

Buy Now

I may earn a commission if you purchase using my links which helps support this website.

How AI Changes Web Design Pricing in 2026

Here’s what nobody in the outdated pricing guides is talking about: AI tools have fundamentally changed how fast a freelancer can build a website.

ChatGPT, Claude, and purpose-built AI generators can handle starter layouts, draft content, generate CSS customizations, and troubleshoot plugin conflicts in minutes — work that used to eat hours of your day.

I built an AI Website Generator that creates professional starter sites in minutes. The first time I used AI to scaffold a full web application from screenshots of a spreadsheet, it compressed what would’ve been weeks of learning into a single afternoon. That shift in speed changed how I think about pricing permanently.

But faster doesn’t mean cheaper. This is the critical mindset shift.

If AI helps you build a $3,000 site in 8 hours instead of 20, your effective rate just jumped from $150/hour to $375/hour. You’re not lowering your prices. You’re delivering the same (or better) outcome in less time. The client pays for the result — a professional website that generates leads for their business — not for how many hours you stared at a screen.

Think of it this way: a plumber who fixes your pipe in 15 minutes still charges $200. You’re paying for the knowledge, the tools, and the outcome. Web design works the same way.

Use AI as your competitive edge. Speed up your workflow. Reinvest the saved time into more clients, better service, or learning new skills. If you want to see how AI fits into a WordPress workflow, check out these ChatGPT prompts for WordPress freelancers.

How to Accept Payments

You’ve quoted the project and the client said yes. Now — how do you actually get paid?

Payment Schedule

For project-based work, charge 50% upfront before you start any design work. The remaining 50% is due on or before launch day.

I won’t invest hours of time without money deposited into my account. There are too many flaky people out there. I’ve had multiple clients pay the initial 50%, I finished 80–90% of the project, and then they went silent. Weeks of “Let’s review it soon” and “I’ll have those pictures over next week” that turned into nothing.

But I wasn’t empty-handed. I still made a decent hourly rate because I had that deposit upfront. The lesson: get the money before you get to work.

A Note on Contracts

Money is more powerful than a contract.

People overthink contracts. They spend weeks drafting legal language instead of meeting business owners who need a website. A contract (which can simply be a detailed email outlining scope, deliverables, and payment terms) is great for one thing: pointing back to when a client asks for work that wasn’t included.

But if someone stiffs you for $1,500, are you really hiring a lawyer? Unless we’re talking multiple thousands, the answer is no.

So get that deposit. Meet the client in person if you can. Build trust before you build the website. When you get a handful of happy clients, they’ll refer you — and referrals close faster than contracts ever will.

Expand Your Services to Charge More

Web design is the entry point. The real income growth comes from layering adjacent skills:

✅ Search engine optimization (SEO)

✅ Content writing and copywriting

✅ Google Ads and social media advertising

✅ Ongoing website maintenance and management

When I added marketing, advertising, and custom code to my skillset, I stopped being a one-off vendor and became a monthly retainer consultant. Clients didn’t just want a website anymore — they wanted someone to run their entire online presence. That’s where the real money lives.

To learn how to add value for local web design clients or find high-paying web design clients who’ll pay for those expanded services, dig into those guides next.

And before you deliver a client website, run it through a web design best practices checklist so your work speaks for itself.

Frequently Asked Questions About Web Design PricingHow much should I charge for a simple one-page website?

A single landing page or one-page website typically runs $500 – $1,500 depending on whether you’re using a pre-built template or custom design. If the client just needs a clean page with a contact form and basic info, you’re on the lower end. Add custom graphics, copywriting, or SEO optimization and the price goes up. Even a “simple” site takes several hours of setup, revisions, and testing.

Should I charge per hour or per project for web design?

Per project — every time. Hourly billing punishes you for getting faster and creates anxiety for the client who doesn’t know the final cost. Quote a flat project fee based on scope. Track your hours internally so you know your effective rate, but present the client with a single number they can say yes or no to. That clarity builds trust.

How much should I charge for a website as a beginner?

Start in the $500 – $1,500 range for a basic 5–10 page business website. You’re new, and that’s okay — but don’t work for free. Even at $500, if the project takes you 10 hours, that’s $50/hour. Build your portfolio with these early projects, collect testimonials, and raise your rates with every new client. Most freelancers double their rates within their first year once they develop a repeatable process.

How much should I charge to manage a client’s website monthly?

Monthly website management typically runs $100 – $500/month depending on what’s included. A basic plan covers hosting management, WordPress updates, security monitoring, and minor content changes. Premium plans add analytics reporting, SEO work, content creation, and priority support. This is the most powerful revenue model in web design because it compounds — 10 clients at $200/month is $2,000 in predictable, recurring income.

How much does a web designer cost per hour in 2026?

Freelance web designer hourly rates in 2026 range from $50 – $150/hour in the US, depending on experience, specialization, and local market. Designers with a niche focus (like home services or healthcare) and a track record of results can command the higher end. Remember — this number is for your internal tracking. Always quote clients a project fee, not an hourly rate.

How do I raise my web design prices without losing clients?

Grandfather your existing clients at their current rate for a set period, then apply increases gradually with plenty of notice. For new clients, simply quote your new rate — they have no baseline for comparison. The most effective way to raise prices is to add more value: include SEO, content updates, or analytics reporting that justifies the higher number. Clients rarely leave over a price increase when they see clear results and feel taken care of.

Your Next Step

Here’s the framework in a sentence: scope the project, estimate your hours, double that estimate, multiply by your target rate, and adjust for the client’s value.

That formula works whether you’re quoting your first $500 site or your fiftieth $5,000 project.

But a framework is only as good as the information you feed it. Before your next client project, grab the free web design client questionnaire — it’s the same template I use to scope every project and avoid pricing surprises. Walk through it with your client, and you’ll quote with confidence instead of guessing.

And if you’re just getting started with freelance web design, read the full 5-step plan to start a web design business from home. It covers everything from finding clients to delivering your first site.

You have the skills. You know the numbers. Now go charge what you’re worth.

15 Tools to Start Your Web Design Business

Want this helpful free giveaway or training?

Download Now

The post How Much to Charge for a Website: 2026 Pricing Guide appeared first on Website Profit Course.

Landing web design clients is harder than building the websites themselves.

I’ve spent 15+ years freelancing with WordPress, and I can tell you this with absolute certainty: the technical skills are the easy part. Learning how to get web design clients — and keep them — is the real job.

My first client was a local roofer who’d done work on my parents’ house. I built him a 5-page HTML site in one night. He paid me $500. That’s $100/hour for a kid with no portfolio and no business plan.

That single referral launched everything.

Since then, I’ve tested cold emails, cold calls, free offers, paid advertising, LinkedIn, local directories, and even tried recruiting friends to sell on commission (that failed spectacularly). Some methods worked fast. Others took months to pay off. A few were complete wastes of time.

Here are the 8 methods that actually work for finding web design clients — whether you’re looking for your first client or trying to fill a pipeline that’s gone dry. Several of these now use AI to cut your prospecting time in half.

If you want the full picture of building a freelance web design business from scratch, start with our complete guide to starting a web design business. This post focuses specifically on client acquisition — the engine that makes everything else possible.

How to Get Web Design ClientsStart With Your Personal NetworkBe Direct, Not BroadcastThe Referral Ask ScriptPick a Web Design Niche (and Stick With It)Why Specialization WinsHow to Standardize Your ServicesUse Free Offers to Open DoorsFree Domain RegistrationFree Website Audit or MockupFree Setup With Monthly RetainerBuild a Portfolio (Even With Zero Clients)Create Demo Sites in Your NicheTurn Your First Client Into a Case StudySend Cold Emails That Actually Get RepliesResearch Before You WriteUse AI to Personalize at ScaleCold Email Template You Can StealTry Cold Calling (Yes, It Still Works)What to Say When They Pick UpYour Goal Is a Meeting, Not a SaleUse LinkedIn and Online DirectoriesOptimize Your LinkedIn Profile for Local ClientsList Yourself on Freelancer DirectoriesJoin Local Facebook Groups and NextdoorFollow Up (Most Freelancers Give Up Too Early)The 5-Touch Follow-Up CadenceMulti-Channel Follow-Up StrategyThe Mindset Shift That Makes It WorkFrequently Asked Questions1. Start With Your Personal Network

Your best shot at landing local web design clients is through people who already know you. That’s not a cliché — it’s math.

People do business with those they know, like, and trust. A warm referral skips the “convince them I’m not a scammer” phase that kills cold outreach. Even a connection two degrees removed makes a prospect dramatically more likely to hear your pitch.

You’d be surprised how many people in your life know a business owner who needs a website — or needs a better one. They just don’t think about it until you ask.

Be Direct, Not Broadcast

Don’t post a vague Facebook status saying you’re “available for web design work.” That’s noise. Nobody responds to noise.

Go one-on-one. Text, email, or call specific people.

Think through everyone you know who runs a business, has a side hustle, or works at a company with a terrible website. Send each one a direct, personal message.

Don’t expect 10 jobs from 10 conversationsYou may need to work for free once to get your first testimonialIt can take weeks or months for a “maybe” to become a “yes”Once you build a reputation, referrals compound

The reality? Most people won’t need your services right now. That’s fine. You’re planting seeds, not harvesting.

The Referral Ask Script

If someone doesn’t need a website, ask this:

“No problem at all. Do you know anyone who runs a business and might need help with their website? I’m focused on [your niche] right now and looking for my next project.”

Simple. Direct. It gives them a specific ask instead of a vague “keep me in mind.”

Even a lost deal can generate referrals. I once pitched a $25 million cleaning company — the introduction came through a local accountant who never even replied to my own email. I lost that contract. But it led to two more paying clients through referrals.

The impression you leave travels further than you think. Every conversation is an audition for the next opportunity.

2. Pick a Web Design Niche (and Stick With It)

When I started freelancing, I built websites for anyone who’d pay me. Kitchen remodeling companies, dance studios, restaurants, tree services, auto maintenance shops. I figured casting a wide net meant more clients.

Wrong. If you target everyone, you appeal to no one.

Why Specialization Wins

I eventually settled on home service contractors. That focus clarified everything — my pitch, my templates, my close rate.

Here’s why niching works:

You learn the language of the industry. You understand what keeps those business owners up at night. You stop guessing what pages their website needs because you’ve built the same type of site a dozen times.

When a roofing contractor asks, “Will this actually get me more jobs?” — you have a real answer because you’ve done it before for someone just like them.

How to Standardize Your Services

The other benefit is efficiency. When you serve one industry, you can templatize your deliverables. Similar page structures. Similar content needs. Predictable timelines.

That means higher profit per project because you aren’t reinventing the wheel every time.

When you bounce between industries, everything is custom. Custom takes longer than expected. And that’s how you slash your effective hourly rate and earn far less than you should.

Niching also supercharges your AI workflow. When you specialize, you can build reusable research prompts and outreach templates for that industry — one prompt framework serves hundreds of prospects.

3. Use Free Offers to Open Doors

A free offer isn’t charity. It’s strategy. You’re removing the biggest barrier to getting your first web design client: trust.

Free Domain Registration

I did this for a client who wasn’t ready to commit. I told him I’d register his domain name for free so nobody else could take it. Cost me $20.

Over the next year, when he was finally ready to build, he called me — not someone else. That $20 bought trust and top-of-mind awareness worth hundreds.

Free Website Audit or Mockup

If a business already has a website, offer a quick audit: 3–5 specific things they could improve. Be concrete. “Your homepage takes 6 seconds to load and you’re losing mobile visitors” beats “your site could be better.”

If they don’t have a website at all, build them a quick mockup. Tools like the AI Website Generator can create a professional demo site in minutes. Here’s a real example of what one looks like. This makes the “free mockup” strategy practically zero-cost for you — and it gives the prospect something tangible to react to.

Free Setup With Monthly Retainer

I’ve waived setup fees to land clients on monthly recurring packages. It works — but be careful. You’ll encounter people who take advantage of the free offer and then disappear when the first invoice comes.

Qualify before you give. If a prospect is enthusiastic about their business and asks smart questions about their online presence, they’re worth the gamble. If they only want to know what’s free, move on.

4. Build a Portfolio (Even With Zero Clients)

“But I don’t have any work to show.” I hear this constantly. It’s the biggest excuse holding back new freelancers — and it’s entirely solvable.

Create Demo Sites in Your Niche

Build 2–3 demo websites for fictional businesses in your target industry. Make them look real. If you’re targeting plumbers, build a site for “Smith’s Plumbing — Licensed & Insured Since 2010.”

A demo bridges the gap between the abstract concept of a website and something a business owner can actually see and touch. They stop imagining and start wanting.

Use AI to generate the placeholder content, and a tool like Divi to design it fast. Two or three polished demos in your niche is more convincing than a random collection of unrelated sites.

[image error]Divi Visual Builder

The #1 WordPress theme on the entire internet to design your website with drag-and-drop!

Buy Now

I may earn a commission if you purchase using my links which helps support this website.

Turn Your First Client Into a Case Study

When you do land that first project — even if it’s free or discounted — document everything. Screenshot the old site (or the lack of one). Screenshot the new one. Track any metrics you can: page speed, Google ranking, phone calls, form submissions.

Then write a short case study: the problem, what you built, and the result. Even a one-paragraph testimonial from a happy client is worth more than 1,000 words of sales copy.

Your early projects will take longer than expected. Client content delays will test your patience. Double your timeline estimates and offer placeholder content to keep momentum going. This is normal.

5. Send Cold Emails That Actually Get Replies

Cold email is a numbers game. A 2–3% response rate is solid. That means for every 100 emails you send, 2–3 people will write back. Of those, maybe one becomes a paying client.

Don’t let that discourage you. Elite baseball hitters succeed 30% of the time and get paid millions. Your job is to send enough emails that the math works.

Research Before You Write

Business owners get pitched every single day. Their instinct is to delete. The only way to survive the inbox is personalization.

Before you write a single word, spend 5 minutes:

Google the business and look at their current website (or note they don’t have one)Check their Google Business Profile — read the reviewsLook at their competitors’ websitesFind the owner’s name

When I started analyzing a prospect’s competitor websites and including specific observations in my pitch, interest spiked immediately. Showing a business owner what their competitor has — and what they’re missing — triggers a competitive instinct that generic emails never will.

Use AI to Personalize at Scale

Here’s where 2026 gives you an unfair advantage.

Use ChatGPT or Claude to research a prospect and draft a personalized first line. Feed it the business name, their website URL (or lack of one), a couple of competitor URLs, and a brief description of what you do.

The AI won’t write a perfect email. But it’ll give you a personalized opening paragraph in 30 seconds that would’ve taken you 10 minutes to write manually. Multiply that across 50 prospects, and you just saved an entire day.

If you want a structured way to prompt AI for this kind of research, check out our universal AI prompt template.

Cold Email Template You Can Steal

Here’s a framework that works. Adapt it to your niche:

Subject: Quick question about [Business Name]’s website

Hi [First Name],

I was looking at [Business Name] online and noticed [specific observation — e.g., “your site doesn’t show up on mobile” or “your competitors [Competitor A] and [Competitor B] both rank above you for ‘[keyword]'”].

I help [niche] businesses in get more leads through professional websites. I recently worked with a [similar business type] and helped them [specific result if available].

Would you be open to a quick 10-minute call this week? I have a few ideas that could help — no pressure either way.

[Your Name]
[Your Website]
[Your Phone Number]

Keep it under 150 words. Lead with value. Don’t talk about yourself until after you’ve shown them what’s in it for them.

And go local. That alone separates you from the hundreds of generic offshore pitches flooding their inbox every week.

6. Try Cold Calling (Yes, It Still Works)

As an introvert, cold calling was something I avoided for years. But I’ll be honest — it’s the fastest way to reach a decision-maker and build real trust.

What to Say When They Pick Up

Keep it simple. Here’s a starting script:

“Hi [Name], my name is [Your Name]. I’m a local web designer here in [City]. I was looking at your business online and I had a couple of ideas for how you could get more customers through your website. Do you have 2 minutes?”

That’s it. You’re not selling. You’re asking for two minutes.

With home service contractors — my niche — most calls get answered by the owner or someone who works closely with them. That’s the beauty of targeting small local businesses. You skip the gatekeepers.

Your Goal Is a Meeting, Not a Sale

Don’t try to close on the phone unless they’re eager. Your only goal is to set up an in-person meeting where you can both get a feel for each other.

In my experience, the fact that someone agrees to a meeting is a massive indicator they want to buy. I’ve had clients write me a check on the spot at the first meeting.

Pick your poison — cold emails or cold calls. Either way, you need to break out of your comfort zone. People far less skilled than you are out there right now landing clients. Don’t let them take business that should be yours.

7. Use LinkedIn and Online Directories

This is the method most freelancers ignore — especially the ones focused on local clients. That’s exactly why it works.

Optimize Your LinkedIn Profile for Local Clients

Your LinkedIn headline shouldn’t say “Freelance Web Designer.” It should say something like:

“I Build Websites That Get Leads for [Niche] Businesses in [City/Region]”

Specific. Benefit-driven. Local.

Post once or twice a week about website tips for small business owners. Share a before-and-after of a client site. Write a quick post about a common website mistake you see in your niche. You don’t need to go viral. You need the 50 local business owners who see your content to think, “This person knows what they’re talking about.”

List Yourself on Freelancer Directories

Create profiles on platforms where business owners actively look for web designers:

Google Business Profile — yes, as a web design service provider. This is free and puts you in local search results.Clutch.co and UpCity — both are directories specifically for web design and marketing agencies. Even solo freelancers can list.Yelp for Business Services — many local business owners search Yelp when looking for any service provider.

These profiles compound over time. You set them up once, and they generate inbound leads while you sleep.

Join Local Facebook Groups and Nextdoor

Nearly every town has a Facebook group where local business owners ask for recommendations. “Does anyone know a good web designer?” posts appear more often than you’d think.

Nextdoor works the same way. Be helpful. Answer questions. Don’t spam. When someone asks for a web designer, you want 3 other people to tag you before you even see the post. That only happens if you’ve been a genuine, visible member of the community.

8. Follow Up (Most Freelancers Give Up Too Early)

Research consistently shows that 80% of sales close after five or more contacts. Yet most salespeople — and most freelancers — stop after three or fewer.

That gap is where your money lives.

The 5-Touch Follow-Up Cadence

Here’s the follow-up schedule I recommend after your first outreach:

Day 3 — Short follow-up email. “Just bumping this to the top of your inbox.”Day 7 — Phone call. Keep it brief and friendly.Day 14 — Email with something new: a screenshot of a competitor’s site, a quick tip, or a link to a relevant article.Day 30 — Final email. “I know timing is everything — just wanted to leave the door open if you need website help down the road.”

Each touchpoint should add value or show persistence without being aggressive. You’re staying on their radar, not harassing them.

Multi-Channel Follow-Up Strategy

Don’t just email five times. Mix it up. Email, then call, then connect on LinkedIn, then send a handwritten note for high-value prospects.

My best long-term client — the roofer who started this whole journey — took nearly 2 years and 10+ meetings before he agreed to a monthly retainer for online advertising. Some of those meetings happened because I helped him fix computer issues, not website issues.

That patience turned a $500 one-time project into over $20,000 in revenue over the life of the relationship.

Earning good money takes trust. Trust takes time. But the compounding effect is real. Once referrals start flowing, you stop chasing clients and they start finding you.

The Mindset Shift That Makes Client Acquisition Work

The tactics above work. But they only work if you approach them with the right expectations.

Sales is a numbers game. Cold email gets you 2–3 replies per 100 sends. Cold calling might get you 1 meeting per 20 dials. That’s not failure. That’s the game. I turned down a $55–70K engineering salary because I believed the long game of freelancing would pay off. It took two years of living with my parents, making a fraction of that income, to prove it right.

Your people skills matter as much as your technical skills. I’m an introvert. I used to believe my WordPress expertise would shine through my lack of conversational ability. My dad — who worked his way from carpenter to executive by being a people person — was right. I was wrong. Being approachable and genuine closes more deals than any portfolio ever will.

Play the long game. I once got a well-paid gig through a friend of a friend I met at a bar before a concert. It wasn’t planned. It happened because I’d been showing up, doing good work, and talking about it naturally for years. Eighty percent of success is just showing up — consistently, over a long period.

Combine any 2–3 of the methods above and work them consistently for 90 days. You will find clients. Maybe not on day one. But the momentum builds, and once it does, it’s almost impossible to stop.

Frequently Asked QuestionsHow do I get my first web design client with no experience?

Start with your personal network. Text or email everyone you know who runs a business or knows someone who does. Offer a discounted or free first project in exchange for a testimonial and case study. Build 2–3 demo sites in your target niche so you have something to show. Your first client almost always comes through someone you already know — mine came through a family referral.

How do I get web design clients fast?

The fastest methods are cold calling local businesses and leveraging your personal network. Cold calls reach decision-makers immediately, and personal referrals skip the trust-building phase entirely. Combine both with a free mockup or website audit to lower the barrier. Realistically, your first paying client can come within 2–4 weeks if you’re reaching out to 10+ prospects per day.

How much should I charge my first web design client?

Don’t undercharge just because you’re new. Clients equate your price with your expertise — I lost a contract worth $5,740+ per year early in my career because my price was too low and signaled inexperience. Start in the $500–$1,500 range for a basic site and raise from there. Check our web design pricing guide (https://websiteprofitcourse.com/how-m...) for detailed breakdowns.

Should I do free web design work to get clients?

Strategically, yes — but limit it to one project. Use it to get a real testimonial, a case study, and proof that you can deliver. Don’t make a habit of it. Free work attracts freeloaders if you aren’t careful. The goal is to convert that free project into paid referrals and a portfolio piece that sells for you.

How do I get web design clients online (not just local)?

Optimize your LinkedIn profile for your niche, list yourself on directories like Clutch and UpCity, build an SEO-optimized portfolio site, and create content that demonstrates your expertise. Online client acquisition takes longer than local outreach but scales better. Start local to build your portfolio and testimonials, then expand online once you have proof of results.

Is cold calling still effective for finding web design clients?

Absolutely. Most freelancers avoid it, which is exactly why it works. Local business owners — especially home service contractors, restaurants, and professional services — answer their own phones. You don’t need a perfect script. You need 2 minutes to introduce yourself and ask for a meeting. The people willing to make the calls that others won’t are the ones who fill their client roster fastest.

What to Do Next

Here’s a quick recap of all 8 methods:

Personal network — direct outreach and referral asksNiche specialization — pick one industry and own itFree offers — domain registration, audits, mockupsPortfolio building — demo sites and case studiesCold email with AI — personalized research at scaleCold calling — the fastest path to a decision-makerLinkedIn and directories — build a passive inbound channelFollow-up — five touches, multiple channels, long-term patience

You don’t need all eight. Pick two or three that match your personality and work them hard for the next 90 days. The rest can wait.

Once you land that first client, you’ll need the right process to keep things professional. Grab our 23-question web design client questionnaire — it’s the exact form I use to kick off every project. Then use our guide on how to deliver a client website so the handoff is smooth.

And if you haven’t already, read our complete plan for starting a web design business. Client acquisition is the engine — but you need the whole vehicle to go anywhere.

Now stop reading and go send your first outreach message. Your future clients are out there right now, waiting for someone like you to show up.

15 Tools to Start Your Web Design Business

Want this helpful free giveaway or training?

Download Now

The post How to Get Web Design Clients: 8 Proven Methods (2026 Guide) appeared first on Website Profit Course.

A good web design questionnaire is the difference between a smooth project and a nightmare.

I learned this the hard way. My first website was a 5-page HTML build for a local contractor — a referral from my dad. I made $500 in one night. But I showed up to that first meeting with zero preparation. No structured questions. No system. I just winged it and got lucky.

The second project? Not so lucky.

Once I started building websites for local clients on a regular basis, I realized the freelancers who scope projects accurately and the ones who get burned come down to a single document: a web design client questionnaire.

This questionnaire does two things that directly put money in your pocket:

You standardize your process for every new client website. No more reinventing the wheel.You accurately estimate custom work before you quote a price. No more guessing and undercharging.

If you want less guesswork, fewer surprises, and the confidence to charge what you’re worth, ask your potential clients these 30 questions during your initial consultation.

Below, I break down every question with real context from my years of freelancing — why it matters, what to watch for, and how each answer shapes your project. At the bottom, you can grab the full list as a downloadable PDF template to use on your next sales call.

Web Design Client Questionnaire

Want this helpful free giveaway or training?

Download Now

Part 1 — Company Information

Before you touch a single pixel, you need to understand who this business is, what they do, and how they show up in the world. These questions set the foundation for everything.

1. List the company name, address, phone number, and current website (if available).

This sounds like a formality. It’s not.

One of the main factors in ranking on Google is the consistency of your business details across the internet. In the local SEO world, this is called NAP — name, address, and phone number.

Several of my clients have been a mess in this department. Multiple addresses. Changed phone numbers. A street address hidden on purpose. Get this nailed down on day one and you save yourself headaches later.

2. What year was the company founded?

This is an obvious trust signal for anyone researching a company online. “Serving the community since 1998” carries weight. It also becomes a key detail for social media profiles, the website footer, and the About page.

3. Do you have a company logo, brand colors, or font preferences?

Not many small business owners have a clean logo file sitting on their computer. On multiple occasions, a client has sent me a photo of a t-shirt with their logo and expected me to work with it.

That means recreating graphics, guessing fonts, and plenty of headaches.

It’s always a good sign when someone comes prepared with a vector logo, hex color codes, or even a simple brand guide. If they don’t have one, that’s an opportunity for you to offer basic brand identity work as an add-on.

4. Do you have existing brand guidelines or a style document?

This is different from just having a logo. Some businesses — especially those that have worked with agencies before — have a PDF or document that outlines their voice, tone, colors, and typography rules. Ask for it. If it exists, it saves you hours of guessing. If it doesn’t, note that as a potential upsell.

5. List all primary contacts: name, email, and phone.

These are the people you’ll coordinate with throughout the project. It’s usually the business owner, a secretary, an office manager, or sometimes their spouse.

Know upfront who has decision-making authority. I’ve built entire websites based on feedback from an assistant, only to have the owner see it for the first time and want to change everything.

6. List all services or products you want featured on the website.

This answer directly determines how many pages you’ll build. Each service or product typically needs its own page — and each page requires written content and photos.

Those two things — content and photos — are almost always the hardest pieces to get from a client. More on that later.

7. List all nearby cities, towns, or counties within your service area.

For local businesses, it’s best to start small. Dominate your city first, then expand outward as Google rankings improve.

One effective strategy: create case studies on their website that reference specific locations where they’ve completed work. This signals to Google that the business actively serves those areas.

8. What makes you different from your competition?

Whatever it is, you need to figure it out early. The truth is that what separates your client from their next customer is a lack of trust. The website’s job is to be transparent, share useful information, and help potential customers choose them over the competition.

This is also where you can build trust through specific design and content choices — testimonials, certifications, real photos, detailed service descriptions — that most competitors skip.

I once lost a cleaning company contract worth over $5,700 per year because I underpriced the project. The client equated my low price with low expertise. Understanding what makes their business unique — through this exact question — helps you price and position the project correctly from the start.

9. What types of advertising do you use now, or have you used in the past?

One observation from years of working with local businesses: almost all offline advertising isn’t tracked well enough to know if it’s actually working. People spend hundreds per month on mailers or yellow page ads with no idea what the return looks like.

Online advertising is the polar opposite. You get all the data. You can track conversions — booked appointments, form submissions, phone calls. When you explain this to a client who’s been throwing money at billboards, it clicks fast. That’s where you add serious value.

Part 2 — Website Content & Design

Now we get into the nuts and bolts. These questions help you understand what they need on the site, what assets they already have, and where the gaps are that could delay your launch.

10. Do you have a domain name and/or website hosting?

It’s common for business owners to leave this entirely to their web provider. The domain might be buried in someone else’s account. The hosting might be bundled with a builder they no longer use.

My preference is to manage everything under my accounts so I can handle updates and maintenance without chasing logins. But if the client already owns their domain and hosting, I’ll gladly work within their setup.

Here’s a cautionary story: I once helped a former client after they’d switched to a new designer. When I looked into their domain, it was gone from their registrar account — apparently transferred into the new designer’s personal account. The client had no idea. That’s a hostage situation waiting to happen.

Always confirm who owns the domain and where it’s registered. Protect your client’s most important digital asset.

[image error]SiteGround Web Hosting

Launch your website or blog today on SiteGround, the hosting company recommended by WordPress!

Buy Now

I may earn a commission if you purchase using my links which helps support this website.

11. What is the main goal of the website? (Phone calls, email leads, sell products, bookings?)

Every design decision flows from this answer. A site built for phone calls looks different from one built for e-commerce.

On the back-end, set up Google Analytics to track these goals from day one. Tracking phone calls directly is tricky unless you use a tracking number, but you can track phone number clicks on the website as a solid proxy.

Over time, this data tells you exactly which traffic sources convert to leads — and that’s the kind of insight that keeps clients paying you month after month.

12. List all the pages you want on your website.

This ties back to the services and products question, but the client might have additional ideas — a careers page, a gallery, a blog, a resource section.

Once you know what great websites look like in their industry, you can suggest pages and features they haven’t considered. That’s how you shift from order-taker to trusted advisor.

13. Do you want a contact form on your website?

You’d think this is a yes every time. It’s not.

I have two clients who both offer a local service. One accepts leads through a quick contact form on the sidebar. The other refuses email communication entirely — he wants every question to come through a phone call.

Understanding this preference shapes the layout, the calls to action, and even which plugins you install.

14. Do you want to list any organizations, certifications, or awards?

Adding badges and logos of respected organizations is a proven way to build credibility. Think BBB accreditation, industry associations, manufacturer certifications, “Best of” awards.

From an SEO perspective, you also want to get the business listed in those organization directories with a link back to their website. The more relevant links from trusted sources, the better the chance of free Google traffic.

15. Do you have social media accounts you want linked from the website?

If the business is active on social media, the website becomes the central hub connecting everything. You can also browse their social feeds to get a better idea of their work, personality, and brand voice — all of which informs the website design and copy.

16. Do you have any website analytics data? How many visitors do you get per month?

There’s a high probability the answer is “I don’t know.”

It’s rare to find small business owners who check their analytics. Several of my clients have been amazed when I showed them how many people actually visit their site and what they do when they get there.

That’s why I send video reports to my best clients every quarter. I break down their analytics data into simple terms and suggest actions they can take — like encouraging online reviews — to improve results. It’s a retention goldmine.

17. What is your current main source of website traffic?

This depends heavily on the business type. Some thrive on social media and word of mouth. Others rely entirely on Google search. A restaurant gets traffic differently than a roofing contractor.

Once you track analytics for about 3 months, trends emerge showing which traffic sources actually convert to leads. That insight alone justifies an ongoing management retainer.

18. Do you have text, photos, and/or testimonials ready for the website?

Here it is — the biggest hassle in launching a client website.

Clients always have a vision for what they want. But when they need to put in the effort to get photos of the team, the office, and their work? Radio silence. Unexpected delays. Projects that should take two weeks drag into two months.

I learned to double every timeline estimate early in my career. The biggest launch delays were never about code — they were client content bottlenecks. Now I offer to write short bullet points for each page and use stock photos to launch, with the agreement that we’ll replace them with real content over time.

People who browse are perceptive. They know when you’re putting up a facade. Being detailed and transparent always wins online.

19. Do you have videos to feature on your website?

There has never been a better time to add a short intro video to your homepage. A 60-second clip where the owner introduces themselves and explains what they do builds instant trust.

Over time, you can add short customer testimonial videos to keep the site active — which Google rewards. All you need is the phone in your pocket.

20. Do you have marketing materials (brochures, business cards, lawn signs) to use as design inspiration?

This is always a good starting point for colors, text, and imagery. With local businesses, think business cards, brochures, lawn signs, t-shirts, vehicle wraps, and small publications. These give you the visual DNA of the brand even when there’s no formal brand guide.

21. List 2–3 websites you admire or want to emulate.

Local businesses usually have a competitor website in mind they want to beat. Each person also has a unique design taste — what’s beautiful to one is ugly to another.

The website needs to be something they’ll look at and love, plus built the right way to generate leads. This question bridges the gap between their aesthetic preferences and your functional expertise.

Part 3 — Project Scope & Budget

Most new freelancers skip these questions because they feel awkward. Don’t. Talking about money, timelines, and expectations upfront is what separates professionals from hobbyists. It’s also what protects you from scope creep.

22. What is your target date for launching the website?

Be realistic — both in terms of your own schedule and the back-and-forth communication that every project requires.

There comes a point in most projects where momentum stalls. Having a documented launch date gives you something to reference when you need to get things moving again.

23. What is your budget range for this project?

This is the question that makes new freelancers sweat. Ask it anyway.

You don’t need an exact number. A range works fine: “Are you thinking $500–$1,000, $1,000–$3,000, or $3,000+?” Their answer tells you immediately whether the project is a fit — and saves both of you weeks of back-and-forth on a deal that was never going to close.

I once lost a project because I quoted too low. The client assumed that if I charged so little, I couldn’t deliver much. Understanding their budget expectation — and the scope that comes with it — helps you price your web design services with confidence.

24. Are you interested in ongoing website maintenance after launch?

You must educate your potential client: simply having a website isn’t enough. If it launches and collects dust for years, it drops off the map — literally on Google.

Active businesses stay busy, put out new content, consistently get reviews, and make a mark in their local community. People who come into a project with this mindset are better clients than those who need to hear this message over and over.

This is also your natural bridge to a monthly retainer. Some of my earliest clients who started with tiny $300 projects have paid me over $20,000 in recurring management fees over 15+ years. Those retainers turned feast-or-famine freelancing into a predictable, stable income. The questionnaire is where that conversation starts.

If you want to explore this model, I wrote a detailed guide on how to manage a client WordPress website for the long haul.

25. Who will be responsible for updating the website after it’s handed off?

This determines your training requirements and the complexity of the CMS setup. If the owner’s 22-year-old kid is going to manage updates, you build differently than if a marketing director will handle it — or if they want you to handle everything.

Knowing this upfront prevents the “I broke something” phone call three weeks after launch.

26. How often do you plan to update the website content after launch?

Some clients want a “set it and forget it” brochure site. Others want to blog weekly and update their portfolio monthly. The answer here shapes your CMS configuration, your training plan, and whether an ongoing content retainer makes sense.

Part 4 — AI, Technology & Tools

This is new territory for most freelancers, but it’s 2026. Your clients have opinions about AI — or they should. These questions help you build a smarter, more integrated website and position yourself as a modern professional.

27. What tools and platforms does your business currently use? (Google Workspace, CRM, booking software, email marketing, etc.)

A website doesn’t exist in a vacuum. If they use Calendly for bookings, their site needs a Calendly embed. If they run email campaigns through Mailchimp, you need a signup form. If they track leads in a CRM, the contact form should connect to it.

Asking this upfront prevents the “Oh, I forgot to mention, we need this integrated” conversation two days before launch.

28. Are you interested in using AI-generated content for your website?

More clients are open to this than you’d expect. Some want AI to draft their service descriptions. Others want nothing to do with it. Either way, you need to know.

If they’re open to AI-assisted content, tools like the AI Article Generator can produce solid first drafts of service pages and blog posts in minutes — content you can then refine with the client’s real voice and expertise. It dramatically cuts down the “waiting for the client to write copy” bottleneck.

29. If your ideal customer was searching for you, what would they type into Google? List 5–10 phrases.

The key here is that a professional with years of experience thinks and speaks differently than someone Googling a problem they know nothing about.

A kitchen remodeler says “full gut renovation.” A homeowner types “how much does it cost to redo my kitchen.” You have to meet the customer where they are — and this question gives you raw material for keyword research and page copy.

You can cross-reference their answers with Google’s Keyword Planner to find real search volume and identify opportunities they’ve never considered.

30. What is your preferred method of communication during the project? (Email, phone, text, Zoom, project management tool?)

I’ve had clients who respond to every email within the hour. I’ve had clients who disappear for three weeks and then text me at 10 PM on a Saturday.

Setting this expectation early — “We’ll use email for all approvals, and schedule a 15-minute Zoom check-in every other week” — prevents communication chaos and keeps the project on track.

If you use AI System Prompts for client communication, you can even automate follow-up templates and project update emails to keep things moving without adding hours to your week.

How to Use This Web Design Questionnaire

Having 30 great questions means nothing if you use them wrong. Here’s how to get the most out of this questionnaire:

Send it before the first meeting. Email the questionnaire (or a link to your form) a few days before your discovery call. Let the client fill in what they can. This way, your first conversation focuses on the gaps, the nuances, and the relationship — not basic data entry.

Adapt it per project type. A brand-new business that needs everything from scratch gets different emphasis than a company requesting a website redesign. Skip questions that don’t apply. Add industry-specific questions when they matter.

Watch for red flags. If someone can’t answer the budget question at all, they may not be ready to invest. If they list 40 pages they want but expect a $500 budget, that’s a scope mismatch you need to address before signing anything. If they refuse to provide content or photos, remember — that’s the number one cause of stalled projects.

Use the answers to build your proposal. Every response feeds directly into your pricing, your timeline estimate, and the scope of work document. The more thorough the questionnaire, the more accurate your proposal — and the fewer surprises for either side.

A competitor once promised one of my clients better performance and lower costs. Five months later, the client apologized and asked to come back. The new designer had charged for every small change and buried the client in hidden fees. Thoroughness — the kind this questionnaire forces — is what sets you apart from those overpromise-and-underdeliver shops.

When you’re ready to turn questionnaire answers into a winning pitch, that’s your bridge to finding and closing high-paying web design clients.

Web Design Client Questionnaire

Want this helpful free giveaway or training?

Download Now

Frequently Asked QuestionsHow many questions should a web design questionnaire have?

Aim for 25–35 questions. Fewer than 20 and you’ll miss critical details that lead to scope creep. More than 40 and you risk overwhelming the client before the project even starts. The 30 questions in this guide cover every major category without feeling like a tax audit.

Should I send the questionnaire before or after the first meeting?

Before. Send it 2–3 days ahead of your discovery call so the client can fill in the straightforward answers (company name, services, contact info) on their own time. Use the meeting to dig into the subjective questions — design preferences, goals, budget, and expectations. This makes your first conversation dramatically more productive.

What if the client can’t answer most of the questions?

That’s actually useful information. A client who can’t articulate their goals, budget, or target audience may not be ready for a website project — or they may need more hand-holding than your typical client. Either way, you know what you’re working with before you commit.

Can I use this questionnaire for website redesign projects?

Absolutely. For redesigns, add a few extra questions: What do you like and dislike about your current site? What’s not working? Are there pages or content you want to keep? These help you preserve what’s valuable while fixing what’s broken.

How do I turn questionnaire answers into a web design proposal?

Map each answer to a deliverable. Their service list tells you the sitemap. Their budget range sets the tier. Their timeline sets your milestones. Their content readiness determines your launch risk. Stack those details into a proposal document with clear scope, pricing, and payment terms — and you’ll close more projects than freelancers who show up with a generic template. For detailed pricing guidance, check out the web design pricing guide (https://websiteprofitcourse.com/how-m...).

Quick Reference — All 30 Questions

Here’s the complete web design client questionnaire as a scannable checklist. Grab the free PDF below to use on your next sales call.

List the company name, address, phone number, and current website.What year was the company founded?Do you have a company logo, brand colors, or font preferences?Do you have existing brand guidelines or a style document?List all primary contacts: name, email, and phone.List all services or products you want featured on the website.List all nearby cities, towns, or counties within your service area.What makes you different from your competition?What types of advertising do you use now, or have you used in the past?Do you have a domain name and/or website hosting?What is the main goal of the website? (Phone calls, email leads, sell products, bookings?)List all the pages you want on your website.Do you want a contact form on your website?Do you want to list any organizations, certifications, or awards?Do you have social media accounts you want linked from the website?Do you have any website analytics data? How many visitors do you get per month?What is your current main source of website traffic?Do you have text, photos, and/or testimonials ready for the website?Do you have videos to feature on your website?Do you have marketing materials (brochures, business cards) to use as design inspiration?List 2–3 websites you admire or want to emulate.What is your target date for launching the website?What is your budget range for this project?Are you interested in ongoing website maintenance after launch?Who will be responsible for updating the website after it’s handed off?How often do you plan to update the website content after launch?What tools and platforms does your business currently use?Are you interested in using AI-generated content for your website?If your ideal customer was searching for you, what would they type into Google? List 5–10 phrases.What is your preferred method of communication during the project?Get the Free Questionnaire Template

There you have it — a complete web design client questionnaire built from years of real freelance experience. Every question exists because I either learned the hard way that it mattered, or because it saved a project from going sideways.

Use this on your next sales call. Print it out, send it as a Google Form, or customize it for your niche. However you use it, you’ll walk into every project with clarity, confidence, and a scope of work that actually holds up.

Grab the free PDF copy below so you’re ready for your next client conversation. And when you’re ready to level up the rest of your freelance process, check out how to deliver a client website the right way — from final review to handoff.

Web Design Client Questionnaire

Want this helpful free giveaway or training?

Download Now

The post Web Design Client Questionnaire: 30 Questions to Ask Clients appeared first on Website Profit Course.

Right now is the single best time in history to start a web design business from home.

WordPress still powers over 40% of the entire internet. AI tools slash the time it takes to build, write, and launch a professional website. And small businesses — millions of them — still have terrible websites or no website at all.

The opportunity is massive. The barrier to entry has never been lower.

I know because I’ve lived this path. My first paid web design project was a basic 5-page HTML site for a local contractor my dad knew. I built it in one night and earned $100 per hour on my very first project. That single win changed everything. I skipped the engineering career I’d trained for — Master’s degree and all — and never looked back.

Fifteen years later, I still run this business from home. Some of my earliest clients are still paying me monthly. I’ve tested hourly rates, contracts, and package pricing. I’ve lost deals, botched estimates, and tried to get friends to sell for me (total disaster). I’ve also built a system that generates recurring revenue and genuine client loyalty.

This guide is the distilled, honest version of everything I’ve learned — updated for 2026, with AI baked into every step. Whether you’ve already built your first site for a friend or you’re still learning the basics, this plan works.

No fluff. No theory. Just the blueprint.

Step 1: Choose Your Niche

The biggest mistake I see from new web designers? Trying to serve everyone.

It feels logical. Cast a wide net, land more fish. But in practice, it’s the fastest way to sound exactly like the hundreds of other freelancers flooding business owners with vague cold emails and generic “I build websites” pitches.

I know this because my own clients have told me. They’re drowning in outreach from web designers, digital marketers, and SEO specialists — all saying the same forgettable things. Nobody stands out.

A niche makes you stand out.

Here’s what I mean. Imagine you build websites exclusively for Italian restaurants because you grew up having Sunday dinner with lasagna and garlic bread at your grandma’s house.

That one decision changes everything. When you reach out to a restaurant owner, you speak their language. You already know they need an online reservation system. You can talk about strategies to grow their email list and bring more diners through the door. You can show them exactly what their menu will look like on a phone screen — because you’ve already built that exact layout a dozen times.

You’re not pitching web design. You’re pitching a solution built specifically for their business.

And there’s a powerful secondary benefit: standardization. When every project looks similar, your workflow gets faster. You build templates. You reuse copy frameworks. Your effective hourly rate climbs because you’re not starting from scratch every single time.

After testing websites across kitchen remodeling, dance studios, restaurants, tree service, and auto maintenance, I settled on the home service industry. Focus clarified my offers, my messaging, and my prospecting. My close rate went up almost immediately.

How to Pick Your NicheYou have genuine interest or personal connectionBusiness owners have money to invest in their online presenceTheir competitors have mediocre websites (you can verify this with a quick Google search)The businesses are local, so face-to-face meetings are possibleThe 2026 Advantage

AI makes niching down even more powerful. You can use ChatGPT to generate niche-specific demo sites, write industry-tailored outreach emails, and research a prospect’s competitors in minutes instead of hours.

Before your first phone call, you can already have a mock-up, competitive analysis, and personalized pitch ready — all because you narrowed your focus.

If you want to learn how to frame your sales messaging to add real value for local businesses, that’s the single most important skill alongside your technical ability.

Step 2: Learn the Core Skills (You Need Less Than You Think)

Here’s the truth that took me years to accept: you don’t need to be a great coder to build a great web design business.

My first paid site was basic HTML. Five pages. Nothing fancy. But it solved the client’s problem — he needed a professional web presence and had zero idea how to get one. I knew more than he did, and that gap was worth $100 an hour.

Expertise is relative to your customer.

What You Actually NeedWordPress fundamentals. If you understand how WordPress works — themes, plugins, pages, posts, menus — you have 80% of the technical knowledge required.Basic design principles. Clean layouts. Readable fonts. Consistent colors. White space. You’re not designing for a museum. You’re designing for a roofing company that needs phone calls.Enough HTML and CSS to customize. You don’t need to build from scratch. You need to tweak a margin, change a color, or add a custom section when a page builder can’t quite get there.What You Do NOT NeedA computer science degreeJavaScript masteryYears of Photoshop experienceAny formal certification

If you’re starting from zero, my WordPress 101 beginner tutorial covers the fundamentals you need before your first client project.

AI Collapses the Learning Curve

This is the biggest change since I started. When I hit a code problem in 2012, I spent hours on Stack Overflow, reading forum threads from 2007, hoping someone had the same issue. Now? You paste the exact error message into ChatGPT and get a working fix in seconds.

I’ve experienced this firsthand. With no web app experience, I used AI to turn an 8-year workout tracking spreadsheet into a working application in hours — not weeks. I reviewed code line by line, asked follow-up questions, and compressed what would have been months of self-study into a single afternoon.

For web design specifically, AI can:

Generate CSS snippets to fix layout issuesExplain WordPress hooks and functions in plain EnglishWrite HTML and CSS from a simple description of what you wantDebug plugin conflicts by analyzing error logs

You still need to understand the fundamentals. AI won’t replace your design eye or your ability to ask a client the right questions. But it eliminates the “I’m stuck and don’t know what to Google” problem that stops most beginners cold.

Step 3: Build Your Toolkit

Starting a web design business doesn’t require a massive upfront investment. Here’s the essential stack with realistic 2026 pricing.

Domain Registration

Cost: ~$15–20/year

Every client site needs a domain name — their address on the internet. This is often the first purchase you’ll make together, and it’s a good trust-builder. You can bundle domain registration with hosting, or keep them separate for more flexibility.

Web Hosting

Cost: $25–50/month (shared), or $300–500/year for an unlimited plan

Web hosting is the engine under the hood. For a local business website, you don’t need enterprise-grade servers. A solid shared hosting plan handles the traffic just fine.

I’ve used several WordPress hosting providers over the years, and SiteGround is my pick for beginners who want reliability without complexity. Start affordable, and upgrade as your client roster grows.

[image error]SiteGround Web Hosting

Launch your website or blog today on SiteGround, the hosting company recommended by WordPress!

Buy Now

I may earn a commission if you purchase using my links which helps support this website.

WordPress Theme / Page Builder

Cost: $89–299/year (or lifetime deals when available)

A premium theme with a visual page builder transforms your workflow. Instead of hand-coding every layout, you drag, drop, and customize.

My recommendation is Divi by Elegant Themes. When one of my previous themes became obsolete, I surveyed my subscribers — Divi was the clear winner. I now use it on every new WordPress installation, including this site. It offers enough design flexibility for professional work while staying beginner-friendly.

[image error]Divi Visual Builder

The #1 WordPress theme on the entire internet to design your website with drag-and-drop!

Buy Now

I may earn a commission if you purchase using my links which helps support this website.

That said, great alternatives exist. Astra paired with Elementor is another popular combination. Bricks Builder is gaining traction with designers who want more code-level control.

Choose one, master it, and stop second-guessing.

Analysis paralysis kills more web design businesses than bad tool choices ever will!

Productivity and AI Tools

Here’s where the 2026 toolkit diverges from what I used when I started:

Google Drive (free) — Client collaboration, document sharing, spreadsheets Canva (free tier or $120/year) — Quick graphics, social images, and logo mockups without needing PhotoshopChatGPT or Claude ($20/month) — Code generation, content drafting, client research, troubleshooting Adobe Creative Cloud ($660/year) — If you do heavy graphic or video work, but it’s optional for most web designers starting out AI Website Generator ($499 one-time) — Go from filling out a quick business intake form, and create a working website layout in minutes with professional copywriting done by AI. This is the single biggest time-saver when you need to show a prospect what their site could look like before they’ve committed.

The mindset shift matters here. AI isn’t a novelty add-on. It’s a core production tool.

When I can generate a first draft of page copy, a competitive analysis, and a layout mockup before a discovery call even happens — that’s a structural advantage that didn’t exist three years ago.

Step 4: Understand the Competitive Landscape

Before you set prices or write your first cold email, you need to understand who you’re competing against — and more importantly, where you fit.

The Four Tiers of Web Design Services

Tier 1: DIY Website Builders (Squarespace, Wix, GoDaddy)
Cost to the client: Less than $50/month
Who they serve: Budget-conscious owners willing to do the work themselves

Tier 2: Small Business Web Designers (solo operators or 2–3 person shops)
Cost to the client: One-time setup fee + $100–$500/month
Who they serve: Local businesses wanting customization and ongoing support

Tier 3: High-End Freelancers (specialized experts)
Cost to the client: $1,500–$15,000 per project
Who they serve: Businesses wanting tailored solutions and niche expertise

Tier 4: Digital Agencies (10+ employees, full-service)
Cost to the client: $10,000–$75,000+
Who they serve: Enterprises needing end-to-end digital solutions with dedicated project managers

Here’s the critical insight: don’t compete at the bottom.

If you slash prices to match Tier 1, you become a commodity. You’ll need insane volume to make a living, and you won’t have the profit margin to deliver the personal attention that wins referrals when you’re just getting started.

Your sweet spot is between Tier 2 and Tier 3. Enough value to justify real pricing. Enough personalization to differentiate from agencies that take months and charge five figures.

Don’t Fall Into the Comparison Trap

You will scroll through other designers’ portfolios and feel inadequate. That’s imposter syndrome talking, and every freelancer I know has dealt with it.

Here’s the reframe: study competitors for inspiration, not intimidation. Analyze what works in their layouts. Note what they charge. But remember that you don’t need to be the best designer in the world to earn a living — you need to be better than what your client currently has.

And if imposter syndrome gets loud? Stop researching. Open your page builder and start creating. Anxiety lives in overthinking. It dissolves in action.

Step 5: Set Your Pricing and Package Your Services

Pricing is where most beginners freeze. They either charge too little and attract nightmare clients, or overthink it and never send the proposal.

I’ve tested all three major pricing models. Here’s the honest breakdown.

Hourly Rates

This is where I started. You track your time and bill accordingly.

The upside: Flexibility. You can take on varied projects, adjust scope mid-stream, and start small.

The downside: Unknown final costs create “sticker shock.” A client budgets $500 in their head, and you invoice $1,200 because the project scope expanded. Now there’s tension.

Hourly works best for your first few projects while you figure out how long things actually take. But don’t stay here forever.

Contract-Based Pricing

Contracts define scope, timeline, and total cost upfront. In theory, they protect both sides.

In practice? Two of my contract clients ghosted near the finish line. They signed agreements. They paid deposits. Then they went silent as we approached launch.

Those two contracts totaled about $2,000 combined. I weighed hiring a lawyer to collect. But after factoring in the deposits I’d already received and the legal costs I’d incur, the math didn’t add up for that amount.

Contracts have their place on high-value projects with clear milestones. But they don’t fix bad communication. And for most freelancers starting out, they create a false sense of security.

Package Pricing (The Model I Recommend)

This is where things clicked for me.

By specializing in one niche, I “productized” my services into three clear packages. Each package had defined deliverables, a setup fee, and a monthly management price. Very little custom work. Minimal surprises. Easy for the client to understand and say yes to.

The monthly recurring revenue changed my entire business. Instead of chasing new projects every month, I built a base of clients who paid consistently. That base compounded over time.

One advantage nobody talks about: monthly clients become your best referral sources. They see results month after month. They tell their business friends. Some of my 15-year client relationships started as tiny $300 projects that grew into ongoing retainers exceeding $20,000 in lifetime value.

To strengthen these partnerships, I send robust analytics reports through Google Search Console and Google Analytics. I show clients exactly how many leads their websites generated. Occasionally, we meet in person or on Zoom to review the data. These touch points transformed me from an outsourced freelancer into a trusted part of their team.

The 2026 Pricing Reality

AI makes you faster. A site that took 20 hours now takes 12. Content that took 4 hours to draft takes 45 minutes.

Do not lower your prices because the work took fewer hours.

Price on value delivered, not time spent. If a website generates $5,000 per month in leads for a roofing company, the fact that you built it in 10 hours instead of 30 is irrelevant. Your speed is your advantage — it increases your effective hourly rate, not your discount.

For detailed guidance on what to charge, read my breakdown on how much to charge for a website based on project type and service level.

And before you start any project, use a web design client questionnaire to define scope upfront. This single document prevents more headaches than any contract clause I’ve ever written.

Step 6: Land Your First Clients

Now we arrive at the hardest part of starting a web design business. Not the design. Not the code. The selling.

Here’s a harsh truth I wish someone had told me sooner: building a website is easy compared to selling yourself. With a website, you control the outcome. With sales, you’re dealing with real people who have unique personalities, budgets, objections, and expectations.

You have to embrace this uncomfortable reality. Because without clients, you don’t have a business. You have a hobby.

Implement a Simple Outreach Process

Don’t overcomplicate this. To make money, you need to talk with more prospective clients. That means connecting with decision-makers must be a scheduled, non-negotiable part of your week.

Pick one channel. Cold email works well for introverts. Cold calling works faster for those who can stomach it. Either way:

Keep it short. Your first message should be 3–5 sentences, not a novel.Avoid including links in cold emails — they trigger spam filters.Your only goal is to get them on the phone or in a meeting. That’s it.Track your metrics. How many emails sent? How many responses? What subject lines get opens?

Here’s the reality check: you’ll be lucky to hear back from 2% of cold outreach. That means out of 100 emails, you might get 2–3 replies. It stings. But elite baseball hitters succeed only 30% of the time, and they make millions. Low response rates are normal. They’re not personal failure.

Go Local First

Start with your community. Face-to-face meetings build trust faster than any email sequence.

Join your local Chamber of Commerce. Attend networking events through platforms like Meetup. Introduce yourself to other small business owners at coffee shops, co-working spaces, and industry meetups.

These local connections emphasize word-of-mouth referrals — the most powerful sales channel for a freelancer. Some of my best long-term clients came from personal introductions, not cold outreach. One time, I emailed a local accountant who never replied. But he referred me to a $25 million cleaning company. Even after I lost that contract, the owner referred me to two more businesses. Every interaction plants a seed.

For a complete breakdown of acquisition channels, check out my guide on how to get local web design clients using 7 proven methods.

Follow Up Relentlessly

Most people send one message, hear nothing, and quit. That’s where you win.

If a prospect shows any interest — they replied, they asked a question, they said “maybe next quarter” — follow up within days, not weeks. A warm lead goes cold fast. One week of silence and they’ve forgotten your name.

Stay top of mind. Follow up by email, phone, text. Send a quick competitive analysis of their website versus a rival. Share a relevant article. Anything that proves you’re thinking about their business.

One beginner mistake I made: trying to outsource sales. I recruited friends to sell my web design services on commission. Total failure. Not because they were incapable — because they didn’t have passion for web design and weren’t motivated by commission alone with no salary. If you haven’t succeeded at selling your own services yet, you can’t hand someone else a playbook that doesn’t exist.

Your business is your baby. You’re the only one who will push through the inevitable rejection to reach that first paying client.

The 2026 AI Advantage in Prospecting

Before a discovery call, use AI to audit a prospect’s current website. Paste their URL into ChatGPT and ask for a performance assessment, content gaps, and mobile usability issues. In five minutes, you’ll have a competitive analysis that shows them exactly where they’re losing customers.

Better yet, use an AI Website Generator → to build a quick demo site for their specific business. Show up to the call with a visual preview of what their new site could look like. Nothing melts sales resistance faster than showing instead of telling.

Step 7: Run and Grow the Business

Landing clients is the first mountain. Running the business day-to-day is the long road after the summit.

Be Realistic With Your Situation

Your goals should match your life circumstances. Maybe you’re 35, have a solid job, just started a family, and you want to earn an extra $5,000 to ease the mortgage. Or maybe you’re a college student who doesn’t love your major and wants to build a full-time freelance business by graduation.

Both paths are valid. Both start the same way: work backward from your financial goal.

If you want $3,000/month in recurring revenue and your average client pays $300/month, you need 10 clients. If your cold outreach converts at 2%, you need to contact 500 people to land those 10. That’s roughly 40 outreach messages per week for three months.

Sales is a numbers game. Trust and refine your process instead of obsessing over short-term results. Plant seeds daily. Some bloom in weeks. Others take months.

Upsell Your Current Clients

The easiest dollar to earn is from someone who already trusts you.

As you gain skills, offer additional services: SEO improvement, Google Business optimization, email marketing setup, content strategy, analytics reporting, and reputation management.

Over time, layering skills beyond WordPress moved me from a one-off vendor to a monthly retainer consultant. I became a Swiss Army knife for my clients’ online presence. That breadth raised my income ceiling and made me nearly impossible to replace.

The most powerful way to expand? Over-deliver on communication. The number one complaint I hear from clients about previous designers isn’t a lack of technical skill. It’s simple tasks that didn’t get done on time. Tell your clients what you’re going to do, tell them how long it’ll take, then deliver it early. That alone puts you ahead of 90% of freelancers.

For a proven handoff workflow, see my guide on how to deliver a client website without the common post-launch headaches.

Managing the Business Side

Don’t let accounting and admin pile up. Use software from day one.

Wave (free) or FreshBooks ($17–55/month) for invoicing and expense tracking QuickBooks Online ($30+/month) for more robust bookkeeping as you growA simple Google Sheets spreadsheet works fine while you have fewer than 5 clients

Track every expense. Send professional invoices. Set aside 25–30% of revenue for taxes. These aren’t glamorous tasks, but they prevent a painful surprise every April.

For ongoing client site management — updates, backups, security monitoring — build a repeatable process. My guide on how to manage a client WordPress website covers the exact maintenance workflow I use across all active sites.

Step 8: Use AI to Work Faster and Deliver More Value

AI isn’t a separate step bolted onto the end. It’s woven through everything you do in 2026. But it deserves dedicated attention because of how dramatically it changes your capabilities as a solo freelancer.

Here’s the honest reality: AI won’t replace web designers. But web designers who use AI will replace those who don’t.

Where AI Delivers the Biggest Impact

Content creation. A single high-quality page of website copy used to take me 2–3 hours. Now I draft it in 30 minutes using a universal AI prompt template and spend the remaining time refining the voice and injecting client-specific details.

Code troubleshooting. Pasting exact error messages into ChatGPT solves problems about 80% of the time on the first try. The other 20% requires follow-up context — but even then, it’s dramatically faster than solo debugging. I’ve used ChatGPT prompts for WordPress to fix plugin conflicts, generate custom shortcodes, and build features I couldn’t have coded from scratch.

Client research and prospecting. Feed AI a prospect’s website URL and ask for a competitive audit. You’ll get actionable insights in minutes — insights that used to take an hour of manual analysis.

Demo site generation. This is the game-changer for closing deals. Use my custom AI Website Generator to turn a text description into a working layout before the prospect ever signs a contract. Visual proof eliminates the guesswork and the “I’ll think about it” objection.

The Human Part AI Can’t Replace

AI doesn’t replace your design eye. It doesn’t build trust with a handshake at a Chamber meeting. It can’t read between the lines when a client says “I like it” but their tone says otherwise.

Your job is the human judgment layer. Choosing the right niche. Asking the discovery questions that uncover what the client actually needs versus what they say they want. Following up when the deal goes quiet. Showing up reliably month after month.

AI makes the technical work faster. You make the relationship work.

Frequently Asked QuestionsCan you start a web design business with no experience?

Yes. You need basic WordPress skills and a willingness to learn — not a degree or certification. My first client didn’t care about my resume. He cared that I could build him a website that looked professional and showed up on Google. Start by building 2–3 practice sites, then offer your services locally.

How much money can you make with a web design business?

It depends entirely on your pricing model and client volume. A solo freelancer with 10 monthly retainer clients at $300/month earns $36,000/year in recurring revenue alone — before any one-time project fees. I’ve earned over $20,000 from individual clients who started with projects under $500 and grew into long-term partnerships.

Do I need to know coding to start a web design business?

No. Modern page builders like Divi and Elementor let you build professional sites visually. Basic HTML and CSS knowledge helps for customizations, but AI tools can now generate and explain code in real time. You don’t need to be a developer — you need to solve your client’s problem.

How do I get my first web design client?

Start locally. Research businesses in your niche with outdated or nonexistent websites. Send a short, personalized cold email or make a phone call. Join your Chamber of Commerce and networking groups. For a complete playbook, read my guide on how to get local web design clients.

Is web design still profitable in 2026?

More profitable than ever for the right approach. DIY builders and AI tools handle the low end, but small businesses still need a human who understands their industry, communicates reliably, and delivers ongoing results. The designers getting squeezed are generalists competing on price. Specialists who use AI to work faster are thriving.

What tools do I need to start a web design business?

At minimum: a domain registrar, web hosting, WordPress, and a page builder theme. Total startup cost is under $500 for the first year. Add AI tools like ChatGPT and pair it with an AI website generator to dramatically speed up your workflow. For hosting specifically, check out my comparison of the best WordPress hosting for beginners.

Start Building Today

You don’t need permission. You don’t need a perfect portfolio. You don’t need to know everything before you start.

You need a niche, a basic WordPress setup, the willingness to reach out to real business owners, and the discipline to follow up when they don’t reply on the first try. Every skill compounds. Every project teaches you something the last one didn’t. Every “no” gets you closer to the client who says “when can we start?”

Standardize your process for one industry. Use a questionnaire to onboard clients professionally from day one. Follow a quantifiable outreach strategy so you’re measuring results, not guessing. And always — always — communicate better than the last designer your client worked with.

The tools have never been this good. The demand has never been this high. And the path from “side project” to “full-time business” has never been this clear.

Build your first demo site with the AI Website Generator → and see how fast you can go from idea to a working website. That’s your proof of concept — for your client and for yourself.

The post How to Start a Web Design Business: 8-Step Plan to Make Money from Home appeared first on Website Profit Course.

You’re rebuilding prompts from scratch because you haven’t standardized. The fastest teams use a simple hybrid template that’s readable for humans, parsable for machines, and reliable under pressure. If you write content, review code, analyze data, teach, or make product calls, this gives you consistent outputs in minutes.

Here’s what you’ll get: a universal template that blends Markdown, XML, and JSON, clear guidance on when to use each layer, and five complete examples across high-value tasks. Copy it once and eliminate prompt thrash for good.

The hybrid stack explained

XML gives you the scaffold. Use lightweight tags like , , , , and to segment the prompt into parts the model can reliably follow. This structure makes prompts easy to diff, reuse, and compose in tools.

Markdown keeps it human. Headings, bold text, and short lists make constraints and steps scannable. You and your teammates can understand and edit fast without breaking the prompt.

JSON locks the data. Reserve JSON for inputs and machine-readable outputs. It’s strict by design—perfect for automated pipelines, validation, and downstream apps.

XML = structure and segmentation for the modelMarkdown = readability and instruction clarityJSON = precision for inputs and outputs at scale

– XML = structure and segmentation for the model

– Markdown = readability and instruction clarity

– JSON = precision for inputs and outputs at scale

Why this works:XML tags create clear sections that AI can parseMarkdown inside keeps content human-readableJSON handles actual dataSimple means easy to write and understandThe universal template you can copy

Use this as your default. Keep one clear role, scannable context, numbered steps, explicit constraints, and a dual-output format: a human-friendly report plus a machine-readable JSON object.

Define who the AI is in one clear sentence. Example: You are a pragmatic senior reviewer who writes concise, actionable feedback.Provide background using simple Markdown.- Audience: [who this is for]- Objective: [the outcome you need]- Scope: [what's in or out]- Key constraints: [3–5 bullets max]Tell the AI exactly what to do, in order:1. [Step one]2. [Step two]3. [Step three]Rules and limitations:- Must do: [requirement]- Avoid: [anti-pattern]- Style: [tone, length, formatting]```json{ "inputs": { "items": [], "source_text": "", "variables": {} }}```Describe the desired outputs:- Human report: headings, bullets, and a short summary paragraph- Machine data: valid JSON that follows the schema below{ "status": "", "summary": "", "details": [ {"id": "", "label": "", "score": "", "notes": ""} ], "meta": { "timestamp": "", "confidence": "<0–1>" }}

Two practices that reduce retries: make constraints short and specific, and always define the JSON schema you want back.

One integrated pattern you can reuse

If you need both a human-facing brief and a strict data object, follow this flow:

Validate inputs in Execute the numbered Write a concise human report in Return the machine object defined in

This approach forces precision, reasoning, and consistent output structure.

When to use each layer without overcomplicating

Keep XML for boundaries, Markdown for clarity, and JSON for strictness. If you’re tempted to add more tags, you probably need better steps, not more structure.

LayerWhat it does bestWhen to use itXMLSegments tasks and rolesAlways, to define , , , , MarkdownHuman-readable rules and stepsWithin XML tags to format bullets, headings, and emphasisJSONMachine-validated inputs and outputsFor and to integrate with code and pipelines

Do this:

One role and 3–5 tags for simplicitySimple Markdown bullets and numbered stepsJSON for data only, not prose

Not this:

Better:

- Style: Casual and conversational- Length: Around 500 wordsCommon pitfalls and fast fixesPitfallWhy it hurtsFix in your templateVague rolesUnstable tone and scopeWrite one-sentence with persona and goalWall-of-text contextModels miss constraintsBullet the with audience, objective, scopeNo output schemaInconsistent returnsDefine with exact keys and typesOverlong instructionsHallucinated stepsUse 3–5 numbered steps tied to outputsReal examples across common tasks

The universal template adapts cleanly to any workflow. Here are five complete, copyable prompts you can use immediately.

Content Writing

You need a blog post reviewed, but generic feedback wastes time. This prompt forces the model to identify weak spots, explain fixes, and demonstrate one rewrite.

You are a blog editor who helps improve draft articles.I've written a draft blog post about productivity tips for remote workers.- Target audience: Early-career professionals- Current length: ~800 words- Goal: Make it more engaging and actionableReview my draft and:1. Identify the 3 weakest sections2. Suggest specific improvements for each3. Rewrite one section as an example- Keep the original tone (casual but professional)- Don't add fluff - every word should add value- Maintain the current structureProvide your feedback in three parts:- **Issues Found** (bullet list)- **Recommendations** (numbered list)- **Example Rewrite** (one section, formatted as it would appear)

The output section demands structure. You get a bullet list of issues, numbered recommendations tied to each, and a rewritten example that shows rather than tells.

Code Review

Code reviews need specificity and prioritization. This prompt segments feedback into critical, performance, and nice-to-have buckets so you know what to ship first.

You are a senior Python developer conducting a code review.This function processes user uploads:- Handles CSV and Excel files- Validates data before database insertion- Currently has some performance issues with large filesReview the code below and:1. Identify performance bottlenecks2. Flag any security concerns3. Suggest architectural improvements- Must maintain backwards compatibility- Cannot add new dependencies- Solutions should work with Python 3.8+Structure your review as:- **Critical Issues** (must fix)- **Performance Improvements** (should fix)- **Nice to Have** (optional enhancements)[code would be pasted here]Data Analysis

Analysis requests often return walls of numbers with no actionable insight. This prompt requires the model to connect findings to evidence and recommend specific next steps.

You are a data analyst specializing in customer behavior.We're analyzing Q3 sales data to understand:- Which products are underperforming- Customer segments with highest churn- Regional variations in purchasing patternsAnalyze this dataset and:1. Identify the top 3 insights2. Explain what's driving each trend3. Recommend specific actions for each finding```json{ "regions": [ { "name": "Northeast", "revenue": 450000, "customers": 1200, "churn_rate": 0.08 }, { "name": "Southeast", "revenue": 380000, "customers": 950, "churn_rate": 0.15 } ], "products": [ { "id": "PRD-001", "category": "Premium", "units_sold": 450, "returns": 23 } ]}```For each insight provide:- **Finding** (one sentence)- **Evidence** (reference the data)- **Recommendation** (specific action)Teaching and Tutoring

Tutoring prompts fail when they ask for explanations without scaffolding. This one demands an analogy, a clean example, a practice task, and common mistakes.

You are a patient coding instructor teaching web development fundamentals.Student background:- Completed HTML/CSS basics- Just learning JavaScript (week 2)- Struggling with the concept of functionsHelp the student understand functions by:1. Explaining the concept using a real-world analogy2. Showing a simple code example3. Creating a practice exercise4. Anticipating common mistakes- Use beginner-friendly language (no jargon)- Examples must be practical, not abstract- Keep code examples under 10 linesStructure as:- **The Analogy** (2-3 sentences)- **Code Example** (with inline comments)- **Practice Exercise** (clear instructions)- **Common Pitfalls** (bullet list)Decision Support

Strategic decisions need frameworks, not opinions. This prompt forces the model to list decision criteria, compare options side-by-side, surface hidden risks, and justify a recommendation.

You are a strategic advisor helping evaluate business decisions.Our startup is deciding whether to:- **Option A**: Build an in-house solution (6 months, $200k)- **Option B**: Use a third-party platform ($3k/month, immediate)Current situation:- 8-person team- Runway: 18 months- Growing 15% MoMProvide a decision framework by:1. Listing key factors to consider2. Analyzing pros/cons of each option3. Identifying hidden risks4. Making a recommendation with reasoning- Be objective - acknowledge uncertainty- Consider both short-term and long-term implications- Factor in opportunity costDeliver as:- **Decision Criteria** (5-7 factors)- **Option Comparison** (side-by-side)- **Risk Assessment** (bullet points)- **Recommendation** (with 2-3 key reasons)

The block gives the model the runway, team size, and growth rate so recommendations stay realistic.

Ship fast with this practical checklistClarify the role in one sentence and align tone to your audience.Put background in as short bullets to prevent wall-of-text drift.Number your steps and keep each step tied to one output element.Store raw inputs in and define the exact schema you need back.Constrain length, style, and must/avoid rules under so edits don’t spill into logic.Always ask for both a human report and a JSON object to feed pipelines and tests.Version your template per task type and commit diffs so teams can evolve standards.

Hybrid prompting turns prompt craft into an asset instead of a bottleneck. By separating structure (XML), readability (Markdown), and data (JSON), you get reliable, reviewable, and automatable outputs across content, code, analysis, tutoring, and decisions.

Copy the universal template above, paste it into your next task, and tailor five fields—role, audience, objective, instructions, and JSON schema. Ship one standard today, and you’ll never reinvent a prompt tomorrow.

The post The Universal LLM Prompt Template for Every AI Task appeared first on Website Profit Course.

Imagine being able to create a fully functional web app without any prior coding experience.

With the help of AI tools, I’ve managed to develop a bunch of “mini” web applications using minimal hand-coded lines. AI offers smarter, faster, and more efficient solutions than traditional coding, especially as a solo developer who likes to tinker with new projects. It allows you to generate hundreds of lines of functional code.

You can then review the AI code output line by line to understand how it works and ask follow-up questions, significantly condensing your learning time.

This capability will undoubtedly empower non-developers to become tech entrepreneurs in the future.

In this article, I’ll walk you through the process of transforming a workout tracking spreadsheet into a functional web application using PHP, MySQL, jQuery, and JavaScript. We’ll cover the essential components of the app, the challenges encountered during development, and the solutions implemented along the way.

The Project Background

I started tracking my workouts back in November 2016, creating a comprehensive spreadsheet system with multiple components.

The setup included:

A master list of exercises with maximum rep counts by day and monthA detailed daily workout log (now containing over 4,444 workout entries)A monthly performance tracker with interactive exercise selectionStatistical summaries showing workout frequency by month

This robust dataset made the perfect candidate for conversion to a database-driven web application, where I could maintain the functionality while gaining the benefits of web accessibility.

Leveraging AI for Rapid Development

For this project, I utilized Claude, a relatively new AI tool with advantages over alternatives like ChatGPT, particularly in coding capabilities and the ability to process screenshots.

In my initial prompt to Claude, I provided three screenshots of my spreadsheet architecture and requested skeleton code using specific technologies:

I have a spreadsheet to log my workouts. I’d like to turn this into a web app. I will provide three screenshots: one is a list of all the exercises with the max number of reps for the set day and month; one is a sheet where I log the daily workouts with the date, including a dropdown to select a specific exercise; and the last is a monthly performance chart where I can select the exercise and a live update to show my monthly reps for that specific exercise and update the chart. Can you create skeleton code to turn this into a web app using PHP, jQuery, JavaScript, and MySQL?

I specifically chose these languages due to my background in WordPress development, where most of my customizations have involved this technology stack. By specifying my preferred languages, I ensured that the AI generated code compatible with my experience and existing skill set.

Database Structure

At the heart of any data-driven application is a well-designed database. For our workout tracker, we need two primary tables:

CREATE TABLE exercises ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, category VARCHAR(50) NOT NULL, max_set INT, max_day INT, max_month INT);CREATE TABLE workouts ( id INT AUTO_INCREMENT PRIMARY KEY, date DATE NOT NULL, exercise_id INT, total_reps INT, set1 INT, set2 INT, set3 INT, FOREIGN KEY (exercise_id) REFERENCES exercises(id));

The exercises table stores information about each exercise, including its name, category, and maximum repetition records. The workouts table records individual workout sessions, linking to specific exercises and tracking the number of repetitions per set.

Adding User Authentication

A key enhancement to our workout tracker is implementing a secure user authentication system. This allows multiple users to track their workouts independently.

Creating the Users Table

First, we need to add a new table to our database schema:

CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE NOT NULL, email VARCHAR(100) UNIQUE NOT NULL, password_hash VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, last_login TIMESTAMP);Modifying Existing Tables

We need to update our existing tables to associate data with specific users:

ALTER TABLE exercises ADD COLUMN user_id INT;ALTER TABLE workouts ADD COLUMN user_id INT;ALTER TABLE exercises ADD FOREIGN KEY (user_id) REFERENCES users(id);ALTER TABLE workouts ADD FOREIGN KEY (user_id) REFERENCES users(id);Authentication Functions

Add these functions to your functions.php file:

function registerUser($username, $email, $password) { global $conn; $password_hash = password_hash($password, PASSWORD_DEFAULT); $sql = "INSERT INTO users (username, email, password_hash) VALUES (?, ?, ?)"; $stmt = $conn->prepare($sql); $stmt->bind_param("sss", $username, $email, $password_hash); if ($stmt->execute()) { return $conn->insert_id; } else { return false; }}function loginUser($username, $password) { global $conn; $sql = "SELECT id, password_hash FROM users WHERE username = ?"; $stmt = $conn->prepare($sql); $stmt->bind_param("s", $username); $stmt->execute(); $result = $stmt->get_result(); if ($user = $result->fetch_assoc()) { if (password_verify($password, $user['password_hash'])) { $_SESSION['user_id'] = $user['id']; updateLastLogin($user['id']); return true; } } return false;}function updateLastLogin($user_id) { global $conn; $sql = "UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = ?"; $stmt = $conn->prepare($sql); $stmt->bind_param("i", $user_id); $stmt->execute();}function logoutUser() { session_unset(); session_destroy();}function isLoggedIn() { return isset($_SESSION['user_id']);}function getCurrentUserId() { return $_SESSION['user_id'] ?? null;}Registration and Login Pages

Create register.php:

Create login.php:

Create a simple logout.php:

Updating Existing Functions for User Context

Modify your existing database functions to include the user_id parameter:

function getExercises() { global $conn; $user_id = getCurrentUserId(); $sql = "SELECT * FROM exercises WHERE user_id = ?"; $stmt = $conn->prepare($sql); $stmt->bind_param("i", $user_id); $stmt->execute(); return $stmt->get_result()->fetch_all(MYSQLI_ASSOC);}function logWorkout($date, $exercise_id, $total_reps, $set1, $set2, $set3) { global $conn; $user_id = getCurrentUserId(); $sql = "INSERT INTO workouts (date, exercise_id, total_reps, set1, set2, set3, user_id) VALUES (?, ?, ?, ?, ?, ?, ?)"; $stmt = $conn->prepare($sql); $stmt->bind_param("siiiiii", $date, $exercise_id, $total_reps, $set1, $set2, $set3, $user_id); return $stmt->execute();}Authentication Middleware

Update your main pages to include authentication checks:

This ensures only authenticated users can access your application.

Core Architecture

Our application now follows an enhanced web architecture:

Authentication Layer: Manages user registration, login, and session managementBackend (PHP): Handles data processing and database interactions within user contextFrontend (HTML/CSS/JavaScript): Provides the user interface and client-side functionalityDatabase (MySQL): Stores and retrieves workout data linked to specific users

By adding user authentication, we’ve transformed our single-user app into a multi-user platform where each person’s workout data remains private and separate.

Key Features Implementation1. Navigation System

The app features a clean, tab-based navigation system that allows users to switch between different sections:

Exercises Log Workout Performance Chart

This is powered by jQuery to dynamically load content without full page refreshes:

$('#show-exercises').click(function(e) { e.preventDefault(); $.get('get_exercises.php', function(data) { $('#content').html(data); });});2. Exercise Management

One significant feature is the ability to view and add exercises. We implemented this with a table display and an add form:

// get_exercises.php Exercise Category Max (Set) Max (Day) Max (Month) + Add Exercise

When a user clicks the “Add Exercise” button, a form appears that, upon submission, sends data to add_exercise.php for processing.

3. Workout Logging

The core functionality allows users to log their workouts. A key improvement we made was enabling multiple exercises to be logged for a single day:

$(document).on('click', '#add-exercise', function() { exerciseCount++; // Remove the "Remove Last Row" button from all existing exercise inputs $('.exercise-input .remove-exercise').remove(); const newExercise = $('.exercise-input').first().clone(); newExercise.find('input').val(''); newExercise.find('select').val(''); // Append the new exercise input $('#exercise-inputs').append(newExercise); // Add the "Remove Last Row" button only to the last exercise input $('#exercise-inputs .exercise-input:last') .append('Remove Last Row');});

This dynamic form allows users to add as many exercises as needed for a single workout session.

Workout Streaks Tracking

One key motivational feature we’ve implemented is the ability to track workout streaks – both the current streak and the longest streak achieved:

function getWorkoutStreaks() { global $conn; $user_id = getCurrentUserId(); $sql = "SELECT DISTINCT date FROM workouts WHERE user_id = ? AND date < CURDATE() ORDER BY date DESC"; $stmt = $conn->prepare($sql); $stmt->bind_param("i", $user_id); $stmt->execute(); $result = $stmt->get_result(); $dates = $result->fetch_all(MYSQLI_ASSOC); $current_streak = 0; $longest_streak = 0; $streak = 0; $yesterday = date('Y-m-d', strtotime('-1 day')); $prev_date = null; foreach ($dates as $row) { $date = $row['date']; if ($prev_date === null) { $streak = 1; if ($date == $yesterday) { $current_streak = 1; } } else { $diff = (strtotime($prev_date) - strtotime($date)) / 86400; if ($diff == 1) { $streak++; } else { $longest_streak = max($longest_streak, $streak); $streak = 1; } if ($current_streak > 0 && $diff == 1) { $current_streak++; } } $prev_date = $date; } // Final check $longest_streak = max($longest_streak, $streak); return [ 'current_streak' => $current_streak, 'longest_streak' => $longest_streak ];}

This function calculates two key metrics:

Current streak: Consecutive days with workouts up to yesterdayLongest streak: The longest sequence of consecutive workout days in history

The function works by:

Fetching all workout dates for the user (ordered from newest to oldest)Iterating through these dates to identify consecutive daysTracking the current streak (must include yesterday)Finding the longest streak in the entire historyMonthly Progress Calculation

We also added a function to calculate monthly progress – what percentage of days in the current month have recorded workouts:

function getMonthlyProgress() { global $conn; $user_id = getCurrentUserId(); $current_month = date('Y-m'); $days_in_month = date('t'); $sql = "SELECT COUNT(DISTINCT date) as workout_days FROM workouts WHERE user_id = ? AND date LIKE ?"; $stmt = $conn->prepare($sql); $like_param = $current_month . '%'; $stmt->bind_param("is", $user_id, $like_param); $stmt->execute(); $result = $stmt->get_result(); $row = $result->fetch_assoc(); $workout_days = $row['workout_days']; $monthly_progress = ($workout_days / $days_in_month) * 100; return number_format($monthly_progress, 1);}

This function:

Determines the current month and how many days it hasCounts how many days in the current month have recorded workoutsCalculates the percentage of days with workoutsReturns a formatted percentage string4. CSV Upload Integration

For users who prefer batch uploads or are migrating from spreadsheets, we added CSV upload functionality:

function getExerciseIdByName($name) { global $conn; $sql = "SELECT id FROM exercises WHERE name = ?"; $stmt = $conn->prepare($sql); $stmt->bind_param("s", $name); $stmt->execute(); $result = $stmt->get_result(); if ($row = $result->fetch_assoc()) { return $row['id']; } return null;}

This function helps map exercise names from the CSV to their corresponding database IDs, enabling smooth data imports.

5. Performance Tracking and Visualization

To help users track their progress, we implemented a performance chart using Chart.js:

function updateChart(exerciseId) { $.ajax({ url: 'get_performance_data.php', method: 'GET', data: { exercise_id: exerciseId }, dataType: 'json', success: function(data) { const labels = data.map(item => item.month); const reps = data.map(item => parseInt(item.total_reps)); chart.data.labels = labels; chart.data.datasets[0].data = reps; chart.update(); }, error: function(xhr, status, error) { console.error('Error fetching performance data:', error); } });}

This function fetches performance data for a selected exercise and updates the chart, providing visual feedback on progress over time.

Recent Workouts Management

To help users track and manage their workout history, we’ve implemented a function to display and allow deletion of recent workouts:

function getRecentWorkouts($user_id, $days = 14) { global $conn; $sql = "SELECT w.id, w.date, e.name as exercise_name, w.total_reps, w.set1, w.set2, w.set3 FROM workouts w JOIN exercises e ON w.exercise_id = e.id WHERE w.user_id = ? AND w.date >= DATE_SUB(CURDATE(), INTERVAL ? DAY) ORDER BY w.date DESC, e.name ASC"; $stmt = $conn->prepare($sql); $stmt->bind_param("ii", $user_id, $days); $stmt->execute(); return $stmt->get_result()->fetch_all(MYSQLI_ASSOC);}

For the corresponding HTML and JavaScript, we created a dynamic table with delete functionality:

Date Exercise Total Reps Set 1 Set 2 Set 3 Delete ❌

The deletion functionality is handled via AJAX to provide a smooth user experience:

$(document).ready(function() { $('.delete-btn').on('click', function() { var row = $(this).closest('tr'); var workoutId = row.data('id'); if (confirm('Are you sure you want to delete this workout?')) { $.ajax({ url: 'recent_workouts.php', method: 'POST', data: { delete_id: workoutId }, dataType: 'json', success: function(response) { if (response.success) { row.remove(); } else { alert('Error deleting workout: ' + response.error); } }, error: function() { alert('An error occurred while trying to delete the workout.'); } }); } });});

On the server side, we handle the delete request:

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_id'])) { $delete_id = $_POST['delete_id']; $delete_sql = "DELETE FROM workouts WHERE id = ? AND user_id = ?"; $delete_stmt = $conn->prepare($delete_sql); $delete_stmt->bind_param("ii", $delete_id, $user_id); if ($delete_stmt->execute()) { echo json_encode(['success' => true]); } else { echo json_encode(['success' => false, 'error' => $conn->error]); } exit();}Workout Days by Month Chart

To help visualize workout consistency over time, we added a function to calculate workout days per month:

function getWorkoutDays(){ global $conn; $user_id = getCurrentUserId(); $sql = "SELECT DATE_FORMAT(date, '%Y-%m') AS month, COUNT(DISTINCT date) AS workout_days FROM workouts WHERE user_id = ? GROUP BY month ORDER BY month"; $stmt = $conn->prepare($sql); $stmt->bind_param("i", $user_id); $stmt->execute(); $result = $stmt->get_result(); return $result->fetch_all(MYSQLI_ASSOC);}

This data powers a Chart.js bar chart showing workout frequency by month:

var workoutDaysCtx = document.getElementById('workoutDaysChart').getContext('2d');var workoutDaysChart = new Chart(workoutDaysCtx, { type: 'bar', data: { labels: , datasets: [{ label: 'Workout Days per Month', data: , backgroundColor: 'rgba(75, 192, 192, 0.6)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true, title: { display: true, text: 'Number of Workout Days' } }, x: { title: { display: true, text: 'Month' } } }, plugins: { title: { display: true, text: 'Workout Days per Month' } } }});

This chart visualization provides users with a clear view of their workout consistency over time. The PHP code to prepare the data looks like this:

// Query to get workouts grouped by month$workout_days_data = getWorkoutDays();$months = [];$workout_days = [];foreach ($workout_days_data as $row) { $months[] = $row['month']; $workout_days[] = $row['workout_days'];}// Convert PHP arrays to JSON for use in JavaScript$months_json = json_encode($months);$workout_days_json = json_encode($workout_days);Dashboard Metrics

To provide users with an at-a-glance view of their progress, we designed a metrics dashboard that displays key performance indicators.

HTML/CSS Structure

Here’s a clean, modern metric dashboard design:

Workout Metrics Dashboard body { font-family: 'Roboto', sans-serif; background-color: #f4f4f8; margin: 0; padding: 20px; color: #333; } .dashboard { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1200px; margin: 0 auto; } .metric { background-color: #ffffff; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); flex: 1 1 calc(33.333% - 20px); min-width: 200px; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease; } .metric:hover { transform: translateY(-5px); } .metric-icon { font-size: 2.5em; margin-bottom: 10px; } .metric-value { font-size: 1.8em; font-weight: bold; margin-bottom: 5px; } .metric-label { font-size: 1em; color: #666; text-align: center; } @media (max-width: 768px) { .metric { flex: 1 1 calc(50% - 20px); } } @media (max-width: 480px) { .metric { flex: 1 1 100%; } } 🔥 Current Streak 🏆 Longest Streak 📈 % Monthly Progress 💪 Last Month's Top Exercise 📊 % Improvement Score Enhanced Progress Visualization

For the monthly progress metric, we replaced the simple percentage text with an SVG pie chart:

Monthly Progress

For dynamic PHP integration, you’d replace the static value with a calculation:

Where $progress is your percentage value (e.g., 13), and we multiply it by 0.628 (which is approximately 2π/100) to convert the percentage to the correct fraction of the circle’s circumference.

Handling Challenges

At this stage, I reached the limit on prompts for this conversation, as Claude limits usage to five or six prompts at a time. I often had to wait a few hours before continuing. To work around this, I alternated between Claude and other free AI tools like ChatGPT or Google Gemini to maximize response quality and efficiently address minor issues.

The pro version of Claude includes a project feature that enables collaboration on a set of documents or code.

Debugging Workout Logging Issues

When testing the workout logging functionality, we encountered an issue where the operation would fail silently. We implemented better error reporting to diagnose the problem:

function logWorkout($date, $exercise_id, $total_reps, $set1, $set2, $set3) { global $conn; $sql = "INSERT INTO workouts (date, exercise_id, total_reps, set1, set2, set3) VALUES (?, ?, ?, ?, ?, ?)"; $stmt = $conn->prepare($sql); if ($stmt === false) { return "Prepare failed: " . $conn->error; } $stmt->bind_param("siiiiii", $date, $exercise_id, $total_reps, $set1, $set2, $set3); if ($stmt->execute() === false) { return "Execute failed: " . $stmt->error; } return true;}

The issue was a mismatch in the parameter types specified in the bind_param method. By adding detailed error reporting, we could quickly identify and fix the problem.

Calculating Exercise Maximums

To keep track of personal records, we created a function that calculates the maximum repetitions for each exercise:

function updateExerciseMaxes() { global $conn; // Get all exercises $exercises_query = "SELECT id FROM exercises"; $exercises_result = $conn->query($exercises_query); while ($exercise = $exercises_result->fetch_assoc()) { $exercise_id = $exercise['id']; // Max reps per set $max_set_query = "SELECT MAX(GREATEST(set1, set2, set3)) as max_set FROM workouts WHERE exercise_id = $exercise_id"; $max_set_result = $conn->query($max_set_query); $max_set = $max_set_result->fetch_assoc()['max_set']; // Additional queries for max_day and max_month // Update the exercise record $update_query = "UPDATE exercises SET max_set = $max_set, max_day = $max_day, max_month = $max_month WHERE id = $exercise_id"; $conn->query($update_query); } return true;}

This function runs complex SQL queries to calculate the maximum values and update them in the database.

Troubleshooting Authentication Issues

During implementation of the user authentication system, we encountered some challenges with the user ID not being properly passed to other functions. Here’s how we resolved it:

Session Management

The most common issue was related to session management. Here’s a fixed version of getCurrentUserId() with improved error handling:

function getCurrentUserId() { if (!isset($_SESSION)) { error_log("Session not started when calling getCurrentUserId()"); return null; } if (!isset($_SESSION['user_id'])) { error_log("user_id not set in session when calling getCurrentUserId()"); return null; } return $_SESSION['user_id'];}

To ensure sessions are properly started, we added session_start() at the beginning of all PHP files that use sessions:

Function Debugging

We also implemented debugging code in key functions to track down issues:

function logWorkout($date, $exercise_id, $total_reps, $set1, $set2, $set3) { global $conn; $user_id = getCurrentUserId(); if ($user_id === null) { error_log("User ID is null in logWorkout function"); // You might want to throw an exception here or handle this case return false; } // ... rest of the function}

This extra error checking helped identify where the authentication chain was breaking down.

Streak Calculation Challenges

The streak calculation logic was particularly tricky to get right. We went through several iterations before landing on a reliable solution:

First Attempt: Used a recursive common table expression (CTE) in MySQL, which was elegant but proved too resource-intensive and caused timeouts.Second Attempt: Tried a complex MySQL query with window functions, which also had performance issues.Final Solution: Simplified the approach by fetching the raw data and performing calculations in PHP, which proved much more efficient and maintainable.

The key insight was recognizing that some computations are better handled in application code rather than in database queries, especially when dealing with sequential data analysis like streaks.

Debugging the Streak Logic

We experienced issues where the current streak calculation wasn’t working correctly. The problem was in how we were comparing dates and checking for continuity:

// Problematic code$diff = abs((strtotime($date) - strtotime($prev_date)) / 86400);

The solution was to ensure we were calculating the difference between consecutive dates correctly:

// Fixed code$diff = (strtotime($prev_date) - strtotime($date)) / 86400;

This subtle change fixed the issue because we needed to account for the fact that the dates were being processed in descending order.

Another challenge was properly identifying the start of the current streak. We needed to specifically look for yesterday’s date:

$yesterday = date('Y-m-d', strtotime('-1 day'));if ($date == $yesterday) { $current_streak = 1;}

These detailed adjustments to the logic ensured that the streak calculations worked correctly in all scenarios.

Conclusion

Transforming a spreadsheet into a web application involves careful planning, thoughtful architecture, and attention to detail. By leveraging PHP, MySQL, jQuery, and JavaScript, we created a robust workout tracking system that offers more functionality and a better user experience than the original spreadsheet.

The final product allows users to track their exercises, log workouts with multiple exercises per day, upload data via CSV, and visualize their performance over time with interactive charts and engaging visual elements like pie charts. The modern, responsive design with intuitive navigation elements like the pill selector ensures a pleasant experience across devices.

By incorporating visual progress indicators such as the SVG pie chart, we’ve made the data more meaningful and engaging for users, helping them stay motivated and track their fitness journey more effectively.

This project demonstrates the power of web technologies in creating practical, everyday tools that enhance productivity and help users achieve their fitness goals. The combination of solid backend functionality with thoughtful frontend design creates an application that’s both powerful and a pleasure to use.

I’m also launching this workout tracker app since I’ve been tracking my workouts for nearly a decade, and I believe others may find this useful as well. If you’re interested in using this tool, go check it out here – Habit IQ.

The post How to Create a Workout Tracker Web App with AI appeared first on Website Profit Course.

In today’s fast-paced digital landscape, content creation remains one of the most time-consuming aspects of maintaining an online presence.

I can’t speak for anyone else but a 1,000 word blog post takes me something like 6-8 hours to create from scratch.

That involves:

Digging deep to learn a new topic.Sketch an outline before writing.Write content worth reading.Make Google love your content.Formatting before publishing.

What if you could leverage AI to generate high-quality articles in minutes instead of hours?

That’s exactly what I set out to build when I was recently tasked with writing blog posts and new website pages for my local business clients.

I made a simple but powerful AI article generator that streamlines the content creation process above, so you start with a well-structured first draft that is much easier to add on top of vs. starting with a blank sheet.

✏️ Try the Free Article Generator Demo

Want to run this on your own server with no limitations? Purchase the full source code here.

The Development Journey

Creating this tool was a fascinating process that showcased how AI can dramatically accelerate software development. Let’s look at the key steps and challenges I faced while building this solution, along with the prompting techniques I used to engage effectively with the AI models.

Establishing the Foundation

First, I needed a clear vision for the article generator. The goal was simplicity: users enter a brief topic description (3-5 words), click a button, and receive a complete article.

To kick off the process, I shared my detailed requirements with an AI assistant and provided an example form integrated with the LLM APIs. Here’s what I asked:

I want to create an article generator. Use this example form template for a workout planner (PHP file attached), and mimic the exact template code and styles to create the article generator. I will be using the exact same openai.php and anthropic.php wrappers to use AI functions to generate the article. It will be generated by a series of prompting steps shown below.

This article generator form will be dead simple where I input an article idea in a text box, which will be the seed idea with a big “generate” button (same styles from planner.css).

The output will also be the same with a notification area, and the output.txt file which contains the article content.

I then outlined the multi-step prompting process I envisioned for the first version of the article generator (which I’ve since updated a few times):

Generate two separate outlines using different AI models.Combine these outlines into one coherent structure.Think up SEO keywords relevant to the topic.Produce a well-written, comprehensive article.

The exact prompt sequence I asked for was this:

SEED IDEA - 3-5 word description input via form.PROMPT #1 - Outline an article for the topic SEED_IDEA. I want a very concise 3-5 bullet points outline, each with a short 1-sentence description of what's included in that bullet section.PROMPT #2 - Combine these two outlines for an article entitled "Affair Recovery Timeline", and make it ultra-concise without losing any of the core ideas: [Include OUTLINE_1 and OUTLINE_2]PROMPT #3 - Extract and generate keywords that people likely search that are related to the article outline: [Include OUTLINE_COMBINED]PROMPT #4 - Write an article on the topic of SEED_IDEA using the outline below. Make it as long as it needs to be to adequately cover all the topics in the outline. Consider using the SEO keywords below to enhance the article, but do not force them. [Include KEYWORD_LIST and OUTLINE_COMBINED]

The AI assistant provided a complete implementation plan, including:

PHP code for the backend processing.HTML structure for the user interface.JavaScript code for handling form submission and displaying results.Detailed explanation of the workflow.

The response included a complete solution with proper error handling, AJAX calls, and a user-friendly interface—all while maintaining the same styling as my existing workout planner application.

Here is the pseudo-code of the LLM response (which is ironically summarized by an AI chat to condense the full code!):

HIGH-LEVEL PSEUDOCODE: AI ARTICLE GENERATORFILES:- generate_article.php: Handles backend processing of article generation requests.- article.php: Provides the HTML structure and user interface for the article generator.- article.js: Manages the client-side logic and AJAX requests for article generation.- lib/openai.php: Abstracts interactions with the OpenAI API.- lib/anthropic.php: Abstracts interactions with the Anthropic API.- planner.css: Contains the styling rules for the article generator's user interface.- api.log: Stores a record of API calls and responses for debugging and monitoring.FILE: generate_article.php (Backend Processor)1. Receives a seed idea from the user via a POST request.2. Validates and sanitizes the input.3. Uses the OpenAI and Anthropic APIs to generate two article outlines.4. Combines the generated outlines into a single, refined outline.5. Generates SEO keywords related to the combined outline.6. Uses an AI model to write the full article based on the outline and keywords.7. Returns the generated article as a JSON response.8. Handles errors and logs API interactions.FILE: article.php (Frontend HTML)1. Presents a form for the user to input an article seed idea.2. Provides a "Generate Article" button to trigger the article generation process.3. Includes a loading indicator to show when the process is running.4. Displays the generated article and a download option in a designated area.FILE: article.js (Frontend JavaScript)1. Captures the form submission event.2. Sends an AJAX request to generate_article.php with the user's seed idea.3. Displays a loading indicator while waiting for the response.4. Handles the JSON response from the backend.5. Displays the generated article and a download button to the user.6. Handles and displays any errors that occur during the process.FILE: lib/openai.php (OpenAI API Wrapper)1. Encapsulates the logic for interacting with the OpenAI API.2. Takes a prompt as input and returns the API's response.FILE: lib/anthropic.php (Anthropic API Wrapper)1. Encapsulates the logic for interacting with the Anthropic API.2. Takes a prompt as input and returns the API's response.FILE: planner.css (CSS Styling)1. Defines the visual presentation and layout of the article generator's user interface.FILE: api.log (API Logging)1. Stores a record of API requests and responses for debugging and monitoring purposes.

This foundation gave me everything needed to build out the powerful article generation tool that leverages multiple AI models in sequence to create high-quality content from a simple topic idea.

It’s not always smooth sailing and error free, though.

You will likely get some issues that you must debug… or let AI debug for you!

Just continue to test, ask questions, grab any errors you receive and feed them back into the chat to find solutions.

Building the User Interface

I prioritized a clean, intuitive interface with a single input text box and a big “Generate” button:

Article Topic/Idea Generate Article Generating your article...

Bootstrap and Font Awesome make form design effortless in this code snippet.

The form uses Bootstrap’s margin classes (i.e. mb-4) to create proper spacing between elements without writing custom CSS.

Font Awesome icons (fas fa-sync-alt and fas fa-spinner) add visual polish to the submit button and loading indicator.

These libraries work together to create a professional-looking article generator interface with minimal coding effort – perfect for developers who want clean, responsive designs without extensive CSS knowledge.

From there if we need to add custom CSS, we can.

The Power of Chain Prompting

The most fascinating aspect of this project was implementing “chain prompting” – a technique where multiple AI operations are strung together sequentially, with each step building upon the previous one. This approach dramatically improves output quality compared to generating an entire article in a single prompt.

Chain prompting proves effective by decomposing complex tasks into specialized sub-tasks that allow each step to concentrate exclusively on its specific area of expertise. This creates a powerful refinement pipeline where outputs from one prompt are fed as the input to the next prompt, effectively creating a progressive enhancement process at each stage.

The approach leverages the unique strengths of different AI models, combining their capabilities to deliver superior results than any single model or prompt could achieve alone.

Here’s how the chain prompting logic works in the article generator:

try { // Step 1: Generate outlines from both AIs $prompt1 = [ ['role' => 'system', 'content' => 'You are an expert article outliner.'], ['role' => 'user', 'content' => "PROMPT_1"] ]; $outline1 = anthropicAi($prompt1); // Use Claude Sonnet model $outline2 = openAi($prompt1); // Use ChatGPT model // Step 2: Combine outlines $prompt2 = [ ['role' => 'system', 'content' => 'You are an expert at synthesizing article outlines.'], ['role' => 'user', 'content' => "PROMPT_2"] ]; $outlineCombined = openAi($prompt2); // Use ChatGPT model // Step 3: Generate SEO keywords $prompt3 = [ ['role' => 'system', 'content' => 'You are an SEO expert.'], ['role' => 'user', 'content' => "PROMPT_3"] ]; $keywords = anthropicAi($prompt3); // Use Claude Sonnet model // Step 4: Write article $prompt4 = [ ['role' => 'system', 'content' => 'You are a professional article writer.'], ['role' => 'user', 'content' => "PROMPT_4"] ]; $article = anthropicAi($prompt4); // Use Claude Sonnet model // Return final article echo json_encode(['article' => $article]); exit;} catch (Exception $e) { http_response_code(500); echo json_encode(['error' => 'Error generating article: ' . $e->getMessage()]); exit;}

Notice how each output from previous steps ($outlineCombined and $keywords) becomes input for this final prompt. The AI isn’t starting from scratch – it’s building upon layers of previous work.

System prompts are foundational to unlocking the full potential of large language models, acting as invisible instruction sets that guide the AI behavior throughout conversations. They establish the AI’s role, expertise, and operational parameters. In a small app like this article generator, extensive system prompts will create guardrails that ensure consistency and quality across every output stage—from outlining and keyword research to final composition.

While the simplified example code shows basic system prompts like “You are an expert article outliner,” to get the most out of your AI models, you want to employ elaborate prompts with detailed guidelines for tone, formatting, and expert knowledge. This behind-the-scenes engineering explains why the same question to different AI implementations produces vastly different results, as the system prompt essentially programs the AI’s personality and capabilities for specific professional tasks.

Combining well written system prompts with chain prompting produces dramatically better results than asking for an entire article in one step. It’s like the difference between having four specialists collaborate on a project versus asking one generalist to handle everything.

The error handling wraps the entire process, ensuring any failures in the chain are gracefully reported back to the user – an essential consideration when working with multiple API calls that could each potentially fail.

Troubleshooting Issues

When working with AI-generated code, you’ll typically receive functional code that works 90% of the time. However, being a first version, it often lacks logistical elements like proper logging and error checking that make future debugging easier.

For example, my code included a function logApi() which existed in my example code from a previously created workout planner form (generate_plan.php), but the AI didn’t place this function anywhere to be used. I had to ask a follow-up question about where to place this function call within the generated code, and I also requested that each AI response be saved in a text file so I could easily reference specific steps like the outline or brainstorming later.

tell me where to add logApi within generate_article.php. I want to log each prompt and response exactly like I did in generate_plan.php. Only tell me where to add the logApi function calls, do not give me full code.

You’ll begin to notice patterns in how AI occasionally omits certain parts of code. For instance, I encountered a recurring issue with my wrapper files for OpenAI and Anthropic. I was using PHP echo statements to save details of each step to an API log file, but this caused errors when running the code from the browser because it was interpreting these log statements as part of the AI response. The solution was to implement the ob_get_clean() function, which effectively clears these extra log statements and returns only the pure AI response.

can you then implement the same error checking and validation before echo'ing the response back via JSON. I specifically need generate_article.php to implement the ob_get_clean() section of the code to clear the buffer since the wrapper files echo other things. include the JSON_THROW_ON_ERROR, too. Do not give me any of the function code, just provide this additional code that you omitted.

Remember that AI is only creating a first pass on the user interface, so you’ll likely need to provide more detailed instructions to achieve your desired appearance. For instance, I had to follow up specifically to get the correct spinner icon which visually indicates that the backend processing is working.

I also encountered authentication issues where the system was retrying hundreds of times rather than gracefully quitting. When testing the original code, I discovered that I needed to build in more validation around these errors as they occurred. This prompted me to request error checking that would terminate the script if authentication failed on any of the API function calls.

I'm realizing that it's working but there is no refresh icon indicating that it's running. Include an icon in the button text to the left of the wording with a font awesome spinning refresh icon. I'm also receiving an authentication error. For instance here's what I see in api.log:Array( [error_type] => authentication_error [error_message] => x-api-key header is required)It looks like it retried hundreds of times, so please build in some type of error checking to just quit the script if authentication fails on any of the API function calls.

This prompt led the AI to create a function handleApiError() which was supposed to quit the app if it encounters this authentication error.

// Add this function near the top with other function definitionsfunction handleApiError($response) { if (is_array($response) && isset($response['error_type'])) { if ($response['error_type'] === 'authentication_error') { http_response_code(401); echo json_encode([ 'error' => 'API Authentication failed. Please check API credentials.', 'details' => $response['error_message'] ?? 'Unknown authentication error' ]); exit; } } return $response;}

However that didn’t work!

I had to go back and forth for about 10 minutes trying to spot where the issue was actually occurring, and it turned out to be within my wrapper file, anthropic.php.

Here were some of my prompts:

This is giving me authorization errors. I tried to fix this by exiting the script upon ONE single authentication error but it's still trying far too many times. This is what's appearing on the console log after the script runs for several minutes (it should quit immediately after the first anthropicAi() if the authentication doesn't work). I also don't understand why the authentication isn't working. I'm setting environment variables in my .htaccess file and using the getenv() in PHP. this works perfectly using the exact same openai.php and anthropic.php files on another project, hosted on the same server just with a different domain. The only difference is one project is on the root domain and the other is in a subfolder. Please fix these problems or give me ideas for what's going on if you are unsure of a solution. Only provide the changed code, no unchanged working code.why are you convinced it's the JS? I think it's PHP.this is the error in my api.log. use your smartness and figure it out:API Error (HTTP 401): authentication_error - x-api-key header is requiredFull response: Array( [type] => error [error] => Array ( [type] => authentication_error [message] => x-api-key header is required ))this makes sense, but what i still don't understand is why maxRetries is set to 3 yet I'm getting 500+ errors in my api.log. am i misunderstanding that use?when are errors passed along via httpcode 200 and when it that httpcode different. im so confused.

Handling such issues is the typical life of a software developer, and it doesn’t come without frustration.

But now you have the ultimate assistant to help you.

Over time, you build your own infrastructure of code and functions to address the various scenarios you encounter. You also want to use these issues as an opportunity to elaborate on your system prompts to avoid it responding similarly with less than ideal answers in the future.

With AI assistance, you can now simply copy and paste error messages and your codebase into a chat, and it will solve the problem 80% of the time. For the remaining 20%, you’ll need to engage in follow-up conversations to diagnose and resolve the issue.

You don’t need to be a coding expert, but when you obtain working code examples based on ideas you clearly articulate, you’ll learn what’s going on within the code much faster.

Once you grasp the fundamentals, you can start asking more technical questions about function names, variables, and the general jargon that surrounds programming to receive even higher quality responses as you guide the AI toward exactly what you want to achieve.

The Age of AI-Accelerated Development

What’s most remarkable about this project is how quickly it came together. Traditional development would have required:

Days of planning the article generation logic.Extensive testing of different prompt strategies.Complex error handling for multiple API endpoints.Custom UI design and implementation.

By leveraging AI throughout the development process, I was able to compress this timeline dramatically.

The AI not only powers the article generator tool itself but also assisted in developing the code, troubleshooting issues, and refining the implementation.

Key TakeawaysAPI Integration Complexity: Working with multiple AI APIs requires careful error handling and retry logic.Prompt Engineering Matters: The quality of results depends heavily on how prompts are structured.Multi-Step Processes Work Better: Breaking complex tasks into sequential steps produces better results.Error Handling Is Critical: Especially when dealing with rate-limited external services.User Experience Simplicity: A focused, single-purpose tool is often more valuable than a complex multi-feature application.Try the Free Article Generator

The AI Article Generator showcases how modern development can leverage artificial intelligence not just as a feature but as the core functionality of an application.

Try the free version to generate your own articles, or purchase the source code to run it on your own server without limitations.

The post I Built an AI Article Generator From Scratch (& Why It Beats ChatGPT) appeared first on Website Profit Course.

Learn how to revolutionize your web design process using AI-generated HTML and CSS code.

This step-by-step guide will show you how to create professional websites efficiently while saving countless hours of development time.

Start with the HTML Structure(PROMPT) Create a skeleton HTML file for a business website homepage that includes a header, a "hero" section, a three-blurb section, and a footer.

Using AI tools like ChatGPT or Claude can dramatically speed up your development time.

Here’s how to make the most of these tools:

The foundation of any great website starts with clean, organized HTML, so we’ll use the prompt above to create a basic skeleton structure that includes:

Header sectionHero areaMain content sections (three blurbs)Footer

This structure provides the perfect canvas for our AI-generated CSS enhancements.

Setting Up Your Development Environment

Before diving into CSS generation, let’s create the basic infrastructure for this mini project:

Text editor (I ❤️ Notepad++)Google Chrome InspectorCreate two files — index.html and styles.css

Here’s a look at the bare HTML file viewed in the browser without any styles applied.

Leveraging AI for CSS Style Generation(PROMPT) Yes for CSS.

After getting my HTML skeleton code from the AI, at the end of its response it said, “Let me know if you’d like CSS or Javascript enhancements.”

This is why the prompt above is so simple.

I replied with a straightforward “Yes for CSS,” and the AI immediately generated a complete CSS stylesheet that perfectly matched my HTML structure.

The generated CSS included everything from global styles, to individualized section styles, along with responsive design rules.

It automatically styled the header and footer and created a gradient hero section, but unfortunately, incorrectly formatted the three-column content area as stacked blurbs.

So we have to follow up… don’t expect perfection on the first try!

Pro Tip — Use a desktop tool like Chatbox to use multiple AI models in one unified interface and create custom roles, for example, my “CSS Formatter” role, which takes existing CSS and makes it match precisely how I want the code to look (see image below).

Testing & Refining CSS via Prompts(PROMPT) Give me 5 CSS options for this HTML element.PASTE_HTML_CODE_HERE

When working with AI-generated CSS, these are my best practices:

I style one block of code at a time and ask for 3-5 optionsCopy & paste each variation using Chrome’s inspector tool to testEnsure proper responsive behaviorCheck for color consistency across sectionsAsk to merge options that you like, describing what to keep from each

You can ask for a snippet of code to style an HTML section or a few fixes with the complete CSS file to ensure you have all the necessary styles and avoid conflicts.

However, this is one area where AI gets confused — ignoring related parts of your code when focusing on a minor problem or inferring things you want to change when you don’t.

If you’re looking to maintain overall consistency, provide full files or even the entire codebase as context before asking to complete a task.

If you have a hyper-specific fix, only provide the minimal necessary code to complete it.

Just be prepared for small issues and use them to write better prompts that avoid the problem in the first place!

Troubleshooting Common AI Chat Issues(PROMPT) All my blurbs are showing in the first column instead of a proper three-column layout that's optimized for mobile. The gray background of the section should be full width to the browser. Rewrite and provide the new full style.css file.# index.htmlPASTE_HTML_CODE_HERE# style.cssPASTE_CSS_CODE_HERE

We had the issue of the three-blurb section being shown stacked in a single column. I tried a few follow-ups with ChatGPT’s free tier, and it didn’t solve the issue. So I decided to switch over to Claude, my preferred AI model for code tasks.

This solved the problem on the first try (which is why I use it more than ChatGPT for most technical tasks)!

When you encounter problems with AI-generated code, here are a few things I like to try:

Start fresh with a new chat session and up-to-date code contextTry different AI models (Claude often excels with code)Be specific about layout requirementsUpload screenshots to show what you’re describing visuallySketch out the basic layout on paper and ask to generate codeAsk AI how you can improve your prompt to get your desired result

The quality of your results is 100% dependent on the quality of your prompt. If you’re not getting what you want, there is an extremely high likelihood you can adjust your prompt and get it working.

AI truly gets you in the mode of a manager handling outsourced employees, and the prompt strategies are like delegating tasks with detailed guidelines.

Time-Saving Tip — Create a library of assets through each AI project you take on. That could mean website templates with standardized, modular HTML & CSS. Or it could be carefully crafted prompts you re-use repeatedly for your most frequent daily tasks.

If you’re interested in learning more about AI and its practical applications, I’ve created a comprehensive collection of AI learning guides that cover everything from basic concepts to cost-saving strategies.

These guides will help you better understand the technology we’re using here while building a stronger foundation in AI overall.

How Does AI Affect Web Design?

We are still very early on the AI innovation curve, and it’s sometimes hard to remember that this is as bad as it’ll ever be.

If you honestly look forward into the future, you can see how creating a website, or even a web app with AI will be as straightforward as describing what you want. The best analogy I heard for this is how high-level coding languages abstracted away the need to understand the hardcore technical assembly language syntax.

The same thing is happening now at the level of human language with LLMs (Large Language Models, like ChatGPT).

Knowledge of HTML, CSS, Javascript, and any other coding language will not be necessary to build amazing websites and apps.

The key is understanding how to effectively communicate with AI models and refining their output to match your specific needs.

The only way to figure that out is to experiment with different AI tools and approaches to find what works best for your workflow!

The post Stop Coding HTML & CSS — Let AI Generate the PERFECT Website! appeared first on Website Profit Course.

Today’s tutorial is going to be one of my favorites because we’re diving into a blend of PHP, HTML, and CSS in a short amount of time. We’ll create a custom WordPress shortcode that displays a block of text, styled to look like an iPhone text message. Here’s a sneak peek of what it will look like when we’re done!

This approach is my favorite way to learn. I never attended a boot camp or took classes for any of these programming languages or WordPress development. My curiosity drove me to figure it out over time through small projects. I believe working on projects fueled by your own ideas is far more rewarding than simply taking a boot camp to add a skill to your resume.

Getting Started with Shortcodes

We’ll accomplish this through the functions.php file within your theme directory. If you’re a developer, you’re likely familiar with this, but if you’re a beginner, you might wonder, “What is that?” Regardless of your experience level, let’s get started on this project.

I’m currently on a WordPress post page, and this is where we’ll begin. The first step in creating a shortcode is to start with plain HTML. Once the HTML and CSS are harmonized, I can convert them into PHP code and include a few options.

Creating the HTML Structure

I want to add a custom HTML block here to paste in the HTML code. It’s simple: a with a class of "imsg" for iMessage. There will also be a second class, "first", to designate the sender of the first message, and a third class called "reply" to determine whether the message appears in blue or gray.

Once I save this, I’ll add custom CSS in the appearance section. I usually do this from the child theme’s style.css file, but there are typically two or three places where you can add custom CSS. For today, I’ll paste this in the additional CSS section. While I won’t dive into it in detail now, I’ll step through some of these CSS styles at the end of our project.

Building the Shortcode

Now, let’s move on to building the shortcode. When I work on custom code like this, I often search for others who have used similar functions or tackled the same goal. I found this helpful website to generate your shortcode template. You fill in your details, and it builds your PHP code to add to the functions.php file.

I’ll start on the shortcode tab. The first step is to fill out the shortcode name we’ll use; I’ll call it "imsg". For the function name, I’ll append "_shortcode" to it, replacing "custom" with "imsg". This site provides examples of both self-closing and enclosing shortcodes, but we want the enclosing type since the content will be the text message.

Next, I’ll select “enclosing” and build in one attribute: whether it’s a reply. If it’s a reply, it’ll be gray; if not, it’ll be blue. Moving on, I’ll define our attributes, naming this one "reply" (all lowercase) and setting its default value to false. Essentially, if the shortcode has the option reply=true, it will use the reply style.

Let’s update this code and grab our skeleton code to work with, pasting it into the functions.php file. You can access the functions.php file from the appearance editor; it’s usually right under the style.css. Scroll down to the bottom, and we’ll add our custom code there.

If you want to read more about how this works, WordPress has a page in their Codex section. If you Google “WordPress shortcode API,” you’ll find it. This resource describes some of the options we’ll cover. I won’t go into a full-length explanation, but it’s a great starting point if you need something specific and aren’t sure where to look.

Understanding the Code

To summarize quickly: we’re providing a function to add a shortcode. This is our custom function, and we use the WordPress function add_shortcode to attach it to the WordPress system, allowing us to use it within posts and pages. There are two arguments: the first is the attributes (the options we define within the shortcode), and the second is the content (what the shortcode wraps around, essentially our text message).

Next, we define our default values. If the reply value isn’t set within the shortcode, it defaults to false. If we want to manually change that to true, we have to do it within the shortcode. I may not be the best at explaining this, so if any experienced developers come across this, feel free to leave a comment with your insights.

Now, we need to add a bit of logic. We have to check the reply option and determine what to do based on that. Checking the reply option will only take a single line of code. I like to comment on each section, so I’ll start with two forward slashes to begin a comment line and write something descriptive as a reminder for later.

I’ll create a variable called $msg_type, which will hold the string of the class we’ll add to the . I’ll use a one-line if-else statement for this. The framework is to put a conditional statement in parentheses, followed by a question mark. If the conditional statement passes (is true), we assign the first value; if it’s false, we assign the second value.

Let’s start with the conditional statement. I’ll use a function that removes links from a string of text: esc_attr. We’ll put our attributes array inside this function. To get the value for the reply option, we’ll use square brackets and single quotes: ['reply']. This gives us the value, either false (the default) or whatever we define it as within the shortcode.

I want to check if this is true. We’ll use two equal signs and look for the string "true" surrounded by quotes. While I could discuss comparisons and logic in PHP in detail, I’ll keep this brief to maintain our pace.

So, if this is true, we add the class "reply". If it’s not, we add the class "first". This line should be complete, and now we need to return our value. If you’re familiar with coding, you know the return function will return a string of code, and we’ll place our variables within that.

I’ll copy the pure HTML code we had earlier and replace the class with our variable. To break this string, I need to add two single quotes. In PHP, opening strings start with a single quote, and within our HTML, we’ll use double quotes for anything inside that. This can be confusing and lead to errors in PHP code, so I’ll add the two quotes to break this up. To concatenate strings in PHP, we use the period operator.

I’ll concatenate the first part of the string with our variable $msg_type, and then concatenate the second part of the string. We also need to replace the hard-coded message with our content in the same way, using two single quotes to break it up.

Let’s save this and head to the post where we currently have the plain HTML code. I’ll replace that with the shortcode. I’ll copy and paste it, removing the block and adding a shortcode block instead. I’ll substitute the HTML with the shortcode and do the same for the closing tag. Since we haven’t set any options yet, the message should appear in blue.

Let’s update this post and see how it looks. If all goes well, we’ll end up with our iPhone-style messages. If something seems off, let’s troubleshoot. Nothing ever goes perfectly! At first glance, I see there’s no space between the classes. I forgot to add that space, so let’s correct that.

Now I’ll add another reply to see both styles in action. I’ll copy this, insert another shortcode element, and paste it in. I’ll place a longer message after filling out the option. I just need to add reply=true with double quotes around that string. Let’s save the page and check it out.

And there you have it! As promised, let me quickly dive into the CSS and explain the different styles I applied without getting too deep into the syntax. There are three main parts to this:

Styling the Containers — We apply CSS properties to either element. We set the position: relative to enable absolute positioning for sub-elements. We adjust the font size, set the font family to a sans-serif font, and tweak the line height, border radius, and padding.Creating the Arrows — The arrows, positioned using CSS, are generated with the ::before and ::after pseudo-elements. These are absolutely positioned with a height and width of 0, and their color is created through borders.Setting Backgrounds and Colors — The code for the first message sets the background to blue and the font color to white. We apply a custom margin to offset it to the right, and the blue arrow is created using borders, while similar styles are used for the reply element with different values.

I’ll include a link below to download all the code. You can copy and paste it into your project!

I hope you found this tutorial valuable! It was a game-changer when I first learned about custom shortcodes, especially since I was really into coding.

If you have skills in building websites and working with WordPress and want to start freelancing to monetize those skills, check out the rest of my blog.

Overall, I’ve found the most success working with local clients. Many small businesses struggle with a weak web presence and need your help. They don’t hire web developers easily; it takes time to build trust. That’s why I recommend focusing on the local aspect—you can converse with them over the phone or even meet in person.

The post How to Create a Custom WordPress Shortcode appeared first on Website Profit Course.