COURSE 1: PROGRAMMING FOUNDATIONS AND WEB DEVELOPMENT ESSENTIALS

Subject: Stage 3 Computer Science & Web Technologies
Grade Level: Senior Stage 3 (Ages 16–18 / Pre-University)
Instructional Design Focus: Experiential Learning, Computational Thinking, and Applied Web Architecture

---

SECTION 1: COMPREHENSIVE CORE CONCEPTS

Welcome to the foundation of modern digital infrastructure. Almost every service we interact with today—from streaming platforms and social networks to financial systems and smart city dashboards—relies on web technologies and programming logic. This section unpacks how these technologies work from the ground up, starting with web infrastructure and moving through structural HTML5, expressive CSS3, and dynamic JavaScript execution.

---

Concept 1: The Anatomy of the Web (Client-Server Architecture)

To build software for the web, we must first understand the medium through which it travels. The World Wide Web operates primarily on a Client-Server Architecture. This model describes how two distinct computing entities communicate to share resources and display information.

+------------------+                   HTTP Request                   +------------------+
|                  | -----------------------------------------------> |                  |
|  Client Browser  |                                                  |   Web Server     |
| (Chrome, Firefox)|        |
+------------------+
|
+-------------+-------------+
|                           |
+------------------+        +------------------+
|            |        |            |
+------------------+        +------------------+
|  Contains meta-  |        | Contains visible |
|  data, title, &  |        | content: headers,|
|  linked assets   |        | paragraphs, divs |
+------------------+        +------------------+

Semantic HTML5

Early versions of HTML relied heavily on generic container tags like and. While functional, these tags carry no structural meaning. Semantic HTML5 introduced descriptive tags that communicate the role of the content to browsers, search engines, and screen readers (used by visually impaired users).

• ``: Defines introductory content, such as a logo, navigation links, or search bars.
• ``: Specifically encloses navigation links.
• ``: Wraps the primary, unique content of the web document.
• ``: Groups related content together logically.
• ``: Encloses a self-contained composition (e.g., a blog post, news story, or forum reply) that could be distributed independently.
• ``: Contains content tangentially related to the main content (e.g., sidebars, callout boxes).
• ``: Houses copyright info, site maps, and contact links.

Using semantic elements improves SEO (Search Engine Optimization) and guarantees digital Accessibility (a11y), making web applications accessible to everyone.

---

Concept 4: CSS3 – The Visual Styling Canvas

Cascading Style Sheets (CSS) control the visual presentation of HTML elements. CSS targets HTML elements using selectors and applies style declarations (consisting of properties and values).

/* Selector targeting a class */
.profile-card {
background-color: #f4f4f4; /* Property: Value */
border-radius: 8px;
padding: 20px;
}

The CSS Box Model

Every element on a webpage is treated as a rectangular box. Understanding the CSS Box Model is essential for controlling layout spacing, alignment, and sizing.

+---------------------------------------------+
| Margin (Clears area outside border)         |
|  +---------------------------------------+  |
|  | Border (Line around padding & content)|  |
|  |  +---------------------------------+  |  |
|  |  | Padding (Clears area around)    |  |  |
|  |  |         (the content inside)    |  |  |
|  |  |  +---------------------------+  |  |  |
|  |  |  | Content (Text/Image)      |  |  |  |
|  |  |  +---------------------------+  |  |  |
|  |  +---------------------------------+  |  |
|  +---------------------------------------+  |
+---------------------------------------------+

The box model consists of four layers:

1. Content: The actual text, images, or media inside the element.
2. Padding: The space between the content and the element's border. Padding is internal; it inherits the element’s background color.
3. Border: A line surrounding the padding and content. You can style its thickness, pattern, and color.
4. Margin: The outermost space surrounding the element, separating it from neighboring elements. Margins are external and transparent.

By default, an element's total width is calculated as:
$\text{Total Width} = \text{Width} + \text{Left Padding} + \text{Right Padding} + \text{Left Border} + \text{Right Border}$

To prevent these calculations from complicating layouts, developers often use the CSS rule box-sizing: border-box;, which forces the padding and border to fit within the defined width and height of the element.

Flexbox Layouts

CSS Flexible Box Layout (Flexbox) is a one-dimensional layout model designed to distribute space and align items within a container, even when their sizes are dynamic or unknown.

Key properties applied to a flex container:

