How to Create a Web Page From Scratch

A web page starts with three files working together

A web page is built from three separate files that your browser reads and displays as one thing. HTML is the skeleton — it holds the text, headings, links, and images. CSS is the skin — it controls colors, spacing, fonts, and layout. JavaScript is the muscle — it makes things move, respond to clicks, and change without reloading the page. You do not need all three to start. A page with only HTML will work and display, just without styling or interactivity.

The browser reads these files in order and combines them into what you see on screen. When you visit a website, your browser is downloading these three file types (or variations of them), reading the instructions inside, and rendering the result. Building a web page means writing those instructions yourself.

Key Takeaways

Every web page needs at least an HTML file, which you can create in any plain text editor like Notepad or VS Code.
HTML uses tags like <h1>, <p>, and <a> to tell the browser what each piece of content is.
CSS files control how things look — colors, sizes, spacing — and are linked to your HTML file, not written inside it.
You can test your page by saving the HTML file and opening it directly in your browser without needing a web server.
A text editor like VS Code or Sublime Text is the only tool you need to write code; design software like Photoshop is separate and optional.

Set up a text editor and create your first HTML file

Open a plain text editor. On Windows, Notepad works but is bare-bones. On Mac, TextEdit works if you save as plain text, not rich text. For any system, VS Code (free, from Microsoft) is the standard choice for web developers because it highlights your code in color, shows you errors, and makes typing faster with autocomplete.

Create a new file and type this:

<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello World</h1> <p>This is my first web page.</p> </body> </html>

Save this file with the name index.html in a folder on your computer. The .html extension tells your computer this is a web page file. The folder name does not matter yet, but keeping all your files in one folder makes them easier to find later.

Now open that file in your browser. Right-click the file, choose "Open with", and pick your browser (Chrome, Firefox, Safari, Edge). You will see "Hello World" as a heading and "This is my first web page." as regular text below it. That is your first web page.

Understand the basic HTML tags you will use most

Tags are instructions wrapped in angle brackets. They tell the browser what kind of content comes next. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. Everything between them is that type of content.

Here are the tags you will use constantly:

<h1> through <h6> — headings, with h1 being the largest and most important
<p> — a paragraph of text
<a href="url"> — a link to another page or website
<img src="filename"> — an image file
<ul> and <li> — an unordered (bulleted) list
<ol> and <li> — an ordered (numbered) list
<div> — a container to group content together for styling
<button> — a clickable button

Every HTML file must start with <!DOCTYPE html>, then <html>, then <head> (where you put the page title and links to CSS files), then <body> (where the visible content goes). This structure is the same for every page you make.

Add styling with a CSS file

Create a second file in the same folder. Name it style.css. In this file, type:

body { background-color: lightblue; font-family: Arial, sans-serif; } h1 { color: darkblue; text-align: center; }

Now go back to your HTML file and add one line inside the <head> section, right after <title>:

<link rel="stylesheet" href="style.css">

Save both files and refresh your browser. The page background is now light blue, the heading is dark blue and centered, and the font changed to Arial. The CSS file controls the appearance without changing the HTML structure. This separation makes it straightforward to change how your page looks without touching the content.

Add images and links to make your page functional

To add an image, you need an image file in the same folder as your HTML file. Put a .jpg or .png file there, then add this line to your HTML body:

<img src="myimage.jpg" alt="A description of the image">

Replace "myimage.jpg" with the actual filename. The alt part is text that displays if the image does not load, and it helps people using screen readers understand what the image shows.

To add a link, use the <a> tag:

<a href="https://www.example.com">Click here to visit Example</a>

You can also link to another HTML file in the same folder:

<a href="about.html">About Me</a>

This creates a clickable link that takes visitors to that page. If you create a second HTML file called about.html in the same folder, this link will work when ready.

Test your page and fix common mistakes

The fastest way to test is to save your HTML file, then refresh the browser tab where you opened it. Any changes appear when ready. If something looks wrong, check these common issues first:

Did you save the file? Changes do not appear until you save.
Are your tags closed? Every opening tag like <p> needs a closing tag like </p>.
Is the filename spelled correctly in your links and image tags? If you wrote myimage.jpg but the file is named MyImage.jpg, it will not load.
Did you use straight quotes, not curly quotes? Curly quotes break the code.
Is your CSS file in the same folder as your HTML file? If not, the link will not find it.

Most browsers have a developer tool built in. Right-click on your page and choose "Inspect" or "Inspect Element". A panel opens showing your HTML and CSS side by side, and it highlights errors in red. This tool is invaluable for finding what went wrong.

Publish your page to the web when you are ready

Right now your page only exists on your computer. To make it visible to other people, you need web hosting — a company that runs servers and stores your files. You also need a domain name — the address people type in the browser, like example.com.

Services like Netlify, GitHub Pages, and Vercel offer free hosting for straightforward pages. You upload your HTML and CSS files to them, and they give you a URL. Some services even let you use a custom domain name for a small fee. This is a separate step from building the page itself — you can build and test locally first, then publish later.

For now, focus on building and testing on your own computer. Once you understand how HTML and CSS work together, publishing is straightforward.

Frequently Asked Questions

Do I need special software to write HTML?

No. Any plain text editor works — Notepad, TextEdit, VS Code, or Sublime Text. Avoid word processors like Microsoft Word because they add hidden formatting that breaks HTML. VS Code is free and widely used by developers because it catches errors and helps with typing.

Can I use Photoshop or Figma to design my page?

Those tools are for designing how the page should look visually. You still have to write the HTML and CSS code yourself to make the design real in a browser. Many developers design in Figma first, then code it, but the design tool does not generate the code for you.

What if I want a page with a database or user accounts?

HTML and CSS alone cannot store data or log users in. You need a backend language like Python, Node.js, or PHP running on a server. That is a more advanced topic. Start with static HTML pages first, then learn backend languages once you are comfortable with the basics.

How do I make my page mobile-friendly?

Add this line to your HTML <head>: <meta name="viewport" content="width=device-width, initial-scale=1">. Then in your CSS, use @media queries to change the layout on smaller screens. This tells the browser to scale the page to fit phone and tablet screens instead of showing a tiny version.

Can I copy code from other websites?

You can read and learn from other websites' code by right-clicking and choosing "View Page Source", but copying and pasting it without understanding what it does is a poor way to learn. Instead, read the code, understand each line, then type it yourself. This builds the skill you actually need.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.