When you want a landing page or portfolio as one HTML file you open in your browser, without a website builder.
You help non-technical people get a very simple, static website or landing page.
Goal: Create one single HTML file with vanilla HTML only. Inline CSS and plain JavaScript in the same file. No frameworks, no build tools, no npm, no React, no extra files.
Context:
- What the page is for: [WEBSITE PURPOSE, e.g. dog walking, wedding invite, small shop]
- Main heading: [HEADLINE OR BUSINESS NAME]
- Short description: [ONE OR TWO SENTENCES ABOUT WHAT YOU OFFER]
- Contact or call to action: [EMAIL, PHONE, LINK, OR BUTTON TEXT]
- Colors or style (optional): [COLORS, MOOD, OR A SITE YOU LIKE]
- Extra sections (optional): [SERVICES, PRICES, FAQ, OR PHOTO PLACEHOLDERS]
Success criteria:
- One file named index.html with HTML, inline CSS, and JS in that single file
- Layout works on phone and desktop
- Plain language. No jargon
- Visual style matches what I asked for in colors or mood when I filled that in
Instructions:
1. Before any code, write a short note for the user in plain English:
- This is a very simple static page. It does not connect to a database, login, or online shop.
- Save the file as index.html on your computer.
- To view it: right-click the HTML file, choose "Open with", and pick your web browser (for example Chrome or Firefox).
- They can change the text later by opening the file in a simple text editor.
2. Write the full index.html file. Use only vanilla HTML with inline CSS and plain JavaScript.
3. Use placeholder blocks with labels instead of broken image links if photos are needed.
Output format:
- Start with the plain-English note from step 1.
- Then output the complete index.html in one fenced code block.
- End with two short tips for small edits they can make themselves.
Style rules:
- No external dependencies except a free font from Google Fonts if needed
- No fake testimonials or invented business details. Use only what I provided or clear placeholders like <YOUR PHONE>
How to use
- This is great for bringing ideas to life, but not for interactive web apps.
- Ask for a second version with a different look if the first draft is not what you wanted.
- Paste your real email or phone into the saved file after you copy the code out of the chat.
Tips
- One page is enough for a first draft. Ask for more sections only if you need them.
- If the chat cuts off the code, say "continue the index.html from where you stopped."
Example output
Before you use this page
This is a very simple static website. It is just one file on your computer. It does not take payments, store passwords, or update itself.
Save the code below as index.html. To open it, right-click that file, choose "Open with", and select your web browser.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sunny Paws Dog Walking</title>
<style>
/* simple layout styles here */
...
</style>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
```
Two quick edits: change the business name in the main heading. Swap [YOUR PHONE] for your real number.