• display: flex; activates the flex context.
• flex-direction: row | column; defines the orientation of the layout axis.
• justify-content: flex-start | flex-end | center | space-between | space-around; aligns items along the primary axis (horizontally by default).
• align-items: flex-start | flex-end | center | stretch; aligns items along the cross axis (vertically by default).

---

Concept 5: JavaScript – The Behavioral Layer

If HTML is the skeleton and CSS is the skin, JavaScript (JS) is the muscular and nervous system. JavaScript is an interpreted, high-level programming language that executes in the user's browser, allowing pages to respond to user actions without reloading.

The Document Object Model (DOM)

When a browser loads an HTML document, it constructs a tree-like representation of the page called the Document Object Model (DOM).

Document (Root)
│

│
┌─────────┴─────────┐
              
│                   │
        ┌───────┴───────┐
            

JavaScript interacts with the DOM to dynamically manipulate the webpage. This allows JS to read, add, remove, or modify HTML tags and CSS styles on the fly.

Event-Driven Programming

JavaScript functions are often triggered by events—specific actions that occur on the webpage, such as a user clicking a button, hovering over an element, pressing a key, or resizing the window.

To respond to an event, we attach an Event Listener to a DOM node. This listener waits for the specified event to fire, then executes a callback function in response.

// Selecting the DOM node
const themeButton = document.querySelector('#toggle-btn');

// Attaching the event listener
themeButton.addEventListener('click', function() {
// Logic that runs when button is clicked
document.body.classList.toggle('dark-mode');
});

---

SECTION 2: REAL-WORLD EXAMPLES (SCENARIOS)

To see how these technologies work together outside of textbook definitions, let’s explore three practical scenarios where coding fundamentals and web architecture solve real problems.

---

Scenario 1: The Local E-Commerce Bakery Platform

• The Context: An independent bakery, "Crust & Crumb," wants to sell its products online. They need a system that updates their inventory, calculates order prices, and lets users build custom pastry boxes.
• The Technical Application:
• HTML Structure: The site uses semantic containers like `` for each product. Inside, it uses headings (Sourdough Bread), pricing text ($8.50), and user input fields for quantities.
• CSS Style: A CSS Grid displays products in a responsive grid. Media queries ensure that on a smartphone screen, the grid collapses into a single column for easy thumb-scrolling.
• JavaScript Logic: JavaScript uses a local array of objects to track inventory:

const menuItems = [
{ id: "sourdough", name: "Sourdough Bread", price: 8.50, stock: 15 },
{ id: "croissant", name: "Almond Croissant", price: 4.50, stock: 24 }
];

When a customer changes the quantity input, a JS function recalculates the subtotal, adds local sales tax, and dynamically updates the order total in the DOM without requiring a page reload.

---

Scenario 2: Smart Home Dashboard

• The Context: A resident wants to monitor their home's energy consumption, ambient temperature, and security status from a wall-mounted tablet interface.
• The Technical Application:
• Web Architecture (Client-Server): The tablet runs a browser (the client) displaying a web application. A local mini-computer (the server, like a Raspberry Pi) collects raw sensor readings from smart outlets and thermometers.
• Computational Logic (Conditionals): The dashboard interface runs a continuous control loop (using JavaScript) checking safety and comfort conditions:

let ambientTemp = getSensorReading(); // Reads current room temperature

