Build Websites with AI: A Beginner's Guide for Mobile Users
Job to be done: Build functional websites from scratch using AI assistance, even with no prior coding experience.
🇳🇬 Ways to use this in Nigeria
Ideas to get you started, adapt to your situation.
- Small business
Set up a simple online menu for your buka or restaurant, allowing customers to view dishes and prices before ordering via WhatsApp.
- Student
Build a basic website to showcase your final year project, academic achievements, and resume for NYSC applications.
- Entrepreneur
Launch a 'coming soon' landing page for your new tech startup idea to capture early email sign-ups and gauge market interest.
What you’ll get
You will learn how to use AI to help you build your own website, even if you have never written code before. This method works by having a conversation with an AI, explaining your idea, and letting the AI generate the code for you, which you can then put online. It’s a way to bring your ideas to life online without needing technical skills.
Tools you need
- AI Chat Tool (freemium): This is where you will talk to the AI, describe your website idea, and get the code.
- Website Hosting (paid): This is like renting space on the internet for your website to live so others can see it.
Steps
- Define your website idea: Think about what you want your website to do. For example, the author wanted a place for people to leave messages for the world, a place to thank people, or a place to send messages to stars.
- Talk to the AI: Open your AI chat tool and start a conversation. Explain your idea clearly. The author’s rule was “first agree, then code.” This means you should discuss and refine your idea with the AI until you both understand it perfectly before asking it to write the code.
- Get the code from the AI: Once the AI understands your idea, ask it to write the code for your website. The author did not share the exact prompts used, but a starting point could be:
I want to build a website where users can leave short messages for the world. It should be like an infinite wall where messages appear, and users can navigate around it like a map. Can you help me write the code for this?You should receive blocks of code from the AI. You might need to ask for specific parts, like the front-end (what users see) and the back-end (how it works behind the scenes). 4. Upload your website files: The author uploaded the code files to their website hosting. The exact steps for this depend on your hosting provider. Usually, you will use a tool provided by your host to upload files, or sometimes an FTP (File Transfer Protocol) client. 5. Test your website: Open your website in a web browser on your phone to see if it works as expected. If something is broken, go back to the AI chat tool and describe the problem. For example, the author had to fix issues with touch screens not responding correctly.
Original source
This workflow is based on the experience of an emergency doctor who, with no prior coding background, built three functional websites using only their phone and AI. They shared their journey on DEV Community, explaining how they collaborated with AI to turn their ideas into live websites.
Notes & variations
- Free-tier alternative: While website hosting usually costs money, some platforms offer very limited free hosting for simple projects, which could be a starting point. For the AI part, free tiers of popular AI chat tools are sufficient for this task.
- Common mistake: Trying to build a very complex website with large files on your phone can cause it to struggle. The author found that splitting data from code helped reduce file size and improve performance.
- Tip for better results: Be very specific and patient when describing your idea to the AI. Break down the website into smaller parts and ask the AI to generate code for each part separately. Discuss any issues clearly and ask for revisions until you are satisfied.