Module 9 — Introduction to Web Development

Module 9 · week of 10/26/2026 · Tech+: Software Development Concepts — algorithms and pseudocode, variables, loops and conditionals, programming languages vs markup, and how a web page is built from HTML, CSS, and JavaScript. · Download .docx

Objectives

Demonstrate basic proficiency in programming.

Key terms

Program: A set of instructions a computer follows to do a task.
Algorithm: A precise, finite, step-by-step procedure for solving a problem.
Pseudocode: A plain-language outline of a program's logic written before real code.
Sequence: Steps carried out one after another, in order.
Selection (conditional): A decision in a program: IF a condition is true THEN do one thing ELSE do another.
Iteration (loop): A structure that repeats a block of instructions while a condition holds or for each item.
Variable: A named location that stores a value which can change, such as score = 85.
Data type: The kind of value a variable holds: number, string (text), Boolean (true/false).
HTML: HyperText Markup Language — tags that define the structure and content of a web page.
Tag: An HTML label such as <p> or <h1> that marks what a piece of content is; most open and close.
CSS: Cascading Style Sheets — rules that control colors, fonts, spacing, and layout.
JavaScript: The programming language that runs in the browser and adds interactivity to pages.
Web browser: The client program (Chrome, Safari, Edge) that requests and renders web pages.
Web server: The computer that stores a website and sends its pages to browsers on request.
URL: The address of a page: protocol (https), domain name (pgcc.edu), and path (/admissions).
Domain name: The readable name of a website, such as pgcc.edu, that DNS translates to an IP address.
Syntax error: A mistake that breaks the language's rules, such as a missing closing tag or parenthesis.
Logic error: A mistake that lets the program run but produce the wrong result.
Debugging: Finding and fixing errors in a program.

The concept

A program is a set of instructions a computer follows. Programming is writing those instructions in a language the computer can run. Before code comes the plan: an algorithm and its pseudocode.

An algorithm is a step-by-step set of instructions for solving a problem — a recipe. It must be precise (no guessing), finite (it ends), and correct (it produces the right result every time).

Pseudocode is the algorithm written in plain language, in order, before real code: START; GET score; IF score >= 85 THEN PRINT 'Pass' ELSE PRINT 'Study Path'; END. It has no exact syntax rules — the point is the logic.

Three building blocks of every program: sequence (steps in order), selection (IF … THEN … ELSE decisions), and iteration (loops that repeat while a condition is true or for each item).

A variable is a named place that stores a value: score = 85; name = 'Prince'. The value can change; the name stays. Data types matter here too — number, text (string), true/false (Boolean).

Web development builds pages for the World Wide Web. Three languages divide the work: HTML gives the page its structure and content; CSS gives it style — colors, fonts, layout; JavaScript gives it behavior — what happens when you click.

HTML is a markup language, not a programming language: tags label content. <h1> is a heading, <p> a paragraph, <a href> a link, <img> an image, <ul>/<li> a list. Tags open and close: <p>Hello</p>.

CSS rules say how tagged things look: h1 { color: green; } A selector (h1) picks the element; properties (color) get values (green). One stylesheet can style a whole site.

JavaScript runs in the browser and reacts to events: a button click, a form submit, a timer. It uses the same variables, IF statements, and loops as any programming language.

How a page reaches you: the browser (client) asks a web server for a URL; the server sends back HTML, CSS, and JavaScript files; the browser renders them. In https://www.pgcc.edu/admissions, pgcc.edu is the domain name and /admissions is the path.

Programming languages you will hear about: Python (readable, popular for beginners and data), JavaScript (the web), Java and C# (large applications), C and C++ (systems and games), SQL (databases — Module 7).

Debugging is finding and fixing errors: syntax errors (the language rules are broken — a missing closing tag or parenthesis), logic errors (it runs but gives the wrong answer), and runtime errors (it crashes while running). Test with real inputs, including the wrong ones.

Module 9 items: Pseudocode Assignment (20), Programming Assignment (50), and Module 9 Quiz (20) — 90 points, the week of Oct 26. Module 10 (Internet Privacy, Internet Security, Netiquette) follows the week of Nov 2.

Worked examples

Example 1: Write pseudocode for Meerk's gate: get the quiz score; if it is 85 or higher, open the gate; otherwise, if it is the student's first miss and they are in 9th grade, allow a second attempt; otherwise send them to the Study Path. — START / GET score, attempts, grade / IF score >= 85 THEN PRINT 'Gate open' / ELSE IF attempts = 1 AND grade = 9 THEN PRINT 'Second attempt allowed' / ELSE PRINT 'Study Path' / END IF / END. Sequence, selection, and variables — no loop needed.

Example 2: Sort these into HTML, CSS, or JavaScript: <h1>Welcome</h1>; h1 { color: green; }; button.onclick = showAnswer; <a href='/notes'>Notes</a>. — HTML: <h1>Welcome</h1> and <a href='/notes'>Notes</a> (structure and content). CSS: h1 { color: green; } (style). JavaScript: button.onclick = showAnswer (behavior).

Example 3: A program is supposed to average three scores but prints 240. The code runs with no error message. What kind of error is it, and what is the fix? — A logic error — it added the scores but never divided by 3. It is not a syntax error (the code ran) or a runtime error (it did not crash). Fix: average = (a + b + c) / 3, then test with known inputs such as 80, 90, 70 → 80.

Common mistakes

"HTML is a programming language." HTML is markup — it labels structure. JavaScript is the programming language on a web page.
"Pseudocode has to compile." Pseudocode is plain-language logic with no strict syntax; the point is the order and the decisions.
"If the program runs without an error message, it is correct." A logic error runs fine and gives the wrong answer — test with inputs whose result you already know.

Self-check

Try each one before you look. A miss here costs nothing and tells you exactly what to reread.

1. Which language defines the structure and content of a web page?

2. Which language controls the colors, fonts, and layout of a web page?

3. Which language adds interactivity to a web page, such as responding to a button click?

4. A step-by-step set of instructions for solving a problem is called an:

5. Pseudocode is best described as:

Canvas is the official record. This companion enhances the PGCC curriculum; it does not replace it. Last name and class year only. Students with a 504 plan or IEP: your accommodations apply.

↑ Back to top