A web page starts with three files working together

A web page is built from three separate files that your browser reads and combines into what you see on screen. HTML is the file that holds the words, images, and links — the actual content. CSS is a second file that controls how that content looks: colors, spacing, fonts, layout. JavaScript is a third file that makes things respond when you click them or scroll — it adds interactivity. You do not need all three for every page, but most real websites use all of them.

To create a web page, you write these files as plain text in a code editor, save them with the right file names, and then open the HTML file in your browser. The browser reads the HTML, finds the CSS and JavaScript files it refers to, and displays the result. That is the entire process. You do not need special software or a server running on your computer — just a text editor and a browser.

Key Takeaways

  • HTML files contain the content and structure of a page, CSS files control the appearance, and JavaScript files add interactivity — you write all three as plain text.
  • A code editor like Visual Studio Code, Notepad++, or even the plain text editor that came with your computer will save your files in the right format.
  • You test your page by opening the HTML file directly in your browser — no server or special tools required to see your work as you build it.
  • File names and folder organization matter: your HTML file must correctly point to where your CSS and JavaScript files are located, or the browser cannot find them.
  • The browser's developer tools let you see what went wrong if something does not display correctly, without needing to guess or start over.

Setting up a code editor and creating your first HTML file

Open a code editor — a program designed to write code with helpful features like color-coding and line numbers. Visual Studio Code is free and widely used; Notepad++ is another free option; even the plain Notepad that comes with Windows works, though it lacks helpful features. On Mac, TextEdit works if you save as plain text, or read a free editor like Visual Studio Code.

Create a new file and type basic HTML. The simplest page looks like 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. Then open that file in your browser — right-click it, choose "Open with", and pick your browser. You will see the heading and paragraph displayed on screen.

Adding CSS to control how your page looks

HTML alone is plain and unstyled. To add colors, fonts, spacing, and layout, you create a CSS file. In your code editor, create a new file and type:

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

Save this as style.css in the same folder as your HTML file. Then go back to your HTML file and add one line inside the <head> section, right after <title>:

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

Save the HTML file, refresh your browser, and the page now has a light blue background, the heading is dark blue and centered, and the text uses Arial font. The HTML file tells the browser "go find style.css and use it to style this page." If the browser cannot find style.css — because you named it differently or put it in a different folder — the styling will not appear, but the page will still load.

Making your page interactive with JavaScript

JavaScript lets you respond to clicks, scrolls, and other actions. Create a new file in your editor and type:

document.querySelector('h1').addEventListener('click', function() {   alert('You clicked the heading!'); });

Save this as script.js in the same folder. Then add this line to your HTML file, just before the closing </body> tag:

<script src="script.js"></script>

Save and refresh your browser. Now when you click the heading, a popup appears with your message. JavaScript runs after the page loads and watches for events — clicks, typing, scrolling — then does something in response. Like CSS, if the file name or location is wrong, the JavaScript will not run.

Organizing files so the browser can find everything

As your page grows, you will have many files: multiple HTML pages, several CSS files, images, JavaScript files. The browser finds them by following the paths you write in your HTML. If you write <link rel="stylesheet" href="style.css">, the browser looks for style.css in the same folder as the HTML file. If you write <link rel="stylesheet" href="css/style.css">, it looks in a subfolder called css.

A typical folder structure looks like this:

my-website/   index.html   about.html   css/     style.css   js/     script.js   images/     logo.png

Then in your HTML, you reference files like this: <link rel="stylesheet" href="css/style.css"> and <script src="js/script.js"></script> and <img src="images/logo.png">. The browser follows the path from the HTML file to find each resource. If a file is missing or the path is wrong, that resource will not load — the page may still display, but without the styling, interactivity, or image.

Testing your page and finding errors with developer tools

Open your page in your browser and press F12 (or right-click and choose "Inspect"). The developer tools panel opens at the bottom or side of the screen. The Console tab shows errors — if a file is missing or JavaScript has a typo, you will see a message here. The Elements or Inspector tab shows the HTML structure and lets you see what CSS is applied to each element.

If your page does not look right, check the Console first. A message like "Failed to load resource: style.css" means the browser could not find your CSS file — check the file name and folder path. If JavaScript is not working, look for error messages that tell you which line has the problem. The developer tools also let you temporarily change CSS or HTML to test ideas without editing your files — useful for figuring out what you want before you save the changes.

Uploading your page to the internet

Right now your page only exists on your computer. To make it visible to others, you need to upload it to a web server — a computer that runs all the time and is connected to the internet. Services like Netlify, GitHub Pages, and Vercel offer free hosting for straightforward pages. You connect your folder of files to one of these services, and they automatically publish your page so anyone can visit it with a web address.

Until you upload, only you can see your page by opening the file on your computer. Once uploaded, the page has a web address like mysite.netlify.app, and anyone with that address can view it. The files themselves stay the same — you still write HTML, CSS, and JavaScript the same way — but now they live on a server instead of your computer.

Frequently Asked Questions

Do I need to learn HTML, CSS, and JavaScript all at once?

No. Start with HTML to understand structure and content. Then add CSS to learn styling. JavaScript is the hardest and can wait until you are comfortable with the first two. Many straightforward pages use only HTML and CSS.

What if I make a mistake in my code?

The browser will usually still load the page, but parts may not display or work correctly. Check the developer tools Console for error messages that point you to the problem. Most mistakes are typos in file names, missing closing tags, or incorrect file paths.

Can I use a website builder instead of writing code?

Yes. Tools like Wix, Squarespace, and WordPress let you build pages by dragging elements around instead of writing code. They are easier to start with but give you less control over how the page works. Learning to code gives you more flexibility later.

How do I add images to my page?

Save the image file in your project folder, then add this line to your HTML where you want the image: <img src="images/myimage.png" alt="description">. Replace "images/myimage.png" with the correct path and file name.

What happens if someone visits my page on their phone?

The page displays, but it may be hard to read if you did not design it for small screens. CSS has features called media queries that let you change the layout for phones, tablets, and computers. This is called responsive design and is important for real websites.