Have you ever wondered how websites are made? Maybe you’ve thought about creating your own but didn’t know where to start. Don’t worry—you’re in the right place!
Building your first web page is easier than you think, and you don’t need to be a coding expert to get started. In this guide, I’ll walk you through five simple steps to create a basic webpage from scratch. By the end, you’ll have a functional webpage with structure, style, and a little bit of interactivity using JavaScript.
So, grab your laptop, open VS Code, and let’s build your first web page!
Step 1: Understanding the Basics of Web Development
Before we dive into coding, let’s break down the three main technologies used in web development:
1. HTML (HyperText Markup Language)
HTML is the skeleton of a web page. It provides the structure and tells the browser what content to display.
🔹 Example elements:
- Headings (<h1> to <h6>) – Titles and subtitles.
- Paragraphs (<p>) – Blocks of text.
- Images (<img>) – Pictures on the page.
- Links (<a>) – Hyperlinks to other pages.
2. CSS (Cascading Style Sheets)
CSS is the makeup of a website. It controls the appearance—colors, fonts, spacing, layout, and more.
🔹 With CSS, you can:
- Change text color and size.
- Add background images.
- Adjust spacing and alignment.
- Make your page look good on different devices (responsive design).
3. JavaScript
JavaScript is the brain of a website. It adds interactivity, like:
- Buttons that do something when clicked.
- Forms that validate user input.
- Animations, slideshows, and more!
Think of HTML as the bones, CSS as the skin, and JavaScript as the muscles—they all work together to bring a webpage to life.
Step 2: Setting Up Your Development Environment
To build a webpage, you need:
1. A Text Editor
A text editor is where you write your code. Some popular choices include:
✅ VS Code (Recommended – Free and powerful)
✅ Sublime Text
✅ Atom
✅ Notepad++ (Simple option)
👉 Download VS Code here: https://code.visualstudio.com/
2. A Web Browser
You need a browser to view your webpage. The best options:
✅ Google Chrome (Recommended)
✅ Firefox
✅ Edge
✅ Safari
3. Creating Your Project Folder and Opening It in VS Code
Now, let’s set up our project folder the right way:
Create a new folder on your desktop and name it something like MyFirstWebpage.
Open VS Code.
On the left sidebar, click on the first icon (Explorer).
Click on “Open Folder” and navigate to your desktop.
Select the MyFirstWebpage folder you just created and click Select Folder.
Once the folder is inside VS Code, it’s time to create your first file!
- Inside VS Code, right-click on the empty space in the Explorer tab (left sidebar).
- Click “New File” and name it index.html.
- Now, let’s add some code!
Step 3: Writing Your First HTML Page
Open index.html in your text editor and add this basic HTML structure:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is my first webpage! I’m learning how to code.</p>
</body>
</html>
How to View Your Webpage in a Browser (Using Live Server)
To see what we’ve done in a browser, we need to install an extension in VS Code called Live Server.
Installing Live Server
Click on the Extensions icon in VS Code (🧩 it’s the 5th icon on the left).
In the search bar, type “Live Server”.
Install the first option by Ritwick Dey.
Once installed, look at the bottom right corner of VS Code—you should see a Go Live button.
Launching Your Web Page
- Click Go Live.
- Your default browser will open automatically, showing your first web page! 🎉
Why Use Live Server?
✅ Automatically refreshes your webpage when you save changes.
✅ No need to manually open the file in your browser each time.
✅ Saves time and makes development easier!
Other Useful VS Code Extensions
VS Code has tons of helpful extensions that make web development easier. Here are some you should install:
🔹 Prettier – Automatically formats your code for better readability.
🔹 ESLint – Helps detect and fix JavaScript errors.
🔹 HTML CSS Support – Provides better suggestions for HTML and CSS.
🔹 Auto Rename Tag – Renames paired HTML tags automatically.
🔹 Bracket Pair Colorizer – Colors matching brackets for better readability.
Step 4: Adding Some Style with CSS
Your page looks plain, right? Let’s make it more visually appealing using CSS.
1. Create a CSS File
- Inside your project folder, create a new file called style.css.
- Add this code:
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
h1 {
color: #3498db;
}
p {
font-size: 18px;
}
But just creating a CSS File and writing CSS code wouldn’t bring about the changes we want, we need to link our new CSS file with our HTML file
2. Link the CSS to Your HTML
Modify your index.html file by adding this inside the <head> tag:
<link rel=”stylesheet” href=”style.css”>
Now, refresh your webpage, and you’ll see:
✅ A new background color
✅ Stylish heading and text
✅ Better font and alignment
Your webpage is looking better already! 🎨
Step 5: Adding Interactivity with JavaScript
Let’s make your page interactive. We’ll add a button that changes the text color when clicked.
1. Add a Button to Your HTML
Inside <body>, add this:
<button onclick=”changeColor()”>Click Me!</button>
After adding some styling to the button, like background-color, padding, color e,t,c
We now have this
2. Create a JavaScript File
Inside your project folder, create a new file called script.js.
- Add this code:
function changeColor() {
document.body.style.backgroundColor = “#ffcc00”;
}
Just creating a Javascript file and writing a Javascript code are just one of the steps, we also need to link the JavaScript file with our HTML
3. Link JavaScript to HTML
Modify your index.html file by adding this inside the <body> tag before closing it:
<script src=”script.js”></script>
Test It!
- Refresh your webpage.
- Click the “Click Me!” button.
- Watch the background color change to yellow! 🎉
Conclusion
You’ve just created your first webpage with HTML, CSS, and JavaScript! 🚀
In this guide, we covered:
✔️ Setting up VS Code and installing Live Server
✔️ Writing HTML for structure
✔️ Adding CSS for styling
✔️ Using JavaScript for interactivity
The best way to become a web developer is to keep practicing. Start small, build projects, and have fun with coding!
Want to take your web development skills to the next level?
Odurinde.com, the online training experts, will be launching their Web Development Program soon! If you’re serious about becoming the best web developer you can be, message us at Odurinde.com and start your journey today!
Google