Cooperating HTML, CSS and JavaScript (Basic Tutorial)

on

 



🧱 Step 1: HTML — The Structure

HTML (HyperText Markup Language) is like the skeleton of a website.
It gives structure to your content — think of it as the frame of a house.

Here’s a small example:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to my fun website 😄</p>
  </body>
</html>

💡 Tip: Every HTML page starts with a <!DOCTYPE html> and is wrapped in <html>, <head>, and <body> tags.

🎨 Step 2: CSS — The Style

Now your website has bones, but it needs style!
CSS (Cascading Style Sheets) adds color, layout, and beauty.

Example:

body {
  background-color: #f0f8ff;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

h1 {
  color: #ff6347;
}

p {
  color: #555;
  font-size: 18px;
}

💡 Tip: You can link CSS to your HTML using:

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

⚡ Step 3: JavaScript — The Magic

Now that your website looks great, let’s make it do things!
JavaScript brings your web page to life — like adding interactivity, buttons, animations, and effects.

Example:

<button onclick="sayHello()">Click Me!</button>

<script>
  function sayHello() {
    alert('Hello, Web Developer! 👋');
  }
</script>

💡 Tip: You can write JavaScript inside <script> tags or in a separate .js file.

🎯 Bonus: Putting It All Together

Here’s a simple mini-project combining HTML, CSS, and JavaScript 👇

<!DOCTYPE html>
<html>
<head>
  <title>Fun Web Page</title>
  <style>
    body {
      text-align: center;
      font-family: 'Comic Sans MS';
      background-color: #e0f7fa;
    }
    button {
      padding: 10px 20px;
      font-size: 18px;
      border: none;
      border-radius: 8px;
      background-color: #ff4081;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background-color: #f50057;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Fun Web Page 🎉</h1>
  <p>Click the button below for a surprise!</p>
  <button onclick="showMessage()">Click Me!</button>

  <script>
    function showMessage() {
      alert('You just learned HTML, CSS, and JavaScript! 🌟');
    }
  </script>
</body>
</html>

🧠 Wrap-Up

You just built your first interactive webpage using:

Keep practicing, and soon you’ll be able to create full websites and web apps!


Comments

Post a Comment