Welcome to the Simple Website Tutorial! This guide will walk you through the steps to create a basic website using HTML, CSS, and JavaScript.
In this tutorial, you'll learn how to create a simple website with an HTML structure, styled with CSS, and interactivity added using JavaScript. By the end of this guide, you will have a basic understanding of how these three technologies work together to create a functional webpage.
Create a project directory and set up the following file structure:
simple-website/
├── index.html
├── styles.css
└── script.js
Open your code editor and create a file named index.html. Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Hello World!
<script src="script.js"></script>
</body>
</html>Create a file named styles.css and add the following code to style your webpage:
body {
font-family: Arial, sans-serif;
}Create a file named script.js
Ensure that the CSS and JavaScript files are linked correctly in your index.html file. The <link> tag for CSS should be inside the <head> section, and the <script> tag for JavaScript should be just before the closing </body> tag.
Open your index.html file in a web browser to see your simple website in action. You should see a styled heading, a paragraph, and a button that displays an alert when clicked.
- Ensure the file paths in the
<link>and<script>tags are correct. - Use proper HTML structure and semantics.
- Keep your CSS organized and use meaningful class names.
- Avoid inline styles and JavaScript as much as possible for better maintainability.
- Test your website in different browsers to ensure compatibility.
If you finish early, feel free to try out these additions to your website!
Enclose the "Hello World!" in an <h1> tag as shown here:
<h1> Hello World! </h1>
The full code should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Hello World! </h1>
<script src="script.js"></script>
</body>
</html>Congratulations! You've created a simple website using HTML, CSS, and JavaScript. This is just the beginning – there are many more features and technologies to explore. Keep learning and experimenting to build more complex and dynamic websites.
Feel free to reach out if you have any questions or feedback. Happy coding!