Building Web Pages Locally: A Beginner Workflow

Building a webpage locally means creating and testing it on your own computer before uploading it to a web server. It is a safe way to practise, make mistakes, and check that your HTML, CSS, and JavaScript work together.

Playcode123.com provides the core lessons and online practice tools. Review the HTML explanation, CSS explanation, and JavaScript explanation before building this local project.

What you need

  • A text or code editor, such as Notepad or Visual Studio Code.
  • A web browser.
  • A folder where you can keep the project files together.

You do not need a web server for this beginner exercise.

Create the project folder

Create a folder named my-first-website. Inside it, create three files:

my-first-website/
├── index.html
├── style.css
└── script.js

Check that the extensions are correct. Windows may hide known extensions, which can accidentally produce a filename such as index.html.txt.

Step 1: create index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Local Website</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main>
    <h1>My local webpage</h1>
    <p id="message">The HTML file works.</p>
    <button id="testButton">Test JavaScript</button>
  </main>
</body>
</html>

Step 2: create style.css

body {
  font-family: Arial, sans-serif;
  background-color: #eef4fa;
  color: #1d2a38;
}

main {
  max-width: 640px;
  margin: 60px auto;
  padding: 32px;
  background-color: white;
  border-radius: 12px;
}

Step 3: create script.js

const button = document.getElementById("testButton");
const message = document.getElementById("message");

button.addEventListener("click", function () {
  message.textContent = "The JavaScript file works too.";
});

Open and test the webpage

Save all three files. Double-click index.html, or right-click it and choose your browser. The address bar will normally begin with file:///; this shows that the browser opened a local file.

Expected result

You should see a centered white panel on a light background. Clicking the button changes the paragraph. This confirms that the HTML, CSS, and JavaScript files are connected.

A simple editing routine

  1. Edit one small part of a file.
  2. Save the file.
  3. Refresh the browser.
  4. Check the result and the browser console.
  5. Undo or correct the change if it does not work.

Common mistakes

  • Opening a different copy of index.html than the one being edited.
  • Forgetting to save before refreshing.
  • Using mismatched filenames or capitalization.
  • Separating connected files into unrelated folders.
  • Editing a rich-text document instead of a plain-text code file.
  • Expecting features that require a server to work from a file:/// address.

Exercise

Add a second paragraph, change the background color, and make the button display a different message. Close the browser, reopen index.html, and confirm that your saved changes remain.

Final checklist: all files are in the intended folder, their extensions are visible, every file is saved, and the browser shows the latest version after a refresh.