How to build a simple web page using HTML, CSS, and JavaScript
This guide walks you through building a simple web page using HTML, CSS, and JavaScript in about 30–60 minutes. You'll create a single-page project with structure, style, and interactivity so you can see how the three technologies work together. No frameworks or build tools required — just a text editor and a browser.
Step 1: Create project folder
Make a new folder named my-website on your desktop or in your documents. Keeping files in one folder makes it easy to open them in a browser and to share or zip the project later.
[Illustration: a computer desktop showing a folder named my-website highlighted]
Step 2: Make index.html file
Open a text editor and create index.html with a basic HTML skeleton: doctype, html, head, title, and body. Save after adding a header and a paragraph so you can view content immediately in a browser.
[Illustration: text editor window with a simple HTML skeleton and a visible header element]
Step 3: Add styles.css file
Create styles.css in the same folder and link it from index.html with <link rel="stylesheet">. Add at least 6–10 lines: body font, background color, header color, and a container max-width to make the page readable on 3 device sizes.
[Illustration: styles.css open alongside index.html showing a linked stylesheet and basic CSS rules]
Step 4: Write basic CSS rules
In styles.css define body {font-family: 16px sans-serif; margin: 0; padding: 20px; background:#f7f7f7;} and a .card class with background white, padding 16px, border-radius 8px, and box-shadow. These 5–7 rules improve readability and visual hierarchy.
[Illustration: close-up of CSS rules for body and .card with rounded corners and shadow illustrated]
Step 5: Create script.js file
Add script.js and link it at the end of index.html using a <script src="script.js"></script> tag before </body>. Start with a DOM-ready snippet like document.addEventListener('DOMContentLoaded', ()=>{ console.log('loaded'); }); so your code runs reliably.
[Illustration: script.js file showing a DOMContentLoaded event listener and console.log output in browser devtools]
Step 6: Add interactivity
Inside script.js add a button click handler that toggles a .active class on an element and updates text content. Use 6–10 lines: querySelector, addEventListener('click'), classList.toggle, and textContent change to demonstrate live interaction.
[Illustration: browser showing a web page with a button being clicked and an element changing style or text]
Step 7: Test and refine
Open index.html in a browser, test on desktop and mobile widths (try 320px, 768px, 1024px in devtools), and fix layout or color issues. Spend 15–30 minutes iterating until the page looks and behaves the way you want.
[Illustration: browser devtools showing responsive mode with three width breakpoints and the web page displayed]
- Save files frequently, every 1–2 minutes when making changes so nothing is lost.
- Use a simple text editor like VS Code, Sublime, or Notepad++ with live preview to speed up editing.
- Keep CSS rules specific and limited: start with 10–20 lines and expand as needed to avoid conflicts.
- Name files clearly: index.html, styles.css, script.js to follow conventions and make hosting easier.
- Use the browser console (F12) to debug JavaScript errors; error messages include line numbers and helpful hints.
- Try small, incremental changes: edit one rule or one function and reload to see the effect; it saves time troubleshooting
- Do not include inline JavaScript or CSS during early learning; it can make debugging harder as the page grows.
- Avoid using third-party scripts without reading what they do — they can slow the page or introduce security risks.
- Don’t rely on browser auto-formatters or plugins to fix broken HTML; validate your markup if things render unexpectedly.
- Be careful when testing on real devices: clear the cache or use private mode to ensure you see the latest saved files
Was this guide helpful?
More Computers & Electronics guides
How to set up Git, create a repository, and commit code locally
Setting up Git and committing code locally is a small, reliable skill that pays off immediately. In about 10–20 minutes you can install Git, create a repository, and make your first commits so your work is tracked and easy to manage. Follow these clear steps to get a solid local workflow going.
How to migrate email from one provider to another without losing folders or contacts
Migrating email between providers can feel risky, but with a plan you can preserve folders, labels, and contacts while minimizing downtime. This guide walks you through a careful, step-by-step transfer you can complete in a few hours to a couple days depending on mailbox size. Follow the checklist and you’ll keep structure and address data intact.
How to clean dust and replace a laptop fan to fix overheating and throttling
Overheating and CPU/GPU throttling are often caused by dust buildup or a failing fan. This guide walks you through safely cleaning dust and replacing a laptop fan to restore cooling performance and reduce temperature spikes. Read through all steps, gather basic tools, and work in a well-lit, static-safe area.