Web Development for Beginners

Teaching Guide with Code Samples

Table of Contents

1. Introduction to HTML (Hypertext Markup Language)

What is HTML?

HTML is the standard language for creating web pages. It uses "tags" to structure content on the web.

Basic Structure of an HTML Document

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <!-- Content goes here -->
  <h1>Hello World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>

Common HTML Tags

Headings

<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<!-- h4, h5, and h6 are also available -->

Paragraphs

<p>This is a paragraph of text. HTML will automatically wrap the text.</p>
<p>This is another paragraph. Notice how it starts on a new line.</p>

Links

<a href="https://www.example.com">Click here to visit Example.com</a>
<a href="about.html">Go to the About page</a>

Images

<img src="cat.jpg" alt="A cute cat">
<img src="https://example.com/dog.jpg" alt="A friendly dog" width="300" height="200">

Lists

<!-- Unordered (bullet) list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered (numbered) list -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Divs and Spans

<div>
  <p>Divs are block-level containers. They start on a new line.</p>
</div>

<p>This sentence has a <span style="color: red;">red span</span> in it.</p>

Comments

<!-- This is a comment. It won't appear on the webpage. -->

Tables

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>13</td>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>12</td>
  </tr>
</table>

Forms (Simple)

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">
  
  <button type="submit">Submit</button>
</form>

2. Introduction to CSS (Cascading Style Sheets)

What is CSS?

CSS is used to style and layout web pages. It determines how HTML elements are displayed.

Three Ways to Add CSS

1. Inline CSS

<p style="color: blue; font-size: 16px;">This text is blue and 16px.</p>

2. Internal CSS (in the head section)

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
    
    .highlight {
      background-color: yellow;
    }
  </style>
</head>

3. External CSS (separate file)

HTML file:

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

styles.css file:

p {
  color: blue;
  font-size: 16px;
}

.highlight {
  background-color: yellow;
}

CSS Selectors

Element Selector

p {
  color: red;
}

h1 {
  font-size: 24px;
}

Class Selector

.highlight {
  background-color: yellow;
}

.button {
  padding: 10px;
  background-color: blue;
  color: white;
}

HTML usage:

<p class="highlight">This paragraph has a yellow background.</p>
<div class="button">Click me</div>

ID Selector

#header {
  background-color: black;
  color: white;
}

HTML usage:

<div id="header">Website Header</div>

Common CSS Properties

Colors

p {
  color: red;                   /* Named color */
  background-color: #00FF00;    /* Hex color (green) */
  border-color: rgb(0, 0, 255); /* RGB color (blue) */
}

Text Styling

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

Box Model (Margin, Border, Padding)

div {
  margin: 10px;         /* Space outside the element */
  border: 2px solid red; /* Border around the element */
  padding: 15px;         /* Space inside the element */
  width: 200px;
  height: 100px;
}

Borders

.box {
  border-width: 2px;
  border-style: solid;    /* Options: solid, dashed, dotted, double */
  border-color: blue;
  
  /* Shorthand */
  border: 2px solid blue;
  
  /* Rounded corners */
  border-radius: 10px;
}

Display Types

.block {
  display: block;       /* Takes full width, starts on new line */
}

.inline {
  display: inline;      /* Takes only needed width, stays in line */
}

.hidden {
  display: none;        /* Element is not displayed */
}

3. Introduction to JavaScript

What is JavaScript?

JavaScript adds interactivity to websites. It can respond to user actions, modify the page content, and much more.

Three Ways to Add JavaScript

1. Inline JavaScript

<button onclick="alert('Hello!')">Click Me</button>

2. Internal JavaScript (in the head or body)

<script>
  function sayHello() {
    alert('Hello!');
  }
</script>

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

3. External JavaScript (separate file)

HTML file:

<script src="script.js"></script>
<button onclick="sayHello()">Click Me</button>

script.js file:

function sayHello() {
  alert('Hello!');
}

Basic Concepts

Variables

// Ways to declare variables
let name = "John";            // Can be changed later
const age = 13;               // Cannot be changed
var oldWay = "not recommended"; // Older syntax

// Types of data
let text = "Hello";           // String
let number = 42;              // Number
let isRaining = true;         // Boolean (true/false)
let nothing = null;           // Null
let items = ["apple", "banana", "orange"]; // Array
let person = {                // Object
  name: "Sarah",
  age: 12
};

Functions

// Defining a function
function addNumbers(a, b) {
  return a + b;
}

