Learn to Code — DEMON Education

HTML: The Structure

HTML (HyperText Markup Language) forms the basic structure of a webpage. You use tags to define text, links, images, and layout.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to coding!</p>
  </body>
</html>

Each tag like <h1> or <p> defines a different kind of content on your site.

CSS: The Design

CSS (Cascading Style Sheets) controls how everything looks: colors, spacing, fonts, and layout.

body {
  background-color: #f8f9fb;
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  color: #0077cc;
}

Save CSS in a separate style.css file and link it in your HTML with:

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

JavaScript: The Logic

JavaScript makes your webpage interactive. It can respond to user actions like clicks and keyboard input.

<script>
  function showMessage() {
    alert("Welcome to your first script!");
  }
</script>

<button onclick="showMessage()">Click Me</button>

When you click the button, the script runs and shows a message!