Introduction
So you want to learn web development, but you’re not sure where to start? Before you can build websites, you need a development environment—a simple setup on your computer where you can write, run, and test your code.
In this guide, you’ll:
- Install the basic tools every web developer uses
- Create your first project folder
- Write and open a simple web page in your browser
- Add a little style and interactivity with CSS and JavaScript
By the end, you’ll have a working setup and a tiny website you created yourself.
Step 1: Install a Code Editor
A code editor is like a word processor, but for code. It helps you write, read, and organize your files more easily.
A great free option is Visual Studio Code (VS Code).
How to install VS Code
- Go to: https://code.visualstudio.com
- Click Download for your operating system (Windows, macOS, or Linux).
- Run the installer and follow the steps (you can keep the default options).
- When it’s done, open Visual Studio Code.
That’s it—you now have a professional-level code editor.
Try it yourself: Open VS Code and look around. Notice the sidebar (for files), the big area in the middle (for code), and the bottom bar (for messages and tools). You don’t need to understand everything yet—just get comfortable.
Step 2: Create Your First Project Folder
Your website files should live in a single project folder. This folder will contain your HTML, CSS, JavaScript, and images.
Create the folder
- Choose a place on your computer, like the Desktop or Documents.
- Create a new folder named
my-first-website.
Open the folder in VS Code
- Open VS Code.
- Click File → Open Folder (Windows) or File → Open (macOS).
- Select the
my-first-websitefolder and click Open.
Now VS Code is “focused” on your project. You’ll see the folder name in the sidebar.
Step 3: Create Your First HTML File
Web pages are written in HTML (HyperText Markup Language). HTML is used to structure content: headings, paragraphs, images, links, and more.
Make an index.html file
- In VS Code, in the left sidebar, right-click inside your folder.
- Choose New File.
- Name it:
index.html(exactly this, with.htmlat the end).
Now paste this code into 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 First Website</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my very first web page.</p>
</body>
</html>
What this code does
<!DOCTYPE html>tells the browser this is a modern HTML document.<html lang="en">wraps the whole page and says the language is English.<head>contains page settings and the<title>shown in the browser tab.<body>contains everything you actually see on the page.<h1>is a big heading;<p>is a paragraph.
Expected result: When you open this file in a browser, you’ll see a big “Hello, world!” heading and a short sentence under it.
Step 4: Open Your Page in a Browser
Now let’s see your web page for real.
- Open your
my-first-websitefolder in your file explorer (Finder on Mac, Explorer on Windows). - Double-click
index.html. - It should open in your default web browser (Chrome, Edge, Firefox, Safari, etc.).
You’ve just created and opened your first web page. That’s a big milestone—well done.
Try it yourself:
Change the text inside the <h1> and <p> tags, save the file, then refresh your browser.
You’ll see your updates instantly.
Step 5: Add Some Style with CSS
HTML gives structure. CSS (Cascading Style Sheets) adds style: colors, fonts, spacing, and layout.
Create a CSS file
- In VS Code, right-click your project folder.
- Click New File.
- Name it:
styles.css.
Add this code inside styles.css:
/* Make the whole page use a simple, clean font */
body {
font-family: Arial, sans-serif;
margin: 40px;
}
/* Style the main heading */
h1 {
color: #2c3e50; /* dark blue */
}
/* Style the paragraph text */
p {
font-size: 18px;
color: #555555; /* gray text */
}
Connect CSS to HTML
We need to tell the HTML file to use styles.css.
In your index.html, inside the <head> section, add this line:
<link rel="stylesheet" href="styles.css" />
Your <head> will now look like this:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Website</title>
<link rel="stylesheet" href="styles.css" />
</head>
Save both files, then refresh your browser.
Expected result: The text now uses a nicer font, the heading is dark blue, and the paragraph is a bit larger and gray.
Try it yourself:
Change color: #2c3e50; in h1 to another color (like red or green) and refresh the page.
You’ve just customized your site’s style.
Step 6: Add Interactivity with JavaScript
JavaScript is the language that makes web pages interactive. You can react to clicks, show messages, and change content on the page.
Create a JavaScript file
- In VS Code, right-click the folder.
- Click New File.
- Name it:
script.js.
Add this code inside script.js:
// This function runs when the button is clicked
function showMessage() {
alert("Thanks for clicking the button!");
}
Connect JavaScript to HTML
At the bottom of your index.html, right before </body>, add:
<button onclick="showMessage()">Click me</button>
<script src="script.js"></script>
Your full <body> might now look like this:
<body>
<h1>Hello, world!</h1>
<p>This is my very first web page.</p>
<!-- A button the user can click -->
<button onclick="showMessage()">Click me</button>
<!-- Load the JavaScript file -->
<script src="script.js"></script>
</body>
What this does
<button>creates a clickable button.onclick="showMessage()"tells the browser to run theshowMessagefunction when the button is clicked.script.jscontains the function, which shows a popup message usingalert(...).
Expected result: Refresh your page. Click the button. You should see a small popup that says: “Thanks for clicking the button!”.
Try it yourself:
Change the message inside alert("...") to something else, like your name or a fun greeting.
Step 7: Use a Simple Local Web Server (Optional but Helpful)
As you build more complex sites, it’s helpful to run your project on a small local server. This is like pretending your computer is a mini web host.
An easy way is to use VS Code’s Live Server extension.
Install Live Server
- In VS Code, click the Extensions icon on the left (it looks like four squares).
- In the search box, type
Live Server. - Click Install on the extension by Ritwick Dey.
Run your site with Live Server
- Open
index.htmlin VS Code. - Right-click anywhere in the file.
- Select Open with Live Server.
Your browser will open at an address like http://127.0.0.1:5500/index.html.
Now when you save your files, the browser will refresh automatically.
This makes experimenting much faster and more fun.
What’s Next? (And Quick Recap)
You’ve just set up a basic but real web development environment:
- Installed a code editor (VS Code)
- Created a project folder
- Wrote an HTML file (
index.html) - Added styling with CSS (
styles.css) - Added interactivity with JavaScript (
script.js) - (Optionally) Ran your site using Live Server
That’s a lot of progress—especially if this is your first time coding. Every small change you make and see in the browser is a real step forward.
Where to go from here
- Add more elements: more headings, paragraphs, or an image using
<img>. - Experiment with CSS: change colors, font sizes, or background colors.
- Play with JavaScript: add another button that changes the text on the page.
Most importantly, keep experimenting. You learn web development by doing—typing code, breaking things, and fixing them. You now have a working environment where you can safely try out ideas and grow your skills, one small win at a time.
