How to Create a Web Page From Scratch

Start with a text editor and three basic files

A web page is three files working together: HTML (the structure), CSS (the styling), and JavaScript (the interactivity). You do not need special software. Open Notepad on Windows, TextEdit on Mac, or any plain-text editor, and you can write a web page right now.

Create three separate files in the same folder. Name the first one index.html, the second style.css, and the third script.js. Save them all in one folder on your computer. The HTML file tells the browser what content to show. The CSS file tells it how to style that content. The JavaScript file adds interactive behavior.

Open index.html in your text editor and start with this basic structure:

<!DOCTYPE html><html><head><title>My First Web Page</title><link rel="stylesheet" href="style.css"></head><body><h1>Welcome to My Web Page</h1><p>This is my first web page.</p><script src="script.js"></script></body></html>

Save the file. Now open the index.html file in your web browser by double-clicking it or dragging it into a browser window. You will see your page displayed.

Key Takeaways

HTML provides the structure and content, CSS controls the appearance, and JavaScript adds interactive features — all three work together in a single web page.
You can write a web page in any plain-text editor like Notepad, and view it when ready by opening the HTML file in your browser.
The HTML file must link to the CSS and JavaScript files using the correct file paths, or the styling and interactivity will not load.
HTML uses tags like <h1>, <p>, and <div> to organize content, and every opening tag needs a closing tag.
CSS selectors target HTML elements by tag name, class, or ID, then explore visual rules like color, size, and spacing.

Write the HTML structure with tags

HTML is a system of tags that tell the browser what each piece of content is. A tag is a word wrapped in angle brackets, like <p> for a paragraph or <h1> for a heading. Every opening tag needs a closing tag with a forward slash, like </p>.

The most common tags are: <h1> through <h6> for headings (h1 is the largest), <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for lists, and <div> for containers that group other elements. Add these to your index.html file between the <body> tags:

<h1>My Web Page</h1><p>This is a paragraph of text.</p><a href="https://example.com">This is a link</a><img src="image.jpg" alt="A description of the image"><ul><li>Item one</li><li>Item two</li></ul>

Save the file and refresh your browser to see the changes. The link will be clickable, the image will display if the file exists in the same folder, and the list will appear as bullet points.

Add styling with CSS

CSS controls how your page looks. Open your style.css file and write rules that target HTML elements. A CSS rule has a selector (the element you want to style) and properties (what you want to change).

Here is an example that changes the color and size of your heading:

h1 {color: blue;font-size: 48px;text-align: center;}

This rule targets every <h1> tag on the page and makes the text blue, 48 pixels tall, and centered. You can also target elements by class or ID. Add a class to an HTML element like this: <p class="highlight">This text is highlighted</p>. Then in your CSS, target it with a period:

.highlight {background-color: yellow;padding: 10px;}

Common CSS properties include color (text color), background-color (background), font-size (text size), margin (space outside), padding (space inside), and width and height (dimensions). Save your CSS file and refresh the browser to see the styling applied.

Add interactivity with JavaScript

JavaScript lets your page respond to user actions like clicks and typing. Open your script.js file and write a straightforward function that runs when the page loads or when a user clicks something.

Here is an example that shows an alert when the page loads:

document.addEventListener('DOMContentLoaded', function() {alert('Welcome to my web page!');});

This code waits for the page to fully load, then displays a pop-up message. You can also add a button to your HTML and make it do something when clicked. Add this to your HTML: <button id="myButton">Click me</button>. Then add this to your JavaScript:

document.getElementById('myButton').addEventListener('click', function() {alert('You clicked the button!');});

Save both files and refresh the browser. The button will now show an alert when you click it. JavaScript can also change text, hide or show elements, send data to a server, and much more.

Test your page in different browsers

Your page may look or behave differently in Chrome, Firefox, Safari, and Edge. Open your index.html file in each browser on your computer to see how it appears. Check that links work, images display, and buttons respond to clicks.

Use your browser's developer tools to find problems. Right-click on your page and select "Inspect" or "Inspect Element". The Elements tab shows your HTML structure. The Console tab shows error messages if something is broken. The Styles tab shows which CSS rules are applied to each element.

If a style is not showing up, the CSS file may not be linked correctly. Check that the <link> tag in your HTML points to the right file path. If JavaScript is not working, check the Console for error messages. Common mistakes include misspelling element IDs or forgetting quotes around text strings.

Upload your page to the web

To make your page visible to others on the internet, you need a web host — a company that runs servers and stores your files. Popular hosts include Bluehost, GoDaddy, Namecheap, and GitHub Pages. Many hosts offer free or low-cost plans for beginners.

Once you have hosting, you will receive login details and instructions for uploading files. Most hosts provide an FTP client or a file manager in your account dashboard. Upload your index.html, style.css, and script.js files to the server. Make sure index.html is in the root folder (the main directory) so the browser can find it when someone visits your domain.

If you use GitHub Pages, you can upload your files to a GitHub repository instead. GitHub will host your page for free at username.github.io/repository-name. This is a good option if you are learning to code and want to practice version control at the same time.

Organize larger pages with folders and multiple files

As your page grows, keeping everything in one folder becomes messy. Create subfolders for images, CSS files, and JavaScript files. For example, put all images in a folder called "images" and all CSS files in a folder called "css".

When you link to files in subfolders, update the file path in your HTML. If your image is in the images folder, use <img src="images/photo.jpg">. If your CSS is in a css folder, use <link rel="stylesheet" href="css/style.css">. This keeps your project organized and makes it easier to find things as your page grows.

You can also split your HTML into multiple files. Create a header.html file with your navigation, a footer.html file with copyright information, and a main.html file with your content. Some hosting platforms and frameworks let you include one file inside another, so you do not have to repeat the same code on every page.

Frequently Asked Questions

Do I need to know how to code to create a web page?

No, but learning basic HTML, CSS, and JavaScript makes it much easier. HTML is not programming — it is just labeling content with tags. CSS is rules about how things look. JavaScript is where actual programming happens, but you can create a functional page with just HTML and CSS.

What is the difference between a web page and a website?

A web page is a single document that displays in a browser. A website is a collection of web pages linked together. Your first page will be a single web page. To make a website, you create multiple pages and link them with navigation menus.

Can I create a web page on my phone or tablet?

You can write the code on a phone using a text editor app, but it is much harder than using a computer. Most developers use a desktop or laptop with a proper text editor and a large screen. If you want to try on mobile, apps like Dcoder or Replit let you write and preview code in a browser.

Why does my page look different in different browsers?

Browsers interpret CSS and JavaScript slightly differently. Some older browsers do not support newer CSS features. Test your page in multiple browsers and use CSS that works across all of them. Tools like Can I Use show which browsers support each CSS feature.

How do I add a database to my web page?

HTML, CSS, and JavaScript alone cannot store data permanently. You need a backend language like PHP, Python, or Node.js running on a server, plus a database like MySQL or PostgreSQL. This is more advanced and requires hosting that supports server-side code, not just static file hosting.

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.