Skip to content

Latest commit

 

History

History
115 lines (87 loc) · 3.63 KB

README.md

File metadata and controls

115 lines (87 loc) · 3.63 KB
Raw

hello-world-test

Simple Website Tutorial

Welcome to the Simple Website Tutorial! This guide will walk you through the steps to create a basic website using HTML, CSS, and JavaScript.

Table of Contents

Introduction

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.

Project Structure

Create a project directory and set up the following file structure:

simple-website/
├── index.html
├── styles.css
└── script.js

Step-by-Step Guide

1. Create the HTML File

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>

2. Create the CSS File

Create a file named styles.css and add the following code to style your webpage:

body {
  font-family: Arial, sans-serif;
}

3. Create the JavaScript File

Create a file named script.js

4. Link the CSS and JavaScript Files

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.

5. Open the HTML File in a Browser

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.

Things to Look Out For

  • 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.

Stretch Goals

If you finish early, feel free to try out these additions to your website!

6. Make it a Header!

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>

Conclusion

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!