coding note 1

 Sure! Let’s create a basic website with HTML, CSS, and JavaScript. This example will show a simple interactive webpage that displays a greeting message when a button is clicked.

✅ Goal:

Create a "Hello, World!" website with:

  1. A title and description

  2. A button that changes the text when clicked

💻 Code:

Here's the full code, and then I'll explain each part.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 id="main-heading">Welcome to My Website!</h1>
        <p>This is a simple webpage using HTML, CSS, and JavaScript.</p>
        <button onclick="changeText()">Click Me!</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f4f8;
    text-align: center;
    padding-top: 100px;
}

.container {
    background-color: white;
    margin: auto;
    padding: 40px;
    border-radius: 10px;
    width: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

script.js

function changeText() {
    document.getElementById("main-heading").innerText = "You clicked the button!";
}

🧠 Explanation:

File Purpose
index.html The structure of the webpage (headings, paragraph, button).
style.css Styling the page (fonts, colors, layout, etc).
script.js Makes the page interactive (changes text when the button is clicked).

Key parts explained:

  • <!DOCTYPE html>: Declares the document type (HTML5).

  • <head>: Contains meta info, title, and link to CSS.

  • <body>: The visible content on the page.

  • <button onclick="changeText()">: When clicked, it runs the changeText function.

  • document.getElementById(...): JavaScript finds the element and changes its text.

📌 How to run it:

  1. Create three files:

    • index.html

    • style.css

    • script.js

  2. Place them in the same folder.

  3. Open index.html in a browser.

Would you like me to expand this into a more advanced site (like a form, calculator, or blog layout)?

Comments

Post a Comment

Popular posts from this blog