Build your own website

Open your AI chat. Paste this prompt. Answer the five questions in one reply.

Help me plan a one-page personal or project website. I have no coding experience. Interview me with exactly five questions, all in one reply: who I am, what the page is for, which three sections I want, what tone I want, and one colour I like. Wait for my answers before writing code.

A CSV is a plain-text table. Paste one under the prompt only if you want a small table on the page. If you have no file, send the prompt alone.

Paste this into the same chat.

Use my answers to create one complete index.html file. Put all the styling in that same file. Do not use a framework, an external library, or any other file. Make the page readable on a phone. Use clear headings, text that is easy to read against its background, and links that work with the Tab key. Include the three sections I named. Use only facts I gave you. Do not add a contact form. A plain HTML file cannot send form messages. If I paste a CSV under this prompt, add a small table or chart that uses only those values, with the units and a one-sentence summary. If I do not, skip the table and the chart. Return the full HTML in one code block I can save as index.html.

Claude free can show a live preview as an artifact. ChatGPT free shows the code and may offer a Canvas preview. A preview is not a public website yet.

Copy the code only. Leave out the chat text. A backtick is the key just left of 1. Leave out any line that is only backticks. Those lines sit above and below the code.

• Mac: open TextEdit, create a document, then choose Format > Make Plain Text.
• Windows: open Notepad. When saving, choose Save as type: All files.
• Create a folder named my-website. Paste the code and save it inside that folder as index.html.
• If asked, keep .html. Check the name is not index.html.txt.
• Right-click the file, choose Open With, then choose your browser.

I am using [Mac TextEdit / Windows Notepad]. Walk me through saving the HTML you gave me as index.html inside a new folder named my-website, with no .txt ending, then opening that file in my browser. Keep the steps short.

Pick one prompt. Replace each [bracket]. Paste it into the same chat.

360px is about the width of a phone screen.

Change my page colours to [colour] with a light background. Keep the text easy to read against the background. Return the full updated index.html in one code block.

Add a section called [section name] with this text: [your text]. Match the rest of the page. Return the full updated index.html in one code block.

On a phone, this is what looks wrong: [describe what looks wrong, such as text running off the screen]. Fix the layout so it fits a 360px-wide screen with no sideways scrolling. Return the full updated index.html in one code block.

Open index.html in TextEdit or Notepad. Replace all the code with the new code. Save. Refresh the browser.

Netlify Drop publishes a folder as a website. Use this option or step 6, not both.

Open Netlify Drop. Drag your my-website folder onto the drop area. index.html must sit directly inside that folder.

Open the link Netlify shows. It ends in .netlify.app. That address is public.

You can do this with no account for one hour. Within that hour, use the claim or sign-up link and create a free account to keep the site. Stay on the Free plan. See Netlify’s publishing guide.

I put index.html directly inside a folder named my-website and dragged that folder onto Netlify Drop. I see this message: [the message on the page, with no passwords or private details]. Tell me the next click to publish or claim the site on a free account.

A repository is a folder of files on GitHub. Use this option for a free address that does not expire after one hour.

1. Create a free account at GitHub and verify your email.
2. Choose New repository from the + menu.
3. Name it yourname.github.io. Use your GitHub username in place of yourname, with the same spelling. Choose Public. Turn on Add a README file. Choose Create repository.
4. Choose Add file > Upload files. Upload index.html itself, not its folder.
5. Choose Commit changes to save the file on the main branch.
6. Open the repository’s Settings > Pages.
7. Under Build and deployment, choose Deploy from a branch. Select main and /(root). Choose Save.
8. Wait 1 to 2 minutes, then open https://yourname.github.io with your username in place of yourname. If the page is not ready, wait up to 10 minutes and refresh.

I am publishing index.html with GitHub Pages. The repository is public and named yourname.github.io, with my username in place of yourname. I am at this point: [the step I am on, or the message I see]. Tell me the next click. I am a beginner using a free account and the GitHub website only.

If a menu name differs, use the GitHub Pages quickstart.

Open your public link on your phone. Read each section. Tap each link.

On your laptop, press Tab to move through the links. Press Enter to open the outlined link.

An AI check can miss problems. Do the phone and keyboard checks yourself too. Then paste this prompt, with your saved file in the bracket.

Review this HTML for a public one-page site. Check heading order, text that is easy to read against its background, a description on every image, links that work from the keyboard, link text that says where it goes, and a layout that fits a phone. List the three most useful fixes in plain words. If you change anything, return the full corrected index.html in one code block. Here is my HTML: [paste your index.html here]

If you change the file, save it and publish it again.

On Netlify, open your site’s Deploys page and drop the updated folder.

On GitHub, choose Add file, then Upload files. Upload the new index.html and choose Commit changes.

Open the public link again.