// Calling a function
let sum = addNumbers(5, 3);   // sum will be 8

// Function with no parameters
function sayHello() {
  alert("Hello!");
}

Conditionals

let age = 12;

// If statement
if (age < 13) {
  console.log("You're still a kid!");
} else if (age < 18) {
  console.log("You're a teenager!");
} else {
  console.log("You're an adult!");
}

Loops

// For loop
for (let i = 0; i < 5; i++) {
  console.log("Count: " + i);  // Shows 0, 1, 2, 3, 4
}

// While loop
let count = 0;
while (count < 3) {
  console.log("Still counting: " + count);
  count++;
}

DOM Manipulation (Document Object Model)

Selecting Elements

// By ID
let header = document.getElementById("header");

// By class name
let buttons = document.getElementsByClassName("button");

// By tag name
let paragraphs = document.getElementsByTagName("p");

// Modern selectors (return first match)
let firstButton = document.querySelector(".button");

// Modern selectors (return all matches)
let allButtons = document.querySelectorAll(".button");

Changing Content

// Change text content
document.getElementById("demo").textContent = "New text";

// Change HTML content
document.getElementById("demo").innerHTML = "<strong>Bold new text</strong>";

Changing Styles

let element = document.getElementById("demo");

// Directly change a style
element.style.color = "red";
element.style.fontSize = "20px";

// Add/remove classes
element.classList.add("highlight");
element.classList.remove("hidden");
element.classList.toggle("active");

Events

// Method 1: HTML attribute
// <button onclick="handleClick()">Click Me</button>

function handleClick() {
  alert("Button was clicked!");
}

// Method 2: JavaScript
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button was clicked!");
});

// Common events
// click - when element is clicked
// mouseover - when mouse moves over element
// mouseout - when mouse leaves element
// keydown - when a key is pressed
// submit - when a form is submitted
// load - when page has loaded

4. Putting It All Together

Simple Interactive Webpage Example

<!DOCTYPE html>
<html>
<head>
  <title>Interactive Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    
    .counter {
      font-size: 60px;
      margin: 20px;
    }
    
    .button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      margin: 5px;
    }
    
    .button:hover {
      background-color: #45a049;
    }
    
    .message {
      height: 20px;
      margin: 20px;
      color: blue;
    }
    
    .red { color: red; }
    .green { color: green; }
  </style>
</head>
<body>
  <h1>Simple Counter</h1>
  
  <div class="counter" id="counter">0</div>
  
  <button class="button" id="decrease">Decrease</button>
  <button class="button" id="reset">Reset</button>
  <button class="button" id="increase">Increase</button>
  
  <div class="message" id="message"></div>
  
  <script>
    // Get elements from the page
    const counterElement = document.getElementById("counter");
    const messageElement = document.getElementById("message");
    const decreaseButton = document.getElementById("decrease");
    const resetButton = document.getElementById("reset");
    const increaseButton = document.getElementById("increase");
    
    // Initialize counter
    let count = 0;
    
    // Update the counter display and color
    function updateCounter() {
      counterElement.textContent = count;
      
      // Remove all color classes
      counterElement.classList.remove("red", "green");
      
      // Add appropriate color class
      if (count < 0) {
        counterElement.classList.add("red");
      } else if (count > 0) {
        counterElement.classList.add("green");
      }
      
      // Show a message based on the count
      if (count === 10) {
        messageElement.textContent = "You reached 10!";
      } else if (count === -10) {
        messageElement.textContent = "You reached -10!";
      } else if (count === 0) {
        messageElement.textContent = "Back to zero!";
      } else {
        messageElement.textContent = "";
      }
    }
    
    // Add event listeners to buttons
    decreaseButton.addEventListener("click", function() {
      count--;
      updateCounter();
    });
    
    resetButton.addEventListener("click", function() {
      count = 0;
      updateCounter();
    });
    
    increaseButton.addEventListener("click", function() {
      count++;
      updateCounter();
    });
    
    // Initialize the display
    updateCounter();
  </script>
</body>
</html>

5. Fun Project Ideas for Students

1. Personal Profile Page

Have students create a page about themselves with:

2. Quiz Game

Create a simple multiple-choice quiz:

3. Interactive Story

Create a "choose your own adventure" story:

4. Simple Game

Create a simple game like:

5. Mini Animation

Create a simple animation using:

Note for Teachers: These code samples can be copied directly into the code editor from the previous lesson. Encourage students to experiment by modifying values and seeing the results in real-time.