Level 8 · 3 to 5 hours

Build a simple website

You will build a simple one-page website as one HTML file, with any styling and script kept inside that same file. Gemini may explain the page, draft a structure, and help you read an error. You will not paste API keys, passwords, or private customer data into the chat or into the file. You must change one part yourself, such as the heading, a paragraph, or a color, so the page is not an untouched paste. Keep a working copy that opens in your browser before you ask for another change. If a later edit breaks the page, return to that working copy and try again with a smaller edit.

Outcomes

One HTML file that opens in a browser and does not call a service with an API key.
A visible change you made yourself, so the page is not an untouched paste.
A saved working copy plus a short note on one error you read and fixed or rolled back.

Steps

1. Describe the page before any code
Write who the page is for, the one job it does, and the sections you want, such as a heading and a short explanation. Say that the result must be one HTML file with no API keys and no external secret. Decide the words you will rewrite yourself. A clear brief keeps the model from inventing a large application you cannot run or explain.
2. Generate one file and open it
Ask for a single HTML file you can save and open locally. Refuse extra frameworks, hidden keys, and instructions to paste a credential. Save the file, open it in your browser, and confirm the heading and the main text appear. That file is your first working copy. Do not request a second feature until this copy opens. If it does not open, you are still on this step.
3. Change one part yourself
Before any further help, change one part yourself: the heading, a sentence, or a color. Save and reload. You should be able to point to the edit and explain it in plain words. This step is the difference between pasting a demo and building a page. If you do not know what your edit did, read that piece with Gemini, then change it again in your own editor.
4. Make one improvement from a working copy
Copy the working file to a safe name, then ask for one small improvement, such as a clearer section or a button that shows a message already in the page. Paste the error text only if something breaks, not your passwords and not an API key. Apply one change, reload, and stop. If the page breaks, return to the working copy instead of stacking fixes you cannot see.
5. Write the maintenance note
In a few lines, record how to open the file, what you changed yourself, and what you will not add later, especially API keys and customer lists. Note one error you understood or one rollback you performed. Keep the working copy next to any experiment. The project is complete when someone else could open the file and you could explain the part you edited without reading the chat.

Starter prompts

One HTML file

Create one simple website as a single HTML file I can save and open in a browser. Put any styling and any small script inside that same file. The page needs a heading, a short explanation, and one section I can edit. Audience and purpose: I will paste them. Do not use an API key, a password, a secret token, or a request to an external service that needs a credential. Do not tell me to paste a key. Explain in a short comment at the top what I should change first. Keep the page understandable to a beginner, and do not add a framework.

Fix one error

Help me debug one HTML file. I will paste the error text and only the part of the file that seems involved. Explain the likely cause in plain words, then propose one small change. Do not ask for an API key, a password, or a customer list. Do not rewrite the whole page. Remind me to keep a working copy and to reload after this single change. If my snippet contains a secret, stop and tell me to remove it before you continue. End with how I will know the fix worked when I open the file in the browser.

Checklist

The site is one HTML file and opens in my browser.
The file contains no API keys, passwords, or private customer data.
I changed one part myself and can point to that edit.
I kept a working copy before asking for a further change.
If an edit broke the page, I returned to the working copy instead of stacking guesses.
A short note explains how to open the file and what I will not add later.

Rubric

The page is one HTML file and loads without an API key.
You changed one visible part yourself and can explain it.
A working copy exists, separate from any broken experiment.
Secrets never entered the chat or the file, and errors were handled one change at a time.