How to build a web page from scratch with no coding

Quick answer

Write your words first, then create a file called index.html in a free text editor, add a basic HTML skeleton, style it with a few lines of CSS, check it in your browser and on your phone, and publish it to GitHub Pages or your own host. A beginner can do it in an evening.

You do not need to learn to code properly to build one simple page. You need to understand about a dozen HTML tags, a handful of CSS rules, and where to put the file so the world can see it. This walk-through gets you from nothing to a live page. It also tells you honestly where a hand-built page stops being enough for a business.

What you need before you start

Step 1: write the page on paper first

Most beginner pages go wrong before the first tag. Decide what the page is for and who it is for, then write the content in plain text: a headline that says what you do and where, two or three short sections, and one clear action such as “Call for a free quote”. Keep phone number, email and opening hours handy. If you write as you code, you end up with a page shaped by what was easy to build rather than by what a customer needs.

Step 2: create the folder and the file

Make a folder on your computer called “website”. Inside it, create a file named exactly index.html. Web servers look for that name first, so it becomes your home page. Put any photos in a sub-folder called “images”, and give them short lower-case names with no spaces, such as van.jpg.

Step 3: add the HTML skeleton

HTML describes what each piece of content is: a heading, a paragraph, a link, an image. Paste this into index.html and replace the words with yours.

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Smith Electrical | Electrician in Derby</title>
  <meta name="description" content="Domestic electrician in Derby. Rewires, consumer units and EV chargers.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Electrician in Derby</h1>
  <p>Rewires, consumer units and EV chargers for homes across Derby.</p>
  <img src="images/van.jpg" alt="Smith Electrical van outside a house in Derby">
  <h2>Services</h2>
  <p>Short description of what you do.</p>
  <a href="tel:+441332000000">Call for a free quote</a>
</body>
</html>

Two lines matter more than they look. The viewport line makes the page scale properly on phones. The title line is what appears in browser tabs and, usually, as the blue headline in Google results. Mozilla’s beginner course, Your first website, explains every tag here in more depth if you want to understand rather than copy.

Step 4: style it with CSS

CSS controls how the page looks. Create a second file in the same folder called style.css and start small:

body { font-family: Arial, sans-serif; max-width: 680px; margin: 0 auto; padding: 20px; line-height: 1.6; color: #222; }
h1 { color: #0b3d91; }
img { max-width: 100%; height: auto; }
a { display: inline-block; background: #0b3d91; color: #fff; padding: 12px 20px; text-decoration: none; border-radius: 6px; }

That gives you a readable column, images that shrink to fit phones, and a button-style link. Use your brand colours in place of the blue. Resist adding animations and fancy fonts until the basics work.

Step 5: preview it and test on a phone

Double-click index.html and it opens in your browser. Edit, save, refresh, repeat. To see the phone view, open your browser’s developer tools and switch on the device toolbar, or simply publish first and check the real page on your own phone. Look for text that is too small, a button that is hard to tap, and images that load slowly. Shrink photos before uploading; a phone photo straight from the camera can be several megabytes, which is far bigger than a web page needs.

Step 6: publish it

A page on your computer is invisible to everyone else. You have two common beginner routes.

• GitHub Pages: free hosting for static pages. GitHub’s guide to creating a GitHub Pages site walks through uploading your files, and you get a web address within minutes.
• Your own web host: upload the files through the host’s file manager or by FTP into the public folder. This is the route if you already pay for hosting with email. Our guide to website hosting costs explains what you get for the money.

To use your own domain, point it at the host by changing its DNS settings. Our guide on connecting a domain to a website covers the records involved.

Step 7: help people find it

Search engines can find a simple page, but they need help. Make sure the title and description say what you do and where, use one H1 heading, add alt text to images, and link to the page from your Google Business Profile and social accounts. Google’s own SEO Starter Guide is the most reliable free primer. Before you announce it, run through a website launch checklist so you do not share a page with a broken phone link.

Where a hand-built page runs out

A single hand-coded page is a brilliant way to learn and a fine stop-gap. It gets harder when you want a contact form that sends to your inbox, several service pages, a gallery you can update without editing code, or a design that looks as good as competitors who paid for theirs. That is usually the moment to compare your options: our guide to one-page versus multi-page websites helps decide the size, and the website cost calculator gives a figure for your situation.

If you would rather have it done properly from day one, our one-page website is £299, designed and built for you, mobile-first. You can see what affects that price in our one-page website cost guide, and every other price is on the pricing page.