if (ambientTemp > 24) {
triggerAirConditioner("ON");
updateDashboardUI("Cooling active...", "blue-text");
} else if (ambientTemp ` containers and applying descriptive `alt` tags to images (e.g., `alt="Minimalist brand design for coffee shop"`), the designer helps search engines correctly index their work, driving organic traffic.
*   **Interactivity & UX:** A JavaScript-powered filter dynamically updates the display. When a visitor clicks a "Branding" tag, JS hides non-branding elements from the DOM with a smooth CSS transition effect:
```javascript
function filterPortfolio(category) {
const items = document.querySelectorAll('.portfolio-item');
items.forEach(item => {
if (item.dataset.category === category || category === 'all') {
item.style.display = 'block'; // Show matched projects
} else {
item.style.display = 'none';  // Hide unmatched projects
}
});
}

---

SECTION 3: PRACTICAL APPLICATIONS (STEP-BY-STEP GUIDES)

This section walks you through building a real, interactive web page: an Interactive Personal Finance Budgeting Calculator. This application allows users to log income and expenses, calculate their net balance, and receive dynamic financial health tips based on logical thresholds.

+-------------------------------------------------------------+
|               PERSONAL FINANCE CALCULATOR                   |
+-------------------------------------------------------------+
| [ Income Input ] $ [5000]      [ Expense Input ] $ [3200]   |
|                                                             |
|                      ( CALCULATE BALANCE )                  |
|                                                             |
|  Net Balance: $1800.00                                      |
|  Status Alert: Healthy Savings Rate! Keep it up.            |
+-------------------------------------------------------------+

---

Step 1: Writing the Structure (HTML5)

Create a file named index.html and add the following code. This sets up the structural elements of your calculator using semantic HTML.

Interactive Budget Tracker





Budget Tracker & Planner
Manage your monthly cash flow and savings goals.




Total Monthly Income ($):




Total Monthly Expenses ($):



Calculate Net Balance



Financial Overview

Net Monthly Savings:
$0.00


Savings Percentage:
0%

---

Step 2: Adding Visual Styles (CSS3)

Next, create a stylesheet named style.css in the same directory. This stylesheet structures the app using a responsive Flexbox layout and applies variables, clean spacing, and modern typography.

/* Custom CSS Variables for styling consistency */
:root {
--primary-color: #2b6cb0;
--success-color: #2f855a;
--warning-color: #c05621;
--danger-color: #9b2c2c;
--bg-light: #f7fafc;
--card-bg: #ffffff;
--text-dark: #2d3748;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-light);
color: var(--text-dark);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.app-container {
width: 100%;
max-width: 500px;
padding: 24px;
}

header {
text-align: center;
margin-bottom: 24px;
}

header h1 {
color: var(--primary-color);
font-size: 1.8rem;
margin-bottom: 8px;
}

header p {
color: #718096;
font-size: 0.95rem;
}

.calculator-card, .results-card {
background-color: var(--card-bg);
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.input-group {
display: flex;
flex-direction: column;
margin-bottom: 16px;
}

.input-group label {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 6px;
color: #4a5568;
}

.input-group input {
padding: 10px 14px;
font-size: 1rem;
border: 1.5px solid #cbd5e0;
border-radius: 6px;
outline: none;
transition: border-color 0.2s ease;
}

.input-group input:focus {
border-color: var(--primary-color);
}

button {
width: 100%;
background-color: var(--primary-color);
color: white;
font-size: 1rem;
font-weight: 600;
padding: 12px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease;
}

button:hover {
background-color: #2c5282;
}

/* Dynamic Classes */
.hidden {
display: none;
}

.result-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
font-size: 1.1rem;
}

.feedback-msg {
margin-top: 16px;
padding: 12px;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.4;
}

/* Feedback Theme Classes */
.savings-good {
background-color: #c6f6d5;
color: var(--success-color);
}

.savings-warning {
background-color: #feebc8;
color: var(--warning-color);
}

.savings-danger {
background-color: #fed7d7;
color: var(--danger-color);
}

---

Step 3: Implementing Logic and DOM Interactivity (JavaScript)

Now create app.js. This script reads user input, converts it to numbers, runs conditional safety logic, calculates percentages, and dynamically displays the result.

// Select DOM elements
const calculateBtn = document.getElementById('calculate-btn');
const incomeInput = document.getElementById('monthly-income');
const expensesInput = document.getElementById('monthly-expenses');
const resultsSection = document.getElementById('results-section');
const netSavingsDisplay = document.getElementById('net-savings-display');
const savingsRatioDisplay = document.getElementById('savings-ratio-display');
const financialFeedback = document.getElementById('financial-feedback');

// Define calculation and rendering function
function processBudget() {
// 1. Retrieve and parse input values
const income = parseFloat(incomeInput.value);
const expenses = parseFloat(expensesInput.value);

// 2. Data Validation
// Check if the values entered are actual numbers and are not negative
if (isNaN(income) || isNaN(expenses) || income  0) {
savingsRatio = (netSavings / income) * 100;
}

// 4. Render calculations to screen (Format numbers to two decimal places)
netSavingsDisplay.textContent = `$${netSavings.toFixed(2)}`;
savingsRatioDisplay.textContent = `${savingsRatio.toFixed(1)}%`;

// 5. Structural Conditional Logic to generate financial health context
// Clear previous feedback classes
financialFeedback.className = "feedback-msg";

if (netSavings                 |      | .container {          |
|  [Inputs: kWh / Days] | ---> |    | ---> |   display: flex;      |
|  [Calculate Button]   |      |     |      |   padding: 20px;      |
|  [Results Dashboard]  |      |                |      | }                     |
+-----------------------+      +-----------------------+      +-----------------------+
│
▼
Phase 4: JS Logical Engine
+-----------------------+
| const kwh = parse();  |
| if(kwh > limit) { ...}|
| showResults();        |
+-----------------------+

Phase 1: Planning and Wireframing

1. On a blank sheet of paper, sketch your user interface.
2. Define your Inputs: Number of occupants, billing cycle duration (in days), and total resource consumption (kWh of power).
3. Define your Outputs: Average consumption per person per day, and a rating (e.g., "Eco-Friendly," "Moderate Use," or "High Consumer") compared to a standard benchmark (e.g., 8 kWh per person per day).

Phase 2: Write the Structure (HTML)

1. Open your text editor and create a new directory named resource-tracker.
2. Create a file named index.html.
3. Write semantic tags: container, a section for numeric inputs, a to trigger calculations, and placeholder tags (such as and ``) to display results.

Phase 3: Apply Layout (CSS)

1. Create a stylesheet named style.css.
2. Import an attractive font from Google Fonts or use sans-serif defaults.
3. Apply styling to the form inputs to make them easy to use.
4. Use Flexbox (display: flex) to align input elements cleanly. Keep the interface layout responsive so it adjusts to both mobile and desktop screen sizes.

Phase 4: Write the Logical Engine (JavaScript)

1. Create a file named app.js.
2. Select input elements using document.getElementById().
3. Add an event listener to run code when the user clicks the submit button.
4. Implement your mathematical formulas and logical checks:

const dailyPerCapitaConsumption = totalKwh / (occupants * billingDays);

let ecoRating = "";
if (dailyPerCapitaConsumption 

Irrigation Check
Field Size (Acres):
 
Run Report

/* THE BROKEN CSS SNIPPET */
.card {
width: 500px;
padding: 10px;
margin: 15px;
/* Visual components overflow on narrow mobile screens. How can we make it more responsive? */
}

// THE BROKEN JAVASCRIPT SNIPPET
const btn = document.getElementById("calc-btn");

btn.addEventListener('click', function() {
// BUG WARNING: The values below are parsed as strings rather than numbers,
// which leads to calculation errors when multiplying.
let acres = document.getElementById("acres").value; 
let litersNeeded = acres * 1500; // 1500 liters recommended per acre

// LOGICAL ERROR: This comparison does not work because it evaluates strings instead of numbers.
if (litersNeeded = "10000") { // Check if this assignment operator is correct
document.getElementById("alert").textContent = "Danger! Overconsumption limits reached.";
} else {
document.getElementById("alert").textContent = "Water volume approved.";
}
});

Your Task:

1. Analyze the Errors: Identify at least three distinct bugs in the HTML, CSS, and JS code snippets above (look for syntax mistakes, incorrect variable operations, and logical comparison bugs).
2. Rewrite the Code: Write a corrected, fully working version of the HTML, CSS, and JavaScript. Ensure inputs are properly validated as numbers, use strict comparison operators, and design the layout to be mobile-friendly.

---

Part C: Real-World Design Proposal Challenge

Imagine you are hired as a technical consultant to design a system for a local Community Food Bank. They need a web portal to coordinate food donations.

+-------------------------------------------------------------+
|                     DESIGN PROPOSAL                         |
+-------------------------------------------------------------+
|  1. Semantic Wireframe       2. Dynamic State Planning      |
|  [Header]                    - User logs donation quantity  |
|  [Main Content Grid]         - Logic computes total weight  |
|  [Footer]                    - DOM updates progress bars    |
|                                                             |
|  3. Layout Architecture      4. Technical Stack Choice      |
|  - Flexbox container alignment                              |
|  - Media queries for responsive volunteer usage             |
+-------------------------------------------------------------+

Write a structured Design Proposal Document addressing the following points:

1. Semantic Wireframe Plan: Outline the HTML structure you would use to build the donation portal. Specify which semantic HTML5 elements you would use and explain why they are appropriate for structuring the header, main navigation, donation input cards, and footer sections.
2. Dynamic State Planning: Detail how your JavaScript logic would track and update donation inputs on the fly. How would you structure your variables? What event listeners would you use, and how would you update the DOM to show the total weight of food donated in real-time?
3. Responsive Layout Strategy: Explain how you would use CSS Flexbox or CSS Grid to make sure the portal works well for volunteers on desktop monitors in the warehouse and on mobile phones in the field. Which properties would you use to ensure a fluid, responsive layout?