← Back to the starter · Open PDF guide

Starter Page

Your first small launch

Version 1.0 / English / Vibe Coding Campus

This free kit is a complete, editable one-page design starter. It includes a local palette preview, working section links, expandable questions and an original illustration built with CSS and a small SVG mark.

You need a Windows computer, a modern browser and a plain-text editor. No account, installation or payment is required for the included page.

First steps:

  1. Right-click the ZIP and select Extract All. Open the extracted folder, not the archive.
  2. Make a second copy as your unchanged reference.
  3. Open index.html in a browser. If it opens in an editor, use Open with and choose your browser.
  4. Follow See how it fits together, then try the Violet, Teal and Clay buttons.
  5. Open a question in the FAQ. Select Open the guide to return here.

Check: the page has its colours and illustration, navigation reaches the intended section, palette buttons change the preview and questions expand.

Opening this file is a local preview, not a public website. There is no email collection, AI processing, account system, analytics or payment connection.

Make it your own

File map: index.html holds page sections. styles.css holds layout and colours. brand.js holds the default name, description and palette. page.js connects those values and preview buttons. mark.svg is the original small brand mark.

Open brand.js in a text editor. Change the name inside the quotes to My First Tool. Replace the description with a truthful sentence about your project. Set palette to teal, violet or clay, keeping quotes and commas in place. Save and refresh index.html.

The palette buttons only preview a choice for the current visit. Changing brand.js makes your choice the default when the page is reopened.

For headings and cards, edit their text in index.html without removing surrounding tags. Search for the visible sentence you want to change. Save after each small change and refresh to check it.

There is no contact form in this kit. If you add a contact link, use an address you are authorised to publish and test it. A working contact form needs a separate implementation; a visible form alone does not deliver messages.

You may adapt the template for your own projects or client projects. Do not redistribute or sell the files as a template or template collection. Read USAGE.md for the included scope.

Your turn: change the brand name, description and one feature card. Keep the example claims accurate. Do not add invented reviews, customer counts or results.

Use AI, check and recover

You can edit manually or use your own existing AI coding assistant. The kit does not include credits or a subscription.

Give the assistant this request:

Inspect this copied landing-page starter. Propose a plan to rename it to My First Tool, use the existing teal palette and rewrite one feature card using the facts I provide. Do not edit until I approve. Preserve section links, palette controls, keyboard access and the narrow-screen layout. Do not add services, dependencies, forms or external requests. Afterwards list changed files and checks I can perform.

Final check: open the page at a wide and narrow window width. Read every changed sentence. Press Tab through navigation, palette buttons and FAQ headings. Use Enter to activate them. Refresh and confirm your default palette. Open guide.html and verify the return link.

If styles disappear: keep styles.css beside index.html; extract the complete folder.

If branding stops updating: restore brand.js from your reference copy and try one edit at a time. A missing quote or comma can prevent JavaScript from loading.

If changes do not appear: save the editor file, confirm you opened the same folder and refresh the browser. Check for accidental extensions such as index.html.txt.

Support consists of this guide, the page FAQ and product-defect reporting through the distributor's support channel when available. Personal setup and custom development are not included.

Your finished result: a locally working, rebranded page. Hosting, domain setup and any real product functionality are separate next steps.

← Back to the starter