Getting Started with Basic HTML, CSS and JavaScript

HTML, CSS, and JavaScript are the three core technologies of the web:

• HTML → Structure (the skeleton)
• CSS → Styling (the look)
• JavaScript → Interactivity (the brain)

---

1. HTML – Structure

Here’s a basic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
  <a href="https://example.com">A link</a>
  <img src="image.jpg" alt="Description">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>
</html>

Common tags:

• Headings: <h1> to <h6>
• Paragraph: <p>
• Links: <a href="...">
• Images: <img src="..." alt="...">
• Lists: <ul> / <ol> + <li>
• Containers: <div>, <header>, <main>, <section>, <footer>

---

2. CSS – Styling

Example external CSS file (styles.css):

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f0f0f0;
  color: #333;
}

h1 {
  color: #2c3e50;
  text-align: center;
}

p {
  line-height: 1.6;
  max-width: 600px;
}

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #2980b9;
}

Link it in your HTML with:

<link rel="stylesheet" href="styles.css">

---

3. JavaScript – Interactivity

Simple example:

<button id="myButton">Click me</button>
<p id="message"></p>

<script>
  const button = document.getElementById("myButton");
  const message = document.getElementById("message");

  button.addEventListener("click", function() {
    message.textContent = "You clicked the button!";
    message.style.color = "green";
  });
</script>

---

Complete Working Example (All-in-One)

Here’s a full working example you can save as a single .html file:

<!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>
  <style>
    body {
      font-family: system-ui, sans-serif;
      text-align: center;
      padding: 50px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      min-height: 100vh;
      margin: 0;
    }

    button {
      padding: 12px 24px;
      font-size: 16px;
      background: white;
      color: #667eea;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 20px;
      transition: transform 0.2s;
    }

    button:hover {
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome</h1>
  </header>
  <main>
    <p id="greeting">Hello, visitor!</p>
    <button id="changeBtn">Change Greeting</button>
  </main>

  <script>
    const button = document.getElementById("changeBtn");
    const greeting = document.getElementById("greeting");

    const messages = [
      "Hello, visitor!",
      "Nice to meet you!",
      "Have a great day!",
      "Keep learning!"
    ];

    let index = 0;

    button.addEventListener("click", () => {
      index = (index + 1) % messages.length;
      greeting.textContent = messages[index];
    });
  </script>
</body>
</html>

---

How to Practice

1. Create three files: index.html, styles.css, and script.js
2. Or use the all-in-one version above
3. Open the file in your browser
4. Click the button and see it work!

Recommended tools:

• VS Code (free code editor)
• Live Server extension (for instant browser refresh)

Happy coding!