Javascript – Nexto https://nexto.ch Business Empowerment Sat, 26 Oct 2024 15:36:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 Creating a Simple Website with HTML, CSS, and JavaScript https://nexto.ch/javascript/creating-a-simple-website-with-html-css-and-javascript/ Thu, 15 Aug 2024 15:16:21 +0000 https://nexto.ch/?p=226675 Introduction

Building a website from scratch is a great way to understand the fundamentals of web development. In this tutorial, you will learn how to create a simple static website using HTML for structure, CSS for styling, and JavaScript for interactivity.

Prerequisites

  • A text editor (e.g., Visual Studio Code, Sublime Text, Notepad++).
  • Basic understanding of HTML, CSS, and JavaScript syntax.
Step 1: Setting Up the Project Structure

Create a new directory for your website project:

my_website/
├── index.html
├── styles.css
└── script.js
Step 2: Creating the HTML Structure

Open index.html in your text editor and set up the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Simple Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is a simple website created with HTML, CSS, and JavaScript.</p>
    <button id="myButton">Click Me</button>

    <script src="script.js"></script>
</body>
</html>
Step 3: Adding Styles with CSS

Open styles.css and add some styles to enhance the appearance of your website:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
}
Step 4: Adding Interactivity with JavaScript

Open script.js and add code to handle the button click event:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});
Step 5: Testing the Website

Open index.html in a web browser to view your website. Click the “Click Me” button to ensure the JavaScript function works correctly.

Step 6: Enhancing the Website (Optional)
  • Add Images: Include images using the <img> tag.
  • Create Additional Pages: Add more HTML files and link them using <a> tags.
  • Responsive Design: Use media queries in CSS to make the website responsive.

Conclusion

You have created a simple static website using HTML, CSS, and JavaScript. This foundation allows you to build more complex websites and explore advanced web development concepts.

]]>