DEV Community: sophia Mitchell

🤖 How I Used AI to Build and Deploy My First Website — 6 Exact Prompts That Worked

sophia Mitchell — Mon, 06 Jul 2026 03:53:38 +0000

Honest confession: when I first tried to deploy a website, I had no idea what I was doing.

I'd watch a tutorial, copy some commands, something would break, and I'd spend two hours Googling error messages I didn't understand.

Then I started using AI as my coding buddy. Not to build the whole site for me — but to design the frontend, fix my errors, and guide me through deployment step by step.

The result? I went from confused and stuck to having a live, good-looking website in under an hour.

Here are the 6 exact prompts I used. Copy them. They work.

First, understand what AI is actually good at here

AI won't magically deploy your site with one command. But it's incredible at:

Explaining why something isn't working
Writing code you don't know how to write yet
Walking you through steps in plain English
Fixing errors when you paste them in

Think of it as having a patient senior developer sitting next to you — one who never judges you for asking "dumb" questions.

The situation I was in

I had:

A simple website (HTML + CSS + a bit of JavaScript)
A GitHub account
Absolutely no idea how to get it online

Here's exactly how I used AI to get unstuck at every step.

🚀 Prompt #1 — When you don't know where to start

This is the prompt I used when I was staring at my screen with no idea what to do first.

The prompt:

I'm a complete beginner. I have a website built with HTML, CSS, and JavaScript. 
It's saved on my computer. I want to put it online for free so anyone can visit it. 
Can you walk me through the exact steps, one at a time? 
Don't use jargon. Explain it like I'm 12.

Why this works:

Most beginners make the mistake of asking "how do I deploy a website?" — and get a wall of technical text they don't understand. By adding "explain it like I'm 12" and "one at a time", the AI slows down and actually teaches you.

🐙 Prompt #2 — When you need to set up GitHub

If your code isn't on GitHub yet, you'll need this step. GitHub is where you store your code so deployment platforms can access it.

The prompt:

I've never used GitHub before. I have files on my computer that I want to upload to GitHub.
Walk me through:
1. Creating a new repository
2. Uploading my files using GitHub Desktop (not the command line)
Please be specific about what to click and where.

Pro tip: If you're comfortable with the terminal, swap "GitHub Desktop" for "the command line". But for most beginners, GitHub Desktop is way easier — and it's totally fine to ask AI to guide you through the visual interface.

🤔 Prompt #3 — When you're choosing a platform and feel overwhelmed

There are too many options. Vercel, Netlify, GitHub Pages... At this point I just wanted someone to decide for me.

The prompt:

I want to deploy a basic HTML/CSS/JavaScript website for free. 
I'm a beginner and I don't want to deal with complicated settings.
Which platform should I use — Vercel, Netlify, or GitHub Pages?
Give me a one-sentence answer and tell me why.

What I got back: Netlify — because it has drag-and-drop deployment which means I didn't even need to connect GitHub at first. I just dragged my folder onto their website and it was live.

That one answer saved me 30 minutes of research.

🔥 Prompt #4 — When something breaks and you get an error

This is the most important prompt of all. Errors are terrifying when you're a beginner. But with AI, they become solvable in minutes.

The prompt:

I'm trying to deploy my website on Netlify and I got this error:

[paste your exact error message here]

I'm a beginner. What does this error mean in plain English, 
and what's the exact step I should take to fix it?

The key: Don't just describe the error — paste the exact error message. The more specific you are, the better the answer you'll get.

I used this prompt three times during my first deployment. Every single time, I had a fix within 2 minutes.

🖼️ Prompt #5 — When your site is live but something looks wrong

My site went live, but the images weren't showing up. Turns out I had a file path issue. Here's how I asked AI to fix it:

The prompt:

My website is live on Netlify but the images aren't showing up. 
They work fine when I open the HTML file on my computer.
Here's my folder structure:

[describe or paste your folder structure]

