How to Build a Website in 24 Hours Using Free AI Tools
From inspiration to a live website, using mostly free tools.
You do not need to be a professional developer to build a polished website anymore. With a code editor, an AI coding assistant, GitHub, and free hosting, you can go from a few inspiration screenshots to a working website in a day.
Heads up: most of the tools in this workflow have free options, but free-plan limits and terms can change over time, and a custom domain may cost money.
What you'll need
Plus your own images, copy, logo, and other brand assets if you have them.
Find Website Inspiration
Before you start coding, decide what you actually want the website to look like. Find 2–3 websites you like and take screenshots of specific sections. When you prompt Copilot later, drag the screenshot into the chat so it can see it.
Do not think of this as copying an entire website. Instead, identify the individual ideas you like:
You can combine ideas from multiple references to create something that feels like your own.
Where to find inspiration
Tip: save all your screenshots in one folder so you can easily reference them while building. GoFullPage captures an entire page in one screenshot, and WhatTheFont tells you which font a site is using.
Install VS Code
Download and install Visual Studio Code. VS Code is the editor where your website files will live and where you will work with your AI coding assistant.
Create a new folder for your website and open that folder inside VS Code.
New to coding? Don't worry about understanding every file immediately. Your AI coding assistant can help you create the initial structure and explain what it is doing.
Set Up GitHub Copilot Free
Install GitHub Copilot inside VS Code and sign in with your GitHub account. Copilot has a free tier that gives you AI coding assistance directly inside your editor. Free-plan features and usage limits can change, so check the current plan before starting.
The important part: you can describe what you want in normal language and use AI to help create and modify the code, instead of manually coding every component.
Build the Website With AI
Start with the overall structure first. A simple portfolio might include:
Build one section at a time instead of asking AI to create an enormous website perfectly in one prompt. Once the basic structure exists, use your inspiration screenshots to guide the design.
Then iterate with small, specific requests:
Treat AI like someone sitting beside you while you build. Do not try to write the perfect prompt once.
Build → look at the result → explain what you want changed → repeat.
Tip: use your voice instead of typing everything by hand. It’s way quicker, and when you vibe code, the AI will understand what you mean even if your sentences don’t fully make sense to you. You don’t have to care about grammar or anything. Just talk it through. On Windows press Win + H, on Mac press the Fn key twice, or use a dictation app like Willow Voice.
Add Your Real Content
Once the design is working, replace placeholders with your actual content:
Check every section after adding the real content. Different text lengths and image sizes can change the layout.
Check Desktop and Mobile
Do not assume a website that looks good on your monitor will automatically look good everywhere. Check it on desktop, laptop, tablet, and mobile (in your browser, press F12 and use the device toolbar to preview phone sizes), and ask your AI coding assistant to fix responsive issues.
Push the Website to GitHub
Once the site is working locally, create a GitHub repository for the project and push your website code to it. GitHub gives you a central place to store the code and makes deployment much easier.
If you don't know the Git commands, ask your coding assistant:
Once the repository is online, you are ready to deploy.
Deploy With Vercel
Create a Vercel account and connect it to GitHub. Choose your website repository and deploy it. Vercel can automatically detect many common web frameworks and handle most of the deployment setup for you.
For an appropriate personal/non-commercial project, Vercel’s Hobby tier may let you host the website without a monthly hosting bill. Always check the current plan terms and usage limits.
That's it: after deployment, Vercel gives you a live URL. Your website is now online.
Connect a Custom Domain
You can keep the free Vercel URL, or connect your own domain, like yourname.com. A custom domain makes a portfolio feel much more professional.
Domains usually are not free, so this is one part of the process where you may choose to spend money. If you already own a domain, follow your domain provider’s instructions to connect its DNS settings to your hosting provider.
Final Test
Before sharing the website, go through it like a visitor. Check:
Also ask AI to review the project:
Useful AI Prompts
Copy, replace anything in [BRACKETS], and paste into Copilot.
A Simple 24-Hour Plan
Common Mistakes
1. Asking AI to do everything at once
Build section by section. Smaller changes are easier to review and fix.
2. Blindly accepting every AI change
Always look at what changed and test the result.
3. Copying another website exactly
Use other websites as inspiration for design principles. Create your own content, branding, assets, and final design.
4. Ignoring mobile until the end
Check mobile throughout the build.
5. Adding too many animations
A few good interactions usually look better than movement everywhere.
6. Forgetting the purpose of the website
A beautiful website still needs to clearly communicate who you are, what you do, and what you want the visitor to do next.
7. Not testing links and buttons
Click everything before publishing.
8. Exposing private information
Never commit passwords, API keys, tokens, or other secrets to a public GitHub repository.
Final Checklist
Tick things off as you go.
Keep Iterating
The biggest advantage of AI coding tools is not that you can press one button and instantly get a perfect website. It is that you can describe what you want in normal language, see the result, and keep refining it without needing to manually write every line of code yourself.
Start simple, build one section at a time, and keep iterating until it feels like your website.