How to create a simple website using HTML, CSS and Javascript
Website is a great identifier for online presence. Making one simple website to a complex website ain’t that hard as most people would think. It’s as simple as 1,2,3 organizing the code and putting everything in place starting with HTML,CSS and Javascript. In this article, I’ll guide on steps to creating a simple web page and provide you with sample code.
Here are the basic steps to create a simple website using HTML, CSS and JavaScript:
- Choose a text editor: You can use a basic text editor like Notepad or a more advanced one like Sublime Text.
- Start with HTML: HTML provides the structure of the website. You can create a basic HTML template with head and body sections and include text, images, and links.
- Add styles with CSS: CSS is used to add styling to your HTML content, such as colors, fonts, and layout. You can write CSS code in a separate file and link it to your HTML file or include it in the head section.
- Make it interactive with JavaScript: JavaScript is used to add interactivity to your website, such as form validation, animations, and dynamic updates. You can write JavaScript code in a separate file and link it to your HTML file or include it in the head or body sections.
- Save your files: Save your HTML, CSS, and JavaScript files with the appropriate file extensions (e.g., .html, .css, .js) and run your HTML file in a browser to see the result.
Here’s an example HTML and CSS code for a basic webpage:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
/*Add CSS styles here*/
body
{
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header
{
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to my Webpage</h1>
</header>
<p>Hello, world! This is my first webpage.</>
</body>
Here’s an example of how you can add JavaScript to the HTML and CSS code for a basic webpage:
Under body add this script code,
<button id=”myButton”>Click Me</button>
<p id=”output”>This is the output</p>
<script>
/* Add JavaScript code here */
const button = document.querySelector(“#myButton”);
const output = document.querySelector(“#output”);
button.addEventListener(“click”, function() {
output.textContent = “Button was clicked!”;
});
</script>
That’s it you’ve already built a web page and you are now a front end developer. Feels good, right? As you practice more, you’ll develop more skills and can build complex websites.
Let me know your experience on the comment section below.