And here's how I'm referencing the image in my HTML:

[paste your img tag]

What's wrong and how do I fix it?

What I learned: The issue was I was using C:/Users/myname/images/photo.jpg (an absolute path on my computer) instead of ./images/photo.jpg (a relative path that works anywhere). AI explained this in one sentence. Problem solved.

🎨 Prompt #6 — When you want AI to design your entire frontend from one color

This one blew my mind when I first tried it.

I had a working site but it looked terrible — plain white background, default black text, zero personality. I knew nothing about design. I didn't know what colors go together or how to write CSS for buttons and layouts.

First, pick a color you like — I used DevBox Color Converter to find mine. Copy the hex code, then hand it to AI.

The prompt:

I'm building a personal portfolio website. My brand color is #3B82F6 (a medium blue).

Based on this one color, please:
1. Suggest a full color palette (background, text, accent, hover states)
2. Write me the complete CSS variables for this theme
3. Style my navigation bar, hero section, and buttons using these colors
4. Make it look clean and modern — like a real developer portfolio

Here's my current HTML structure:

[paste your HTML here]

What came back: A complete CSS file with variables like --color-primary, --color-bg, --color-text-muted — all derived from my one blue. Plus fully styled components that actually looked professional.

Why this works so well:

AI understands color theory. Give it one hex code and it can calculate complementary colors, figure out contrast ratios for readability, and generate a consistent design system. Things a beginner would spend days learning, AI does in seconds.

You can go even further:

I like the color palette you created. Now:
- Make the background slightly warmer (less pure white)
- Make the buttons have a subtle hover animation
- Add a dark mode version of the same palette

Just keep iterating. Each reply refines it. Within 10 minutes I went from "ugly default styles" to "this actually looks like a real website."

The one rule: always tell AI what feel you want. "Clean and minimal", "bold and dark", "friendly and colorful" — these words change everything.

💡 Bonus prompt — When you want to understand, not just fix

Once your site is live, this is the prompt that turns you from someone who followed steps into someone who actually gets what happened.

The prompt:

Can you explain what just happened when I deployed my website?
What does "deployment" actually mean?
What is Netlify doing behind the scenes?
Keep it simple — I'm a beginner.

Understanding the why is what makes the next deployment 10x faster.

The golden rules for prompting AI about code

After dozens of these conversations, here's what I've learned:

1. Always say you're a beginner
AI adjusts its explanation based on context. "I'm a beginner" gets you plain English. Without it, you might get a technical answer that goes over your head.

2. Paste the exact error, never describe it
"I got an error about files" gives you a generic answer. Pasting the actual error gives you a precise fix.

3. Ask for one step at a time
If you ask "how do I do everything?", you'll get overwhelmed. Ask "what's the first step?" — then keep going from there.

4. Say what you've already tried
"I tried restarting the terminal but it didn't work" saves you from getting the same suggestion again.

5. It's okay to say "I don't understand"
Just reply: "I don't understand step 3. Can you explain it differently?" AI doesn't get frustrated. It'll try again.

What my workflow looks like now

Every time I start a new project, this is my process:

