DEV Community

Jayden Imel
Jayden Imel

Posted on

AI can help you

#website #tutorial #web3 #beginners

You can use AI like ChatGPT or Gemini. These are good to use to make code for your website. But you don't want AI to help you make a full code for wbeiste. But you can still use AI to help you. 1. HTML (Index.html)
This file provides the basic structure and links to the other two files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <!-- Link to our CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <main>
        <p>This is the main content area.</p>
        <button id="myButton">Click Me</button>
        <p id="messageArea">A message will appear here after you click the button.</p>
    </main>

    <footer>
        <p>&copy; 2025</p>
    </footer>

    <!-- Link to our JavaScript file -->
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now is css code

  1. CSS (styles.css) This file styles the elements, making the page look better. 
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

header {
    background-color: #007BFF;
    color: white;
    padding: 1rem 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

main {
    padding: 2rem;
    max-width: 800px;
    margin: 2rem auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #218838;
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#messageArea {
    margin-top: 20px;
    font-weight: bold;
    color: #d9534f;
}
Enter fullscreen mode Exit fullscreen mode
  1. JavaScript (script.js) This file adds interactivity. When the button is clicked, it changes the message text. 
// Wait until the HTML document is fully loaded
document.addEventListener('DOMContentLoaded', (event) => {
    // Get the button element by its ID
    const myButton = document.getElementById('myButton');
    // Get the message area element by its ID
    const messageArea = document.getElementById('messageArea');

    // Add an event listener for when the button is clicked
    myButton.addEventListener('click', () => {
        // Change the text content of the message area
        messageArea.textContent = 'Button has been clicked! This is JavaScript in action.';
        // Optionally, change the text color
        messageArea.style.color = '#007BFF';
    });
});
Enter fullscreen mode Exit fullscreen mode

How to Use This Code
Create three files in the same folder on your computer: index.html, styles.css, and script.js.
Copy and paste the respective code into each file.

Top comments (0)