Introduction
Creating your first simple webpage is an exciting step in your journey to becoming a web developer. With HTML, CSS, and JavaScript, you can build a fully functional and visually appealing website. In this guide, we will walk you through the process of building your first webpage from scratch.
Step 1: Setting Up Your HTML Structure
HTML (HyperText Markup Language) is the foundation of any webpage. It provides the basic structure and content of the website.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage created using HTML, CSS, and JavaScript.</p>
</body>
</html>Explanation:
✔ The <h1> tag is used for the main heading.
✔ The <p> tag is used for a paragraph of text.
✔ The <title> tag sets the title of the page shown in the browser tab.
Step 2: Adding Style with CSS
CSS (Cascading Style Sheets) makes your webpage look visually appealing. We will add CSS to style the text, background, and layout.
CSS Code:
<style>
body { background-color: #f4f4f9; font-family: Arial, sans-serif; text-align: center; }
h1 { color: #333; }
p { color: #555; }
</style>Explanation:
✔ The background-color changes the page background color.
✔ The font-family makes the text look clean and readable.
✔ The text-align: center centers the content.
Step 3: Adding Interactivity with JavaScript
JavaScript allows you to make your webpage interactive. We will add a button that changes the text when clicked.
JavaScript Code:
<script>
function changeText() {
document.querySelector("h1").innerText = "You Clicked the Button!";
}
</script>Explanation:
✔ The changeText() function changes the heading text when called.
✔ We will add a button to trigger this function.
Complete Code (HTML + CSS + JavaScript):
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<style>
body { background-color: #f4f4f9; font-family: Arial, sans-serif; text-align: center; }
h1 { color: #333; }
p { color: #555; }
button { padding: 10px 20px; margin-top: 20px; }
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage created using HTML, CSS, and JavaScript.</p>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.querySelector("h1").innerText = "You Clicked the Button!";
}
</script>
</body>
</html>Step 4: Saving and Viewing Your Webpage
1️⃣ Save your file as index.html on your desktop.
2️⃣ Double-click the file to open it in your browser.
3️⃣ Click the button to see the JavaScript in action.
Congratulations! 🎉
You have successfully built your first webpage using HTML, CSS, and JavaScript. Keep experimenting, add more styles, and explore JavaScript features to make your webpage more interactive.
Would you like to learn how to make this page mobile-friendly or add animations next? Stay tuned! 🚀