Build the basic HTML structure locally
Give AI one color and ask it to generate the full CSS theme (Prompt #6)
Open an AI chat alongside my code editor for any questions
Ask it to walk me through pushing to GitHub
Deploy to Netlify (or Vercel for React projects)
Paste any errors directly into AI and fix them one by one

The whole thing takes under 30 minutes now. The first time it took me 3 hours — mostly because I was afraid to ask for help.

The real lesson

AI didn't build my website. I did.

AI just meant I never got stuck for more than a few minutes. Instead of giving up when something broke, I had a way to keep moving forward.

That's the whole superpower: not getting stuck.

If you haven't tried using AI as a coding partner yet, start with Prompt #1 right now. You'll be surprised how quickly things start making sense.

🚀 Deploy Your First Website in 30 Minutes — The Absolute Beginner's Guide

sophia Mitchell — Sat, 04 Jul 2026 09:15:55 +0000

Spoiler: it's embarrassingly easy. Nobody told me that.

So I spent three weeks convinced that deploying a website was some dark art reserved for people who wear hoodies and drink cold brew at 2am.

Turns out? It takes 30 minutes. Maybe less.

Here's everything I wish someone had told me.

First, Let's Kill the Jargon (2-minute version)

You'll hear these words everywhere. Here's what they actually mean:

🖥️ Server — A computer in a warehouse somewhere that never turns off. It serves your website to visitors so you don't have to leave your laptop running 24/7.

🏷️ Domain — Your website's street address. Like yourname.com.

📖 DNS — The internet's phonebook. Turns yourname.com into the server's real location.

🔒 HTTPS — That little padlock in your browser. Means the connection is secure. Users trust it. Google rewards it. You want it.

OK. You're ready. Let's build.

Step 1: Make the World's Simplest Website

Create a file. Call it index.html. Paste this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>I exist on the internet now</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #0f172a;
      color: #f8fafc;
      font-family: sans-serif;
      text-align: center;
    }
    h1 { font-size: 3rem; margin-bottom: 0.5rem; }
    p  { color: #94a3b8; font-size: 1.2rem; }
  </style>
</head>
<body>
  <h1>🎉 Holy moly, I'm on the internet!</h1>
  <p>Built from scratch. Deployed myself. Pretty cool, right?</p>
</body>
</html>

That's genuinely it. That file is a website.

Step 2: Put It on GitHub

Think of GitHub as Google Drive — but for code.

Create a free account at github.com
Hit "+" → New repository → name it my-first-site
Drag and drop your index.html right into the browser

No terminal. No git commit. No drama. Just drag, drop, done.

Step 3: Deploy with Vercel ✨ (This Part Feels Like Magic)

Vercel is the tool that takes your GitHub code and puts it on the internet. It's free, it's fast, and it does most of the work for you.

Sign up at vercel.com with your GitHub account
Click "Add New Project"
Pick your my-first-site repo
Click Deploy
Stare at the screen for 30 seconds

BOOM. 🎊 Your site is live.

You'll get a URL like my-first-site.vercel.app — send it to your friends, your mom, your cat. It works for everyone.

And yes — it comes with HTTPS automatically. That padlock? Already there.

Step 4 (Optional but Satisfying): Get a Real Domain

.vercel.app is fine. But yourname.com hits different.

Buy a domain at Porkbun or Namecheap — usually ~$10/year
In Vercel: Settings → Domains → Add your domain
Copy the two DNS records Vercel gives you into your domain registrar
Wait 5–30 minutes

That's it. Custom domain, HTTPS included, zero extra cost.

The 3 Things That Will Trip You Up

Fair warning — these got me:

1. Filename case matters
Index.html and index.html are different files on a server. Use lowercase. Always.

2. DNS feels broken (it's not)
After changing DNS, your domain might not work for a while. This is normal. Grab a coffee. Come back in 20 minutes.

3. Don't put passwords in your code
API keys, database passwords — keep them out of GitHub. Vercel has an "Environment Variables" section in settings. Use it.

The Whole Thing, in One Line

index.html → GitHub → Vercel → yoursite.vercel.app 🚀

That's the entire pipeline. Everything else is just details.

Where to Go From Here

You've got the basics. Now the fun starts:

🎨 Want it to look good? → Learn Tailwind CSS and CSS Tools
⚡ Want it to do stuff? → Add some vanilla JavaScript
🗄️ Need a database? → Supabase has a free tier and great docs
🤖 Want to go further? → Try Next.js — still deployable on Vercel in one click

You Did It

Seriously. You just learned something that intimidates a lot of people — and it took you less time than a Netflix episode.

Drop your site URL in the comments. I genuinely want to see what you built. 👇