DEV Community

sophia Mitchell
sophia Mitchell

Posted on

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

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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:

  1. Build the basic HTML structure locally
  2. Give AI one color and ask it to generate the full CSS theme (Prompt #6)
  3. Open an AI chat alongside my code editor for any questions
  4. Ask it to walk me through pushing to GitHub
  5. Deploy to Netlify (or Vercel for React projects)
  6. 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.

Top comments (0)