One small website.
A much bigger first step.

A useful website helps a particular person take a particular next step. For this lab, your visitor is someone deciding whether to contact you about your work. Your next step is an email enquiry.

Write three sentences before generating code:
1. This website is for [your audience].
2. It will show [three examples of your work].
3. The main action is [contact me by email].

Keep the first version to a heading, a short introduction, three project summaries and a contact link. An AI tool can draft these sections, but only you can confirm that every project and claim is true.

Success check: a friend can tell you what you do and how to contact you after looking at the page for ten seconds.

Open an AI assistant of your choice. You do not need to purchase a specific tool for this lab. Never paste passwords, client data or private documents into your prompt.

Try this brief:
Create an accessible one-page portfolio using only index.html, style.css and script.js. Include a header, an introduction, three project cards and a mailto contact link. Use semantic HTML, visible keyboard focus, responsive CSS and a theme toggle. Do not add a backend, analytics, external libraries, invented clients or working contact-form claims. Explain each file and how to run it locally.

Ask for one change at a time. For example: ‘Make the project grid one column on narrow screens, and explain the CSS rule you changed.’

Treat generated code as a draft. Compare its behavior with the brief instead of judging only how it looks.

Download the starter source files from this page and unzip them into a folder named first-website. Keep the three files together. Double-click index.html to open the website in your browser. No package install or development server is required.

index.html holds the content and structure. style.css controls typography, color, spacing and responsive layout. script.js controls the light/dark theme button.

Open the files in a plain-text code editor. Save a backup before making changes. Refresh the browser after each edit. If styling disappears, check that the stylesheet file name and relative path still match.

This starter has no backend. The contact button opens an email application; it does not save or send a form submission.

Replace the sample name, introduction, project titles and contact email in index.html. The fictional example content is there to teach layout, not to represent real clients or results.

Use one h1 for the main heading. Use h2 for Projects and Contact. Give each project an h3 and a short explanation of the problem, your contribution and what works.

Keep link text specific. ‘Email me about a project’ tells a visitor more than ‘Click here’. A mailto link needs a real email address you are comfortable making public.

If you add an image, describe its purpose in alt text and set its width and height. Decorative images should have an empty alt attribute. Never publish someone else’s private work without permission.

In style.css, change the accent color variable and the maximum content width. Keep the background and text combinations readable. Use the browser’s color tools to check at least 4.5:1 contrast for ordinary text.

Resize the browser to a narrow width. The project grid should become one column and the navigation should remain usable without horizontal scrolling. The starter uses flexible grids and a media query for this.

Use spacing to show relationships: a project title belongs close to its description, while different sections need more space. Avoid shrinking body text to make a layout fit.

Keyboard focus must stay visible. Motion should respond to an action and stop or reduce when the visitor requests reduced motion.

Open script.js. The theme button reads a saved light/dark preference, updates the document theme and changes its accessible label. If browser storage is blocked, the button should still work for the current visit.

Press Tab to reach the button, then activate it with Enter or Space. Confirm that the button text and page appearance agree. Reload and check whether your preference is remembered.

This lab does not add logins, payments or a database. Ask for a separate security and privacy review before adding those features to a real business website.

If an interaction fails, reproduce the smallest case: what you clicked, what you expected and what happened. Share that behavior with your AI assistant without sending personal data.

Run this review before sharing your link:
• Read every claim and replace all fictional details.
• Click every navigation, project and contact link.
• Use only your keyboard to move through the page.
• Check narrow and wide screens at 200% zoom.
• Confirm that text is readable in both themes.
• Open the browser console and investigate errors.
• Ask someone unfamiliar with your work what they understand.

There is no perfect first version. Write down one improvement that will help a visitor and make that change. Keep a copy of the previous working version so you can recover from mistakes.

Choose a static website host you control. Follow its current instructions to publish index.html, style.css and script.js from the same folder. Use HTTPS and check the final public URL in a private browser window. The starter requires no server runtime.

Do not upload API keys, private notes, client files or the contents of your computer. If you connect a custom domain, use the host’s current DNS instructions and wait for its certificate to be ready.

Explain your project in four sentences: who it helps, what it does, what you changed, and what it cannot do yet. Keep your project link and review checklist in your learning notes.

Your next useful build may be a business landing page, a working enquiry backend or a larger portfolio. Choose it from a real need instead of adding features only because AI can generate them.