HTML, CSS, and JavaScript are the three building blocks of
creating a web application. In this article, we will show you how to use these
technologies to create a simple homepage application.
1.
First, let's create the HTML structure for our homepage. Open your
text editor and create a new file. Name the file with a .html extension, for
example, "index.html".
2.
In the file, write the following HTML code to create the basic
structure of the page:
<!DOCTYPE html>
<html>
<head>
<title>My Homepage</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">About</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to My Homepage</h1>
<p>This is a simple homepage
application created with HTML, CSS, and JavaScript.</p>
</main>
<footer>
<p>Copyright © 2022 My
Homepage</p>
</footer>
</body>
</html>
3.
Next, let's add some styles to our page using CSS. Create a new
file and name it "style.css".
4.
In the file, write the following CSS code to style the elements in
the HTML file:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: lightblue;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin: 0 10px;
}
main {
padding: 20px;
}
footer {
background-color: lightgray;
padding: 20px;
text-align: center;
}
5.
Finally, let's add some interactivity to our page using
JavaScript. Create a new file and name it "app.js".
6.
In the file, write the following JavaScript code to add a
responsive navigation bar:
const navToggle = document.querySelector(".toggle");
const navLinks = document.querySelectorAll(".nav-links
li");
navToggle.addEventListener("click", () => {
document.body.classList.toggle("nav-open");
});
navLinks.forEach(link => {
link.addEventListener("click", () => {
document.body.classList.remove("nav-open");
});
});
7.
Finally, link the CSS and JavaScript files in the HTML file:
php
Copy code
<head>
<title>My Homepage</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
...
<script src="app.js"></script>
</body>
