1. Define the job before asking for code
Start with a one-sentence purpose: who the site serves and what a visitor should be able to do. A portfolio might help a hiring manager review projects and contact you; a local business site might explain services and collect enquiries. Choose one primary action, such as booking, buying, or requesting a quote. This keeps an AI-generated design from becoming a collection of attractive but unrelated sections.
Write down your audience, key pages, essential content, and any practical constraints. For example, note whether you already have a domain, brand colours, product photos, or a form destination. Ask ChatGPT to turn these notes into a sitemap and a short list of questions you have not answered. Correct the plan before moving on; generated assumptions are not requirements.
- A useful first brief includes the audience and purpose, stated in plain language.
- Name the main visitor action and how success will be recognized.
- List required pages, content, and accessibility needs.
- Include your preferred tools, budget limits, and launch deadline.
2. Choose a build path and prepare the project
Select the simplest technology that meets the brief. A no-code builder can suit a small site that changes rarely. React is useful when the interface needs reusable components or custom interaction, while a server and database are appropriate when visitors must create accounts or manage stored records. Avoid adding a backend merely because an AI suggested one. Every extra service brings configuration, security, and maintenance work.
If you are coding, create a local project using the current setup instructions for your chosen framework. Use a terminal and editor you understand, and ask ChatGPT to explain each command before running unfamiliar commands. Keep source code in version control and save a clean starting point. Never paste passwords, private customer records, API keys, or other secrets into a prompt or public repository.
3. Build one small, verifiable step at a time
Give the assistant focused requests. Instead of asking it to build an entire business site in one response, request a page outline, then a responsive header, then one section at a time. Include the relevant files, framework, visual constraints, and expected behavior. Ask it to state which files should change and how you can verify the result. Smaller changes are easier to inspect, understand, and undo.
Run the site after each meaningful change. Check that links go somewhere intentional, images load, forms give clear feedback, and layout works at narrow and wide widths. If code fails, share the specific error and the smallest relevant excerpt rather than repeatedly asking for a full rewrite. Read the proposed fix: generated code can use nonexistent packages, outdated APIs, or unsafe shortcuts.
4. Supply real content and review accessibility
Replace invented copy, sample addresses, and placeholder imagery before launch. Make headings describe their sections, keep sentences direct, and explain what the visitor gains. Use images you own or have permission to use, with alternative text that conveys their purpose. Do not publish fabricated reviews, credentials, statistics, or claims just because a draft sounds persuasive.
Test the site without a mouse by moving through controls with the keyboard. Check that focus is visible, labels are connected to form fields, colour contrast is readable, and interactive controls have understandable names. Ask ChatGPT to suggest an accessibility review checklist, then verify each item in the browser. Automated suggestions do not replace testing with assistive technology or feedback from users.
5. Test the complete visitor journey
Test the outcome that matters, not just the initial screen. Submit forms with valid and invalid values, inspect confirmation and error messages, and confirm that the information reaches the intended destination. Check every navigation link, the page title, and the mobile menu. If the site handles payments or personal information, use the provider’s test mode and review its security and privacy guidance before handling real data.
Ask someone unfamiliar with the project to complete the primary task. Observe where they pause rather than explaining the interface. Their confusion is useful evidence: improve labels and page order before adding decoration. Keep a small checklist of issues, fix the highest-impact ones, and repeat the journey after changes.
6. Publish carefully and keep improving
Choose hosting that matches the project. Static sites can often be deployed from a Git repository through a frontend hosting provider; sites needing a server require a suitable application host and configured environment variables. Connect a domain only after confirming the hosting instructions, and avoid putting private keys in client-side code. Preview the deployment before sharing it widely.
After launch, check the live site on a phone, test the main action again, and confirm that the domain uses HTTPS. Keep dependencies and backups in mind, and note who is responsible for maintenance. Gather genuine visitor questions and improve the page based on them. If you want guided practice, review the learning options on /course, or use the /demo page to explore a course demonstration.