Build a one-page website from scratch: proper instructions

A one-page website is a complete small site in one HTML file, with navigation that jumps to sections. Building one from scratch teaches the browser contract: HTML gives meaningful structure, CSS controls presentation and JavaScript is optional behaviour. Begin locally, test in more than one viewport and publish only a version you can restore.

Prerequisites

• A plain-text editor such as VS Code, Notepad or TextEdit configured for plain text.
• A current browser with developer tools.
• An empty folder named one-page-site. Do not work inside a system folder or an unrelated project.
• A clear purpose, audience and contact method. Specific content is more useful than decorative filler.

Create the page

1. Create a file exactly named index.html in the folder. Confirm it is not index.html.txt, because some systems hide file extensions.
2. Save the following small, complete document as UTF-8.

<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alex's Repair Service</title>
<style>
body { max-width: 70ch; margin: 0 auto; padding: 2rem; font: 1rem/1.5 system-ui, sans-serif; }
nav ul { display: flex; gap: 1rem; padding: 0; list-style: none; flex-wrap: wrap; }
section { padding: 2rem 0; border-top: 1px solid #cbd5e1; }
a { color: #075985; }
</style>
</head>
<body>
<header><h1>Alex's Repair Service</h1>
<nav aria-label="Main navigation"><ul>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul></nav></header>
<main>
<section id="services"><h2>Services</h2><p>Practical repairs for everyday devices.</p></section>
<section id="about"><h2>About</h2><p>Local, transparent and appointment-based.</p></section>
<section id="contact"><h2>Contact</h2><p>hello@example.com</p></section>
</main></body></html>

Make the structure work

The doctype requests standards mode. The British English language value helps assistive technology. Character encoding prevents garbled punctuation, and the viewport setting lets mobile browsers use the intended width. Use one h1 for the page subject and h2 for peer sections. Each link fragment must match a section id: #contact points to id="contact".

1. Open index.html by double-clicking it or dragging it into a browser.
2. Click every navigation link. It should reach its matching section. If not, compare the fragment and ID character for character.
3. Narrow the browser window or use device emulation in developer tools. Text should remain readable and the navigation should wrap rather than create horizontal scrolling.
4. Change the title, save, refresh, and confirm the browser-tab title changes. This verifies you are editing the displayed file.
5. Open the browser console and correct red errors before adding features.

Content, assets and accessibility

Replace sample wording with what you offer, who it serves, where it applies and how to contact you. For an email address use a mailto: link; for a telephone number use tel:. HTML alone does not safely send form submissions, so use a reputable hosted form service or a server endpoint with validation and spam protection when a form is required.

Place photographs in an images folder alongside the HTML file, give every informative image useful alternative text and compress photos before upload. Test by moving the whole site folder, which reveals accidental absolute file paths. Keep CSS in the style block until the page works; later you can create styles.css and link it with a stylesheet reference. Add JavaScript only for a real behaviour that native HTML cannot provide.

Publish, check and roll back

1. Make a dated copy of the working folder or create a Git commit after local checks pass.
2. Upload the contents of the folder to a static host so index.html is at the web root. Uploading the parent folder can create an unintended extra URL level.
3. Open the public HTTPS address in a private window. Test all navigation, contact links, images and a narrow mobile viewport. Private browsing helps expose cached-file confusion.
4. If the release is wrong, restore the saved folder or redeploy the previous commit, then test the public URL again.

Common mistakes

• Tags appear as text: the file is plain text or has the wrong extension.

• Styles fail: look for a missing CSS brace or a wrong stylesheet path.

• Works locally but not online: server paths are often case-sensitive, so Logo.jpg differs from logo.jpg.

• Navigation fails: IDs cannot contain spaces and must match exactly.

This delivers a small, responsive and testable site without hiding the fundamentals inside a template.

Practical review before relying on it

Repeat the complete check once after a restart or on a different day. This catches assumptions caused by cached state, a forgotten setting or an incomplete first run. Record the exact version, device or location involved and keep the successful configuration with the project. When something fails, change one condition at a time, repeat the relevant check and note the result. That approach is slower than random adjustment for one attempt, but much faster when the process must be repeated or explained to someone else.

Do not treat a successful screen message as the only evidence. Check the intended output directly, check that the original data or host system is still healthy, and keep a known-good fallback. A small reversible workflow is more valuable than a complicated one that only works once. When the task becomes routine, keep the same final verification rather than assuming automation removes the need to inspect outcomes.