Go from 0 to 1 website in 30 minutes: A step-by-step DIY guide, in plain English, for $0.
☑️ Starting Checklist
💻 A computer with internet (0 min)
If you’re reading this, you’re already set!
Tip: This is easier on a laptop or desktop. If you’re on a phone, please switch now.
📝 Pen + paper (0 min)
Yes, really. Writing things down helps you think clearly and stay organized.
🤖 An AI helper (5 min)
Sign up for ChatGPT or Google Gemini.
This will write your website’s code for you. No coding knowledge required.
🧪 OneCompiler HTML Editor (1 min - FREE)
This free tool lets you paste code, preview your site instantly, and download it as a file.
☁️ Netlify account (5 min - FREE)
This is where your website will “live” online. Free, fast, and beginner-friendly.
🌐 SquareSpace account (optional, 5 min - NOT FREE: Usually about $20 per year to buy a domain)
If you want your own custom domain like MyCoolSite.com, you’ll buy it here. Otherwise, Netlify gives you a free address ending in “.netlify.app”.
💡 Step 1: Write Your Idea
📝 Write your idea on paper. Example: “A site to share my grandma’s recipes.”
🎯 Decide the purpose. Teaching? Selling? Showing your portfolio? Just for fun?
📐 Sketch a simple layout (boxes and arrows are fine).
📋 List features you want (photos, signup form, shop, menu).
☎️ Now take your idea and pretend you are leaving a voicemail for a web designer — plan out and write down what you would say to them. The clearer you explain, the better AI can build it.
🤖 Step 2: Build it with AI
🤖 Open ChatGPT or Gemini. Copy the starter message below:
📋
“You are an expert website designer who makes beautiful, lovable, user-experience-centered websites. Buttons should hover, colors should come in gradients, there should be a logo at the top left, and a navigation bar at the top with navigation links on the top right. I am going to share with you my website idea and you are going to give me HTML code for my website. Here is what I want you to build:”
✍️ Paste into ChatGPT/Gemini, then add your Step 1 notes after it.
The longer, the better. Some people write 1-2 pages of notes here to get a website specific to their liking.
⚠️ Privacy note: Anything you type into AI is stored by that company. Don’t share passwords or personal info.
🌐 Step 3: Get It Online
📄 Copy your code from ChatGPT/Gemini. Go to OneCompiler.
🧹 Delete the example code. Paste your AI code. Click Run to preview 🎉.
📂 Create a folder on your desktop (call it “MyWebsite”).
💾 On OneCompiler, click the three dots → Download. Save as index.html in your folder. It must be named index.html for it to work.
🌍 Double-click index.html. It opens in your browser. (Only you can see it for now.)
☁️ Log into Netlify. Click “New Project → Deploy Manually.” Drag and drop your folder.
✏️ Rename your site in Netlify settings. Example: “grandmas-recipes.netlify.app”.
🔧 Step 4: Make It Better
👀 Look at your site. Want different colors? Bigger text? More pictures?
🤖 Go back to ChatGPT or Gemini.
Tell it like you’d tell a helper: “Make the text bigger and add a blue background.”
🔄 Copy the new code. Repeat Step 3. Each round makes your site better.
⚙️ Squarespace shows “DNS settings.” Copy Netlify’s DNS instructions into them. (Learn More Here or search "How to Set Up Custom Domain on Netlify" on YouTube or Google)
✅ Wait a few minutes. Refresh. Boom — your Netlify site now works on your custom .com!
🚀 Coming Soon: Next Level
📩 Collect user info — Add a form (like a signup box).
💌 Send newsletters — Email people who join.
💳 Accept payments — Sell things directly.
📢 Sell ad space — Make money from visitors.
📊 Track analytics — See who visits and from where.
