13 min · Advanced
Project: Build a Simple Web Page
Build one local page for Hearth & Rye, open it in your browser, and change one detail yourself before you ask for anything more.
Learning objectives
- Request a single HTML file with a plain style block for a bakery page that does not take payment.
- Save the file as index.html and open it by double-clicking, then change one visible detail yourself.
- Check headings, contrast, and button text so a keyboard and a screen reader can use the page.
01
Why this matters
A first page should be small enough that you can see every line and still know what you asked for. Hearth & Rye is a practice shop, not a storefront that takes cards. You will save a file, open it on your own machine, and edit one thing before Gemini edits anything else. That sequence keeps you as the author.
02
Concept
Project one is a single page for Hearth & Rye, a bakery. Include a headline, the hours, a Saturday kids class, and an address placeholder — stand-in text you replace with a real street. There is no online payment. Ask for one HTML file with a style block — CSS placed inside the page rather than in a second file. This course is independent of Google. Check the current screen for the model name before you trust a feature claim.
Save the reply as a file named index.html. Double-click that file. The phrase means you press the file twice so the browser opens it on your computer. You do not need an account, a server, or a fee for this step. If the page looks empty, confirm you saved the whole reply and that the file name ends in html. Keep the address as placeholder text until you decide what you are willing to publish.
Change one thing yourself before the next prompt. Good first edits are the headline color or the class price. Then, if you ask Gemini, ask only for that change. A request to restyle the whole bakery invites a rewrite you may not be able to explain. After the edit, double-click the file again and look with your eyes. The chat is not the page.
Accessibility — a page a keyboard and a screen reader can use — belongs in the first version. A screen reader — software that reads a page aloud — relies on real headings, not big bold text pretending to be a heading. Contrast — a clear difference between text and background — keeps words readable. Button text should say what the button does. Do not paste API keys, and do not add a payment form.
03
Real-world example
What the Hearth & Rye page must contain
The page is a paper sign, not a shop. Headline: Hearth & Rye. Hours: Tuesday to Friday, 7 am to 3 pm. Saturday, 8 am to 2 pm. Sunday, closed. Saturday kids class: 10 am, 12 dollars, pay in person at the counter. Address line: REPLACE WITH STREET ADDRESS. Say plainly that the bakery does not take payment on this page. One file holds the structure and a small style block for color and spacing. Use a real h1 for the bakery name. The class should be a paragraph or a section with a heading, not a fake button that charges a card. When the file is saved, double-click it and read every line against this list before you ask for polish.
04
Gemini demonstration
A realistic exchange. Open Gemini beside this page and try a version with your own facts.
You
Write one HTML file for a bakery called Hearth & Rye. Include a style block in the same file. Content: a headline, hours Tuesday to Friday 7 am to 3 pm, Saturday 8 am to 2 pm, Sunday closed, a Saturday kids class at 10 am for 12 dollars paid in person, and the address text REPLACE WITH STREET ADDRESS. No online payment, no form that takes a card, no second file, and no API key. Use a real h1, readable contrast, and short text. After the code, explain in a short paragraph how I save it as index.html and open it.
Gemini
I would give you one file, not a folder. The h1 reads Hearth & Rye. A style block in the head sets a light background, dark text, and space under headings so contrast stays readable. Hours match your list, including Sunday closed. The kids class is a real h2 plus a paragraph: Saturday at 10 am, 12 dollars, pay in person. The address is the placeholder REPLACE WITH STREET ADDRESS. There is no payment button and no key. Save the file as index.html on your computer. Double-click it and the browser opens that file locally. If you do not see the headline, the save missed part of the file.
You
I changed the headline color myself to a dark brown, and the page still opens. Change only the kids class price from 12 dollars to 15 dollars. Do not rewrite the layout, the hours, or the address line.
Gemini
The only text change is the class price. Where the page said 12 dollars, it should now say 15 dollars. Hours stay as you wrote them. Sunday stays closed. The address stays REPLACE WITH STREET ADDRESS. Your dark brown headline stays, because you made that edit and I was not asked to touch color. There is still no payment control. Save the file again and double-click it. You should see 15 dollars in the class paragraph and nowhere else. If a second price appears, an old sentence survived. Delete that sentence yourself or point me at the exact line. Do not send a key if a later idea involves cards.
05
Prompt breakdown
The prompt
Write one HTML file for a bakery called Hearth & Rye. Include a style block in the same file. Content: a headline, hours Tuesday to Friday 7 am to 3 pm, Saturday 8 am to 2 pm, Sunday closed, a Saturday kids class at 10 am for 12 dollars paid in person, and the address text REPLACE WITH STREET ADDRESS. No online payment, no form that takes a card, no second file, and no API key. Use a real h1, readable contrast, and short text. After the code, explain in a short paragraph how I save it as index.html and open it.
- It asks for one file and a style block, which prevents a pile of files you cannot open.
- Hours, class, price, and the address placeholder are specified, so the page cannot invent a menu or a checkout.
- The bans on payment and keys keep the project local and safe for a beginner.
- A real heading and a short opening explanation make the result something you can run and review.
06
Common mistakes
Usually
Build my bakery brand: site, payments, accounts, and a secret key I pasted below.
Better
Write one HTML file with a style block, hours, a Saturday class, and a placeholder address. No payment, no accounts, and no key.
Usually
I will not open the file. Tell me it works.
Better
Save it as index.html and double-click it. Look at the page, then report what you actually see.
Usually
Restyle everything, add five sections, and change the voice.
Better
I already changed the headline color. Change only the class price. Leave the rest of the file as it is.
07
Practice exercise
Save, open, and edit one line
Done when: The local page shows Hearth & Rye, the hours, the class, a placeholder address, no payment, and one edit you made yourself.
08
Challenge
One accessibility pass, not a rebuild
Duplicate your working page first and leave that copy untouched. On the working copy, replace the address placeholder with a fictional street you invent for practice, or leave the placeholder if you prefer. Ask Gemini for an accessibility check only: real headings, contrast, and button or link text that says what it does. Apply at most one suggested change, and only if you can explain it. Double-click the file and tab through it with the keyboard. If focus never lands on anything useful, say so in a follow-up instead of requesting a new design. Do not add payment, an account, or a key while you are improving access.
Hint: A big bold line is not a heading unless the tag is a heading. Button text should name the action.
09
Key takeaways
- Ask for one HTML file with a style block, specific hours, a class, a placeholder address, and no payment.
- Save it as index.html and double-click to open it in the browser on your machine.
- Change one thing yourself, then ask Gemini only for that change if you need help.
- Accessibility means real headings, readable contrast, and control text that says what it does.
10