The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →You can build a first JavaScript website as a small static page: HTML supplies the content and structure, CSS controls its appearance, and JavaScript adds one simple interaction. You do not need a framework, a backend, or a paid hosting plan. This walkthrough creates a page, previews it locally, and publishes its files with GitHub Pages.
What you need for a first website
Start with a computer, a text editor, and a browser. You should be comfortable finding and saving files on your operating system. A code editor and more than one browser can be helpful; an online editor such as CodePen is optional for trying small examples, not a requirement for publishing a complete site.
Keep the first project narrow: one page with useful content, a simple visual style, and one visible behavior. MDN’s beginner-oriented Your first website module follows this progression from planning through publishing.
Plan a page before you code
Decide what the page is for and what a visitor should learn or do. For example, a personal introduction might have a heading, a short paragraph, and a button that reveals a greeting. Choose a simple visual direction—such as a light background and one accent color—rather than trying to design a whole application.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match#1 Best Overall
Sketch the content order first. A clear heading and a few concise sections give you something concrete to build and make it easier to tell whether the page is working.
Create the HTML structure
Make a project folder, then create index.html inside it. This filename is the conventional entry point in MDN’s GitHub Pages guidance: it tells the host which page to serve for the site’s main address.
Rank #2
Use HTML for the page’s structure and content. This starter file includes a title for the browser tab, viewport metadata for mobile layout, a link to a stylesheet, and a script loaded with defer:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Website</title>
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/main.js" defer></script>
</head>
<body>
<main>
<h1>Hello, web!</h1>
<p>This is my first website.</p>
<button type="button">Show a greeting</button>
</main>
</body>
</html>The example refers to two files you will create next. Keep the spelling and capitalization of each folder and filename consistent; hosts may treat differently capitalized paths as different files.
Style the page with CSS
Create a folder named styles and save a file inside it as style.css. The <link> element in the HTML connects that file to the page. Add a visible style so you can quickly confirm the connection:
body {
margin: 0;
padding: 3rem 1.25rem;
background: #f3f6fb;
color: #182230;
font: 1rem/1.6 system-ui, sans-serif;
}
main {
max-width: 42rem;
margin: 0 auto;
}
button {
padding: 0.65rem 1rem;
border: 0;
border-radius: 0.4rem;
background: #185adb;
color: white;
font: inherit;
cursor: pointer;
}Open index.html in your browser. If the page appears without the background or spacing, check that the folder is named styles, the file is named style.css, and the path in the href attribute matches.
Rank #4
Add one JavaScript interaction
Create a folder named scripts and add main.js. JavaScript can respond to an event, such as a button click, by changing page content. This example selects the button and paragraph, then updates the paragraph when a visitor clicks:
const button = document.querySelector("button");
const message = document.querySelector("p");
button.addEventListener("click", () => {
message.textContent = "Thanks for visiting my first website!";
});The <script src="scripts/main.js" defer> element connects the external JavaScript file to the HTML. Timing matters: a regular script without defer or async can run before the browser has parsed later page elements. With defer, the browser waits until the document has been parsed before running the script. MDN explains external scripts and their loading behavior in its script element guide; its DOM scripting tutorial demonstrates selecting an element and changing its text.
Preview and debug the local page
Reload the page after each change and test the button. If something fails, check the browser’s developer tools for errors and inspect whether the expected HTML, CSS, and JavaScript files loaded. Developer tools are built into modern browsers and can help diagnose web code; MDN provides an overview in its browser developer tools guide.
- If the style is missing, compare the stylesheet path in
hrefwith the actual folder and filename. - If clicking does nothing, confirm the script path in
src, check the browser console for errors, and verify that the button exists in the HTML. - If you change a file but see the old page, save it and reload the browser tab.
Publish the static files with GitHub Pages
A static site serves files such as HTML, CSS, JavaScript, and images without needing an application backend. GitHub Pages is one documented route for publishing that kind of site. MDN also discusses Netlify as an option for hosting a static site connected to a GitHub repository. The right fit depends on how you want to connect your files, whether you need features such as a custom domain, and whether you are sharing a small experiment or maintaining a full site; hosting choices and interfaces can change.
- Create a repository. Sign in to GitHub, create a repository for the site, and add your project files. You can upload files through GitHub or push them from a local Git setup.
- Check the entry point. Ensure
index.htmlis in the location you intend to publish. If it is in a subfolder, the Pages configuration must point to that folder. - Enable Pages. In the repository, open Settings, then Pages. Choose the publishing source and branch or folder appropriate to your repository, and save the setting. GitHub’s interface may evolve; MDN’s publishing guide and hosting guide explain the process and options.
- Open the published address. Use the URL shown in the repository’s Pages settings. MDN notes that a newly published site may take a few minutes to appear.
Check the live version
Test the public URL as if you were a visitor, not just in your local folder. Confirm that the page opens, the styling is present, and the button still changes the message.
A repository project site may be served below a path rather than at the domain root. If an asset works locally but not online, check its URL: a root-relative path such as /styles/style.css may point to the wrong place for a project subpath. The relative paths in this example—styles/style.css and scripts/main.js—are usually a sensible starting point when those folders sit beside index.html.
When to choose a different publishing route
For a quick, isolated experiment, a browser-based editor such as CodePen can be convenient for creating and sharing a small example. For a complete static site, GitHub Pages and Netlify are options MDN discusses; compare how each connects to your source files and the features you actually need. If the project needs backend services—for example, server-side data processing—the requirements differ from this static first-site setup.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
