DCIT305 / DCIT323

Multimedia & Web Technologies

Complete Exam Study Guide

Covers all 12 topics | Exam-ready definitions, code & tips

Lecturer: Michael Agbo Tettey Soli | University of Ghana

Assessment Breakdown

Component Weight

Quizzes 10%

Practical Assignments 25%

Weekly Lab Exercises 20%

Mid-Semester Exam 15%

Final Project 30%

TOTAL 100%
Topic 1 Overview of Multimedia & How the Web Works
1.1 What is Multimedia?
Multimedia refers to content that combines multiple forms of media to deliver information or
experiences. In web design, multimedia improves user engagement, accessibility, and information
retention — but always consider performance, as large media files slow down websites.

Term / Concept Definition / Notes

Text The most basic form — headings, paragraphs, labels.

JPEG (photos), PNG (transparency), SVG (scalable vector),

Images
WebP (modern, efficient).

MP3 (most compatible), OGG (open format), WAV

Audio
(uncompressed, large).

Video MP4 (widely supported), WebM (open format, smaller file).

CSS animations, GIF (simple loops), Canvas (complex drawing

Animation
via JS).

Interactive Forms, sliders, buttons, games — powered by JavaScript.

KEY EXAM POINT

Multimedia improves engagement BUT can slow down a website. Always optimise media (compress
images, lazy-load videos). This is a favourite exam topic.

1.2 How the Web Works — The Request-Response Cycle

The web uses a client-server model. A client (your browser) requests a resource, and a server
responds with it.

Step-by-step flow:
• User types a URL or clicks a link in a browser.
• Browser performs a DNS lookup to convert the domain name to an IP address.
• Browser sends an HTTP request to the server at that IP address.
• Server processes the request and sends back an HTTP response.
• Browser renders the received HTML, CSS, and JavaScript into a visible page.

1.3 HTTP — HyperText Transfer Protocol

HTTP is the protocol defining how requests and responses are formatted and transmitted. HTTPS is
the secure version, encrypted using SSL/TLS.

Term / Concept Definition / Notes

GET Retrieve data from the server (e.g., loading a page). Data visible
 in URL.

Send data to the server (e.g., submitting a form). Data in request

POST
body.

PUT Update existing data on the server.

DELETE Remove data from the server.

200 OK Request succeeded.

301 Moved Permanently Resource permanently redirected to new URL.

404 Not Found The requested resource does not exist on the server.

500 Internal Server Error Something went wrong on the server side.

EXAM TIP
Know the 4 main HTTP methods (GET, POST, PUT, DELETE) and at least 3 status codes. 200, 404,
and 500 appear most in exams.

1.4 URLs — Uniform Resource Locators

A URL uniquely identifies a resource on the web. Every part has a specific meaning:

[Link]

https:// → Scheme (protocol used)

[Link] → Host (domain name)
:443 → Port (optional; default 80 for HTTP, 443 for HTTPS)
/path/[Link] → Path (location of the resource on the server)
?search=value → Query string (key=value pairs)
#section → Fragment (anchor/section within the page)

1.5 Browsers & the DOM

A browser is software that retrieves, interprets, and renders web pages. Major browsers: Chrome,
Firefox, Safari, Edge, Opera.

What a browser does with your code:

• Parses HTML → builds the DOM (Document Object Model) tree.
• Parses CSS → builds the CSSOM (CSS Object Model).
• Combines DOM + CSSOM into a Render Tree.
• Executes JavaScript via a JS engine (Chrome uses V8).
• Displays the final visual output (this is called 'painting').

Term / Concept Definition / Notes

Document Object Model — the browser's internal tree

DOM
representation of the HTML page.
 CSS Object Model — the browser's internal representation of all
CSSOM
CSS rules.

Render Tree Combination of DOM + CSSOM — only visible elements.

V8 Google's JavaScript engine used in Chrome and [Link].

Browser developer tools (F12) — inspect HTML, CSS, JS,

DevTools
network requests.

EXAM POINT
DNS converts domain names to IP addresses. Without DNS, you'd need to memorise IP addresses to
visit websites. The browser cache stores previously visited pages for faster loading.
Topic 2 HTML Essentials
2.1 What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses
elements represented by tags to describe the structure and meaning of content. HTML is NOT a
programming language — it is a markup language.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>

Term / Concept Definition / Notes

<!DOCTYPE html> Tells the browser to use HTML5. Always the very first line.

Root element. lang attribute helps screen readers and search

<html lang='en'>
engines.

Contains metadata (not visible on page): title, charset, viewport,

<head>
stylesheets, scripts.

Sets character encoding. Supports all languages and special

<meta charset='UTF-8'>
characters.

Essential for responsive design — controls how the page scales

<meta name='viewport'>
on mobile.

<title> The text shown in the browser tab and in search engine results.

<body> All visible page content goes here.

KEY EXAM POINT

<!DOCTYPE html> must always be the very first line. Without it, browsers enter 'quirks mode' and
render pages inconsistently.

2.2 Semantic HTML

Semantic elements clearly describe their meaning and purpose to both the browser and the developer.
They improve accessibility, search engine optimisation (SEO), and code readability.

Term / Concept Definition / Notes

 <header> Introductory content or navigation at the top of a page or section.

<nav> Navigation links — primary site navigation.

The main unique content of the page. Only ONE <main> per
<main>
page.

<section> A thematic grouping of content with its own heading.

Self-contained, independently distributable content (e.g., a blog

<article>
post).

<aside> Content tangentially related to the main content (e.g., a sidebar).

<footer> Footer of a page or section — contact info, copyright, links.

<figure> Self-contained media content with optional caption.

<figcaption> Caption for a <figure> element.

<time> Represents a specific time or date.

Non-semantic block container — use only when no semantic

<div>
element fits.

Non-semantic inline container — use only when no semantic

<span>
element fits.

EXAM TIP
ALWAYS prefer semantic elements over <div> and <span>. E.g., use <nav> instead of <div id='nav'>.
Semantic HTML is accessibility best practice and an exam favourite.

2.3 Common HTML Elements

Headings
<h1>Main Heading</h1> <!-- Only ONE h1 per page — the page title -->
<h2>Sub-Heading</h2> <!-- Sections -->
<h3>Sub-sub-Heading</h3> <!-- h1 through h6 available -->

Links
<a href="[Link] Link</a>
<a href="/[Link]">Internal Link</a>
<a href="#section-id">Anchor Link (same page)</a>
<a href="[Link] Link</a>
<a href="[Link] target="_blank" rel="noopener noreferrer">Opens in
new tab</a>

EXAM POINT
target='_blank' opens a link in a new tab. ALWAYS add rel='noopener noreferrer' with it for security —
this prevents the new page from accessing the opener via [Link].

Images
 <img src="[Link]" alt="A descriptive alternative text" width="300" height="200">
• src — path to the image file (relative or absolute URL).
• alt — MANDATORY for accessibility. Describes the image to screen readers and shows if image
fails to load.
• width / height — always set to prevent layout shift while the image loads.

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

<!-- Ordered list (numbered) -->

<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>

<!-- Description list (term + definition) -->

<dl>
<dt>Term</dt>
<dd>Definition or description of the term.</dd>
</dl>

Tables
<table>
<thead>
<tr>
<th>Name</th><th>Age</th> <!-- th = header cell (bold, centred) -->
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td><td>25</td> <!-- td = data cell -->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">End of table</td> <!-- colspan merges cells horizontally -->
</tr>
</tfoot>
</table>

Term / Concept Definition / Notes

<table> Outer container for the entire table.

<thead> Groups the header row(s). Helps accessibility and styling.

 <tbody> Groups the body rows.

<tfoot> Groups the footer row(s) (totals, summaries).

<tr> Table row — contains <th> or <td> cells.

Header cell — bold and centred by default. Use for column or row
<th>
headers.

<td> Data cell — regular content.

colspan="n" Merges n cells horizontally (across columns).

rowspan="n" Merges n cells vertically (across rows).

Forms
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required placeholder="Enter
name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="msg">Message:</label>
<textarea id="msg" name="msg" rows="4"></textarea>

<select name="country">
<option value="gh">Ghana</option>
<option value="ng">Nigeria</option>
</select>

<input type="checkbox" id="agree" name="agree">

<label for="agree">I agree to the terms</label>

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<button type="submit">Submit</button>
</form>

Term / Concept Definition / Notes

type="text" Single-line text input.

type="email" Email input with built-in format validation.

type="password" Masked/hidden text input.

type="number" Numeric input (can set min, max, step).

type="checkbox" Toggle on/off. Multiple can be selected.

type="radio" Select one from a group. All in the group share the same name
 attribute.

type="file" File upload input.

type="submit" Submit button — sends form data.

required Field must not be empty before the form can be submitted.

placeholder Hint text shown inside an empty input field.

Links a label to an input. Clicking the label focuses the input.

<label for='id'>
Always use this!

action URL where form data is sent on submission.

HTTP method: GET (data in URL) or POST (data in body). Use

method
POST for sensitive data.

2.4 Accessibility (a11y)

Accessibility ensures websites can be used by everyone, including people with disabilities such as
visual, motor, or cognitive impairments.

• Always add alt text to images describing their content.

• Use semantic HTML elements correctly (they have built-in accessibility).
• Link all form inputs with <label for='id'> — essential for screen readers.
• Ensure sufficient colour contrast (minimum ratio of 4.5:1 for normal text).
• Use ARIA attributes when semantic HTML is insufficient (role, aria-label, aria-hidden).
• Ensure full keyboard navigation works (Tab key, visible focus states).

EXAM POINT
ARIA = Accessible Rich Internet Applications. WAI-ARIA adds accessibility info to non-semantic
elements. E.g., role='button' on a <div> tells screen readers it behaves like a button.
Topic 3 Introduction to CSS
3.1 What is CSS?
CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colours, fonts,
spacing, layout, and more. CSS is applied in three ways:

Term / Concept Definition / Notes

style attribute directly on an element. Highest specificity. Avoid —

Inline
hard to maintain.

Internal <style> block inside <head>. Good for single-page styles.

Separate .css file linked with <link rel='stylesheet'

External
href='[Link]'>. Best practice for maintainability.

3.2 CSS Selectors

Term / Concept Definition / Notes

* Universal selector — selects ALL elements on the page.

Type selector — e.g., p, h1, div — selects all elements of that

element
type.

.class Class selector — selects all elements with that class attribute.

#id ID selector — selects the ONE unique element with that id.

Descendant combinator — e.g., nav a selects all <a> inside any

element element
<nav>.

element > element Child combinator — direct children ONLY.

element + element Adjacent sibling — the element immediately after.

element ~ element General sibling — all siblings that come after.

[attr] Attribute selector — has that attribute, e.g., input[required].

:hover Pseudo-class — styles applied on mouse hover.

Pseudo-class — styles applied when element has

:focus
keyboard/mouse focus.

:nth-child(n) Pseudo-class — selects the nth child, e.g., li:nth-child(2).

Pseudo-elements — insert content before/after an element's

::before / ::after
content.

3.3 The Cascade, Specificity & Inheritance

Cascade
When multiple CSS rules target the same element, the browser decides which wins using:
• Specificity — more specific selectors win.
• Source order — if specificity is equal, the later rule wins.
• !important — overrides everything (use sparingly — it makes CSS hard to debug).

Specificity (highest to lowest):

Selector Type Example Score

Inline style style="color:red" 1,0,0,0

ID selector #header 0,1,0,0

Class / Pseudo-class / Attribute .nav, :hover, [type] 0,0,1,0

Element / Pseudo-element p, h1, ::before 0,0,0,1

Universal * 0,0,0,0

EXAM TIP
Higher specificity ALWAYS wins regardless of order. Inline > ID > Class > Element. If two selectors
have identical specificity, the one written LATER in the CSS file wins.

3.4 The Box Model

Every HTML element is a rectangular box. The Box Model describes the four layers that make up each
element's space on the page.

+---------------------------------------+
| MARGIN | ← space OUTSIDE the element
| +---------------------------------+ |
| | BORDER | | ← the visible border line
| | +---------------------------+ | |
| | | PADDING | | | ← space INSIDE (between content and
border)
| | | +---------------------+ | | |
| | | | CONTENT | | | | ← actual text/image/etc
| | | +---------------------+ | | |
| | +---------------------------+ | |
| +---------------------------------+ |
+---------------------------------------+

Term / Concept Definition / Notes

content The actual element content — text, image, etc.

Space between content and border (INSIDE the element). Has the
padding
element's background colour.

The visible line around the element. Has thickness, style, and
border
colour.
 Space OUTSIDE the border (between this element and its
margin
neighbours). Always transparent.

Default. width/height applies only to the content area. Padding and

box-sizing: content-box
border ADD to the total size.

RECOMMENDED. width/height INCLUDES padding and border.

box-sizing: border-box
Makes layout much more predictable.

/* Best practice — apply border-box globally */

* {
box-sizing: border-box;
}

KEY EXAM POINT

Always set box-sizing: border-box on all elements (*). Without it, adding padding to an element
unexpectedly increases its total width, breaking layouts.

3.5 Typography & Visual Styling

p {
font-family: 'Arial', sans-serif; /* font stack: fallback if Arial not available
*/
font-size: 16px; /* or use rem (recommended) */
font-weight: bold; /* or 100-900: 400=normal, 700=bold */
font-style: italic;
line-height: 1.6; /* unitless = relative to font-size, best
practice */
letter-spacing: 0.5px;
text-align: center; /* left | right | center | justify */
text-decoration: underline; /* none | underline | line-through */
text-transform: uppercase; /* lowercase | capitalize */
color: #333333;
background-color: #f0f0f0;
}

CSS Units — Quick Reference

Term / Concept Definition / Notes

px Pixels — absolute, fixed unit. Good for borders and shadows.

Relative to the PARENT element's font-size. 1.5em = 1.5× parent

em
size. Compounds with nesting.

Relative to the ROOT (html) font-size. Most consistent — use rem

rem
for font sizes and spacing.

% Relative to the parent element's size.

Viewport width / height. 100vw = full screen width. Great for full-
vw / vh
page sections.
Topic 4 Modern CSS Layouts
4.1 Flexbox — One-Dimensional Layout
Flexbox (Flexible Box Layout) is a CSS layout model for arranging elements in a single direction —
either a row OR a column. Apply display: flex to the parent (flex container) to activate it.

.container {
display: flex; /* activates flexbox */
flex-direction: row; /* row | row-reverse | column | column-reverse
*/
justify-content: center; /* main axis: flex-start | center | space-
between | space-around | space-evenly */
align-items: center; /* cross axis: flex-start | center | flex-end |
stretch | baseline */
flex-wrap: wrap; /* allow items to wrap onto next line */
gap: 16px; /* spacing between items */
}

.item {
flex: 1; /* shorthand: grow=1 shrink=1 basis=0% */
align-self: flex-end; /* override align-items for THIS item only */
order: 2; /* change visual order without changing HTML */
}

Term / Concept Definition / Notes

flex-direction Sets the MAIN axis. row = horizontal (default). column = vertical.

Aligns items along the MAIN axis (horizontal in row, vertical in

justify-content
column).

align-items Aligns items along the CROSS axis (perpendicular to main axis).

Controls whether items wrap to the next line. nowrap = all on one
flex-wrap
line (default).

Shorthand for row-gap and column-gap. Space between flex

gap
items.

How much an item grows relative to others when there's extra

flex-grow
space. 0 = don't grow.

flex-shrink How much an item shrinks when space is limited. 0 = don't shrink.

flex-basis The initial main size of an item before growing/shrinking.

Shorthand: grow=1, shrink=1, basis=0%. Item takes equal share

flex: 1
of available space.

align-self Overrides align-items for a specific item only.

Changes the visual order of items (default 0; lower values appear

order
first).
Common justify-content values visualised:
Term / Concept Definition / Notes

flex-start Items packed at the start of the main axis. Default.

flex-end Items packed at the end.

center Items centred along the main axis.

space-between Equal space BETWEEN items. No space at edges.

space-around Equal space AROUND each item. Half space at edges.

space-evenly Equal space between items AND at edges.

EXAM TIP
justify-content controls the MAIN axis. align-items controls the CROSS axis. In a row, main =
horizontal, cross = vertical. In a column, it's reversed.

4.2 CSS Grid — Two-Dimensional Layout

CSS Grid is a layout system for arranging elements in both rows AND columns simultaneously. It is
ideal for page-level layouts. Apply display: grid to the container.

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 columns — 1:2:1 ratio */
grid-template-rows: auto 200px auto; /* 3 rows */
gap: 20px; /* space between all cells */
grid-template-areas:
"header header header"
"sidebar main main "
"footer footer footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Placing items manually with line numbers */

.item {
grid-column: 1 / 3; /* spans from column line 1 to 3 (2 columns wide) */
grid-row: 2 / 4; /* spans from row line 2 to 4 (2 rows tall) */
}

/* Powerful responsive grid — no media queries needed */

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Term / Concept Definition / Notes

 Fractional unit — a share of the available space. 1fr 2fr 1fr = 25%
fr
50% 25%.

repeat(3, 1fr) Shorthand for 1fr 1fr 1fr.

auto-fit Fits as many columns as possible. Columns collapse when empty.

auto-fill Creates as many columns as possible, even if some are empty.

minmax(200px, 1fr) Columns are at least 200px but can grow up to 1fr.

Names areas of the grid visually — makes layout code very

grid-template-areas
readable.

grid-column / grid-row Manually place items using grid line numbers.

Sets spacing between rows and columns. Can also use row-gap
gap
and column-gap separately.

KEY EXAM POINT

Flexbox = 1D (row OR column). Grid = 2D (rows AND columns). Use Grid for the overall page layout.
Use Flexbox for aligning items within a component (e.g., nav links, button groups).

4.3 Responsive Design & Media Queries

Responsive design ensures websites look and work well on all screen sizes. The mobile-first approach
means you write base styles for small screens, then add styles for larger screens.

/* Base styles — applies to ALL screen sizes (mobile first) */

body { font-size: 16px; }
.container { display: block; }

/* Tablets and up (768px and wider) */

@media (min-width: 768px) {
.container { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Desktops (1024px and wider) */

@media (min-width: 1024px) {
.container { grid-template-columns: 1fr 1fr 1fr; }
}

/* Target small screens ONLY */

@media (max-width: 600px) { .hide-mobile { display: none; } }

/* Landscape orientation */
@media (orientation: landscape) { /* ... */ }

/* Print styles */
@media print { .no-print { display: none; } }

Term / Concept Definition / Notes

 480px = mobile, 768px = tablet, 1024px = desktop, 1280px = large
Common breakpoints
desktop.

min-width Mobile-first: apply styles FROM this width upwards.

max-width Desktop-first: apply styles UP TO this width (use less often).

<meta name='viewport' content='width=device-width, initial-

Viewport meta tag
scale=1.0'> — ALWAYS include this in <head>.

Fluid layout Use % and fr units instead of fixed px for widths.

img { max-width: 100%; } prevents images from overflowing

Flexible images
containers.

EXAM POINT
The viewport meta tag is ESSENTIAL for responsive design. Without it, mobile browsers zoom out to
show the full desktop layout, ignoring all your media queries.
Topic 5 TailwindCSS & Interface Design
5.1 What is TailwindCSS?
TailwindCSS is a utility-first CSS framework. Instead of writing custom CSS classes, you compose
designs directly in HTML by applying small, pre-defined utility classes.

Term / Concept Definition / Notes

Write .btn { background: blue; padding: 8px 16px; } then apply

Traditional CSS
class='btn'.

Apply utilities directly: class='bg-blue-500 px-4 py-2 text-white

Tailwind CSS
rounded'.

Every class does exactly one CSS property. Compose them to

Utility-first
build any design.

Tailwind's spacing, colour, and typography scales form a

Design tokens
consistent design system.

KEY EXAM POINT

Tailwind is NOT a component library (like Bootstrap). It gives you utilities to build your own
components. The [Link] file IS your design system.

5.2 Core Utility Classes

Term / Concept Definition / Notes

padding: 1rem (all sides). Scale: 1 unit = 0.25rem. So p-

p-4
1=0.25rem, p-4=1rem, p-8=2rem.

px-4 / py-4 Horizontal (left+right) or vertical (top+bottom) padding.

pt-2 / pb-2 / pl-2 / pr-2 Individual side padding (top, bottom, left, right).

Margin — same pattern as padding. mx-auto centres an element

m-4 / mx-4 / my-4
horizontally.

w-full / w-1/2 width: 100% / width: 50%. Also: w-screen (100vw), w-auto.

h-screen / h-full height: 100vh / height: 100%.

text-xl / text-sm Font sizes: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl...

font-bold / font-medium font-weight: 700 / 500. Also: font-normal (400), font-light (300).

text-center / text-right text-align: center / right. Also: text-left, text-justify.

Colour: text-{colour}-{shade}. Shade 100 (lightest) to 900

text-gray-600
(darkest).

bg-blue-500 Background colour. Same {colour}-{shade} system as text colours.

 border-radius. Also: rounded-sm, rounded-md, rounded-xl,
rounded / rounded-lg
rounded-full.

border / border-2 border-width: 1px / 2px. Also: border-0 (none).

shadow / shadow-lg box-shadow presets. Also: shadow-sm, shadow-xl, shadow-none.

flex / grid display: flex / grid.

items-center / justify-between Flex/Grid alignment utilities (same concepts as native CSS).

hidden / block / inline display: none / block / inline.

hover:bg-blue-600 Hover state prefix — apply style on mouse hover.

Responsive prefix — apply at medium breakpoint (768px+). sm,

md:grid-cols-2
md, lg, xl, 2xl.

Focus state — adds outline ring when element is focused.

focus:ring-2
Important for accessibility.

5.3 Tailwind Configuration

// [Link]
[Link] = {
content: ['./src/**/*.{html,js,jsx,ts,tsx}'], // files Tailwind scans for classes
theme: {
extend: {
colors: {
brand: '#1a56db', // Custom colour accessible as text-brand, bg-
brand
'brand-dark': '#1240a6', // Custom dark variant
},
fontFamily: {
sans: ['Inter', 'sans-serif'], // Custom default font
},
spacing: {
'18': '4.5rem', // Custom spacing value (p-18, m-18, etc.)
},
screens: {
'xs': '480px', // Custom breakpoint
},
}
},
plugins: [],
}

EXAM TIP
[Link] adds to Tailwind's defaults. Using theme directly (without extend) REPLACES the
defaults. Always use extend unless you intentionally want to remove all built-in values.

5.4 Design Systems

A design system is a collection of reusable components, patterns, and guidelines ensuring visual
consistency across a product. Tailwind's configuration file defines your design system through:

• Colour palette — primary, secondary, neutral, and semantic (success, error, warning) colours.
• Typography scale — consistent heading sizes, body text sizes, and line heights.
• Spacing scale — consistent padding and margin values across all components.
• Component library — reusable buttons, cards, form inputs, modals built from utilities.
• Breakpoints — standardised responsive screen size thresholds.
Topic 6 JavaScript Fundamentals
6.1 Variables & Data Types
// var — function-scoped, can be re-declared. AVOID in modern JS.
var name = 'Alice';

// let — block-scoped, can be reassigned. Use for mutable values.

let age = 25;
age = 26; // OK

// const — block-scoped, CANNOT be reassigned. Use by default.

const PI = 3.14159;
// PI = 3; // TypeError!

// Data types
let str = 'Hello'; // String — text
let num = 42; // Number — integers and decimals
let bool = true; // Boolean — true or false
let arr = [1, 2, 3]; // Array — ordered list
let obj = { key: 'value' }; // Object — key:value pairs
let n = null; // Null — intentional absence of value
let u = undefined; // Undefined — variable declared but not assigned

EXAM POINT
const does NOT make objects or arrays immutable. It prevents REASSIGNMENT of the variable
itself. const arr = [1,2,3]; [Link](4) is valid. arr = [5] is not.

6.2 Operators
Term / Concept Definition / Notes

+-*/% Arithmetic. % = modulus (remainder). 10 % 3 = 1.

** Exponentiation. 2**3 = 8.

Loose equality — does TYPE COERCION. '5' == 5 is TRUE.

== / !=
AVOID.

Strict equality — checks TYPE and VALUE. '5' === 5 is FALSE.

=== / !==
ALWAYS use this.

&& / || Logical AND / OR.

! Logical NOT. !true = false.

Nullish coalescing — returns right side if left is null or undefined.

??
x ?? 'default'.

Optional chaining — safely access nested properties.

?.
user?.address?.city

typeof Returns the type as a string. typeof 42 = 'number'. typeof null =

 'object' (historical bug!).

EXAM POINT
ALWAYS use === (strict equality) not == (loose equality). == does type coercion which causes bugs.
E.g. 0 == false is true, 0 === false is false.

6.3 Functions
// 1. Function declaration — HOISTED (can call before definition in code)
function greet(name) {
return 'Hello, ' + name;
}

// 2. Function expression — NOT hoisted

const greet2 = function(name) {
return `Hello, ${name}`; // template literal (backticks)
};

// 3. Arrow function — concise, no own 'this'

const greet3 = (name) => `Hello, ${name}`;
const square = n => n * n; // single param: no parentheses needed
const add = (a, b) => a + b; // multiple params: parentheses required

// Default parameters
const greet4 = (name = 'World') => `Hello, ${name}`;
greet4(); // 'Hello, World'
greet4('Kofi'); // 'Hello, Kofi'

// Rest parameters — collects remaining args into an array

const sum = (...nums) => [Link]((acc, n) => acc + n, 0);
sum(1, 2, 3, 4); // 10

Term / Concept Definition / Notes

Function declarations are moved to the top of their scope at

Hoisting
compile time. You can call them before their definition in the code.

Backtick strings `${variable}` — allow embedded expressions and

Template literals
multi-line strings.

Shorter syntax. Does NOT have its own this — inherits from
Arrow function
surrounding scope. Cannot be used as constructors.

Provide fallback values if an argument is not passed or is

Default parameters
undefined.

Rest parameters ...args collects all remaining arguments into an array.

6.4 Control Flow

// if / else if / else
 if (age >= 18) {
[Link]('Adult');
} else if (age >= 13) {
[Link]('Teenager');
} else {
[Link]('Child');
}

// Ternary operator — concise if/else for simple conditions

const label = age >= 18 ? 'Adult' : 'Minor';

// Switch — multiple exact value checks

switch (day) {
case 'Mon': [Link]('Monday'); break; // ALWAYS include break!
case 'Tue': [Link]('Tuesday'); break;
default: [Link]('Other');
}

// Loops
for (let i = 0; i < 5; i++) { [Link](i); } // classic
for (const item of array) { [Link](item); } // iterate values (arrays)
for (const key in object) { [Link](key); } // iterate keys (objects)
while (condition) { /* runs while condition is true */ }

Essential Array Methods

const nums = [1, 2, 3, 4, 5];

[Link](n => [Link](n)); // iterate — no return value

const doubled = [Link](n => n * 2); // transform each item → new array
const evens = [Link](n => n % 2 === 0); // keep items that pass → new array
const total = [Link]((sum, n) => sum + n, 0); // accumulate to single value
const found = [Link](n => n > 3); // first item that passes → single value
const exists = [Link](n => n > 4); // does any item pass? → boolean
const allBig = [Link](n => n > 0); // do ALL items pass? → boolean
const sorted = [Link]((a, b) => a - b); // sort ascending
[Link](6); // add to END
[Link](); // remove from END
[Link](0); // add to BEGINNING
[Link](); // remove from BEGINNING
const sliced = [Link](1, 3); // copy portion [index 1 to 2]

KEY EXAM POINT

map, filter, and reduce always return a NEW array/value without modifying the original. forEach
modifies nothing — it just iterates. These are the most tested array methods.

6.5 DOM Manipulation

The DOM (Document Object Model) is the browser's tree representation of your HTML. JavaScript can
read and modify it to create dynamic, interactive pages.
 // Selecting elements
const el = [Link]('myId'); // by ID (no #)
const el2 = [Link]('.myClass'); // first match (CSS selector)
const els = [Link]('p'); // ALL matches (NodeList)

// Reading and changing content

[Link] = 'New text'; // safe — treats as plain text
[Link] = '<strong>Bold</strong>'; // parses HTML — careful with user data!
[Link]; // for <input> and <textarea>

// Attributes
[Link]('href');
[Link]('href', '[Link]
[Link]('disabled');

// CSS Classes
[Link]('active'); // add a class
[Link]('hidden'); // remove a class
[Link]('open'); // add if absent, remove if present
[Link]('active'); // check if class exists → boolean

// Creating and inserting elements

const newEl = [Link]('p');
[Link] = 'New paragraph';
[Link](newEl); // add at END of parent
[Link](newEl, referenceEl); // add BEFORE reference element

6.6 Event Handling

const btn = [Link]('#myBtn');

// addEventListener is the recommended approach

[Link]('click', function(event) {
[Link]('Clicked!', [Link]); // [Link] = element that was
clicked
});

// Arrow function version

[Link]('click', (e) => {
[Link](); // prevent default browser action (e.g., form submit,
link)
[Link](); // stop event bubbling up the DOM tree
});

// Common events:
// click, dblclick, mouseover, mouseout, mousemove
// keydown, keyup, keypress
// submit (form), input (any typing), change (on blur), focus, blur
// load, DOMContentLoaded (HTML parsed), resize, scroll

Term / Concept Definition / Notes

 Events travel UP from the target element to its parents. E.g., click
Event bubbling
on <button> also fires on <div> and <body>.

Stops the browser's default action. E.g., prevents form submission

[Link]()
or link navigation.

[Link]() Stops the event from bubbling up to parent elements.

The actual element that triggered the event (may differ from the
[Link]
element the listener is attached to).

Attach one listener to a parent to handle events from many

Event delegation
children using [Link]. Efficient for dynamic lists.

Fires when HTML is fully parsed. Use instead of [Link] if

DOMContentLoaded
you don't need images/CSS to be loaded.
Topic 7 Introduction to TypeScript
7.1 What is TypeScript?
TypeScript is a statically-typed superset of JavaScript developed by Microsoft. It adds optional type
annotations that are checked at compile time, then compiles (transpiles) to plain JavaScript that any
browser can run.

Term / Concept Definition / Notes

All valid JavaScript IS valid TypeScript. You can rename any .js
Superset
file to .ts.

Types are checked at COMPILE TIME, before the code runs —

Static typing
catching errors early.

Browsers cannot run TypeScript directly. tsc (TypeScript compiler)

Compiles to JS
converts it to JS.

TypeScript can often infer types without you writing them: const x
Type inference
= 5 → TypeScript knows x is a number.

Enables all strict type checks. Enable with 'strict': true in

Strict mode
[Link]. Recommended.

Benefits of TypeScript:
• Catches type errors before runtime — e.g., passing a string where a number is expected.
• Better IDE autocomplete, refactoring, and documentation.
• Makes code self-documenting — function signatures show exactly what types are expected.
• Easier to maintain large codebases.

7.2 Basic Types

// Primitive types
let name: string = 'Alice';
let age: number = 25;
let active: boolean = true;
let nothing: null = null;
let notSet: undefined = undefined;

// any — disables type checking for this variable. AVOID — defeats the purpose.
let anything: any = 'could be anything';

// Arrays
let nums: number[] = [1, 2, 3]; // array of numbers
let strs: Array<string> = ['a', 'b']; // generic array syntax

// Tuple — fixed-length array with specific types at each position

let pair: [string, number] = ['Alice', 25];

// Union types — can be one of several types

 let id: string | number = 'ABC123';
id = 123; // also valid

// Literal types — only specific values allowed

let direction: 'up' | 'down' | 'left' | 'right' = 'up';

// void — function that returns nothing

function log(msg: string): void { [Link](msg); }

// never — function that NEVER returns (throws or infinite loop)

function fail(msg: string): never { throw new Error(msg); }

EXAM TIP
Know the difference between void (function runs and returns nothing) and never (function never
completes — it throws an error or runs forever). Also know any should be avoided.

7.3 Interfaces
// Interface defines the SHAPE (structure) of an object
interface User {
id: number;
name: string;
email?: string; // ? = optional property
readonly role: 'admin' | 'user'; // cannot be changed after creation
}

const user: User = { id: 1, name: 'Alice', role: 'admin' };

// [Link] = 'user'; // Error! readonly

// Extending interfaces
interface AdminUser extends User {
department: string; // AdminUser has all User properties + department
}

// Type aliases (similar to interfaces)

type ID = string | number; // union type alias
type Point = { x: number; y: number }; // object shape alias

// Difference: interfaces can be re-opened (merged); type aliases cannot.

// Use interface for objects/classes. Use type for unions and primitives.

Term / Concept Definition / Notes

Defines the structure of an object. Properties, their types, and

interface
whether they're optional.

? Optional property — does not have to be present.

readonly Property can be set once (at creation) but not modified afterwards.

extends An interface can inherit from another, adding more properties.

 type alias Like interface but also works for unions, primitives, and tuples.

Type placeholder. function identity<T>(arg: T): T — works with

Generics <T>
any type.

7.4 Functions & Generics in TypeScript

// Typed parameters and return type
function add(a: number, b: number): number {
return a + b;
}

// Arrow function
const multiply = (a: number, b: number): number => a * b;

// Optional and default parameters

function greet(name: string, greeting: string = 'Hello'): string {
return `${greeting}, ${name}`;
}

// Generic function — T is a type placeholder, filled in at call time

function identity<T>(arg: T): T {
return arg;
}
identity<string>('hello'); // T = string
identity<number>(42); // T = number
identity([1,2,3]); // TypeScript infers T = number[]

7.5 Compilation Workflow

# Install TypeScript globally
npm install -g typescript

# Compile a single file (creates [Link])

tsc [Link]

# Initialise [Link] (project config file)

tsc --init

# Watch mode — recompiles automatically on file save

tsc --watch

// [Link] — key settings

{
"compilerOptions": {
"target": "ES6", // output JavaScript version
"module": "CommonJS", // module system (CommonJS for Node, ESNext for React)
"strict": true, // enable ALL strict checks — ALWAYS enable this
"outDir": "./dist", // where compiled JS files go
"rootDir": "./src" // where your TypeScript source files are
}
}
Topic 8 Introduction to React
8.1 What is React?
React is a JavaScript library for building user interfaces, developed and maintained by Meta
(Facebook). It is the most widely used frontend library in the world.

Term / Concept Definition / Notes

UI is broken into small, reusable, independent pieces called

Component-based
components.

You describe WHAT the UI should look like for a given state —
Declarative
React handles HOW to update the DOM.

React maintains a virtual copy of the DOM. On state change, it

Virtual DOM diffs virtual vs real DOM and updates only what changed
(reconciliation).

Data flows from parent to child via props. This makes data flow
Unidirectional data flow
easy to trace.

JSX Syntax extension — write HTML-like code inside JavaScript.

Functions (useState, useEffect etc.) that let functional components

Hooks
use state and lifecycle features.

8.2 JSX
JSX (JavaScript XML) looks like HTML but is actually JavaScript. The React compiler (Babel) converts
JSX to [Link]() calls.

// JSX looks like HTML but has key differences:

const element = <h1 className="title">Hello, World!</h1>;

// JSX RULES — these are the most common exam points:

// 1. Use className instead of class (class is a reserved JS keyword)
// 2. All tags MUST be closed: <br /> not <br>, <img /> not <img>
// 3. Return ONE root element — wrap multiple in <div> or <> (Fragment)
// 4. JavaScript expressions go in {curly braces}
// 5. camelCase for ALL HTML attributes: onClick, onChange, htmlFor

const name = 'Kofi';

const greeting = <p>Hello, {[Link]()}!</p>; // call JS functions
const sum = <p>Result: {2 + 2 * 3}</p>; // any JS expression

// Fragment — return multiple elements without adding an extra DOM node

return (
<>
<h1>Title</h1>
<p>Paragraph</p>
</>
 );

EXAM TIP
className not class. onClick not onclick. htmlFor not for. These small JSX differences are tested
constantly. React uses camelCase for all event handlers and attributes.

8.3 Components & Props

// Functional component — ALWAYS use this modern style
function Button({ label, onClick }) {
return (
<button onClick={onClick} className="btn">
{label}
</button>
);
}

// Arrow function component

const Card = ({ title, children }) => (
<div className="card">
<h2>{title}</h2>
{children} {/* children = content between component tags */}
</div>
);

// Passing props from parent to child

<UserCard name="Alice" age={25} isAdmin={true} />

// Receiving props in child (destructuring recommended)

function UserCard({ name, age, isAdmin }) {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
{isAdmin && <span className="badge">Admin</span>} {/* conditional rendering
*/}
</div>
);
}

Term / Concept Definition / Notes

Properties passed from parent to child. Read-only — child cannot

Props
modify received props.

Special prop — the content between component tags:

children
<Card>THIS</Card>.

Extract props directly in function params: ({ name, age }) instead

Destructuring
of (props).

Conditional rendering Render something only when a condition is true. Use && or
 ternary operator.

{isAdmin && <span/>} If isAdmin is true, render the span. If false, render nothing.

{flag ? <A/> : <B/>} Ternary: render A if flag is true, else render B.

Use [Link]() to render a list of components. Each item needs

.map() for lists
a unique key prop.

// Rendering a list — ALWAYS add a unique key

const items = ['Mango', 'Pawpaw', 'Orange'];
return (
<ul>
{[Link]((fruit, index) => (
<li key={index}>{fruit}</li> // key helps React track changes efficiently
))}
</ul>
);

KEY EXAM POINT

Every element in a list rendered with .map() MUST have a unique key prop. Without it React cannot
efficiently update the list. Use a unique ID if available; index is a last resort.

8.4 State with useState

import { useState } from 'react';

function Counter() {
// useState returns [currentValue, setterFunction]
// 0 is the initial value
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}

// State with objects — spread to avoid losing other properties

const [user, setUser] = useState({ name: '', email: '' });

// CORRECT — spread existing state, override only what changed

setUser(prev => ({ ...prev, name: 'Alice' }));

// WRONG — would delete 'email' from state

// setUser({ name: 'Alice' }); ← BAD
EXAM POINT
NEVER mutate state directly. [Link]++ or [Link] = 'Alice' will NOT trigger a re-render.
ALWAYS use the setter function. State changes cause the component to re-render with the new
value.
Topic 9 Intermediate React Development
9.1 Event Handling in React
function Form() {
const handleSubmit = (e) => {
[Link](); // CRITICAL: prevents page reload on form submit
[Link]('Form submitted!');
};

const handleChange = (e) => {

[Link]([Link]); // current value of the input
[Link]([Link]); // name attribute of the input
};

return (
<form onSubmit={handleSubmit}>
<input type="text" onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
}

9.2 Controlled Forms

In React, form inputs should be controlled — meaning React state is the single source of truth for their
values. This gives you full control over the input data.

function LoginForm() {
const [formData, setFormData] = useState({ username: '', password: '' });

const handleChange = (e) => {

setFormData(prev => ({
...prev, // keep all existing fields
[[Link]]: [Link] // update only the changed field
}));
};

const handleSubmit = (e) => {

[Link]();
[Link]('Submitting:', formData);
};

return (
<form onSubmit={handleSubmit}>
<input name="username" value={[Link]} onChange={handleChange} />
<input name="password" type="password" value={[Link]}
onChange={handleChange} />
<button type="submit">Login</button>
</form>
 );
}

Term / Concept Definition / Notes

Input whose value is driven by React state. value={state} +

Controlled input
onChange={(e) => setState([Link])}.

Input whose value is managed by the DOM directly. Accessed via

Uncontrolled input
ref. Less common.

Computed property — uses the input's name attribute as the key.

[[Link]]
Allows one handler for all inputs.

In form submit handler — prevents the browser from reloading the

[Link]()
page.

9.3 useEffect Hook

useEffect lets you run side effects in functional components — things that happen outside the normal
render cycle, such as fetching data, setting up subscriptions, or manually modifying the DOM.

import { useState, useEffect } from 'react';

function Posts() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);

// Runs ONCE after the first render (empty dependency array [])
useEffect(() => {
fetch('[Link]
.then(res => [Link]())
.then(data => {
setPosts(data);
setLoading(false);
});
}, []); // <-- empty array = run once on mount only

// Runs after EVERY render (no dependency array)

useEffect(() => {
[Link] = `${[Link]} posts`;
});

// Runs on mount AND whenever userId changes

useEffect(() => {
// fetch user data for this userId
}, [userId]);

// Cleanup — return a function that runs when component UNMOUNTS

useEffect(() => {
const timer = setInterval(() => [Link]('tick'), 1000);
return () => clearInterval(timer); // cleanup! prevents memory leaks
 }, []);
}

Term / Concept Definition / Notes

useEffect(() => {}, []) Runs ONCE after the first render. Perfect for initial data fetching.

Runs after EVERY render. Use sparingly — can cause infinite

useEffect(() => {})
loops.

useEffect(() => {}, [dep]) Runs on mount AND whenever dep value changes.

Cleanup function — runs when the component unmounts. Use to

return () => {}
clear timers, cancel requests.

The array of values the effect depends on. Effect re-runs when
Dependency array
any value in it changes.

EXAM POINT
Forgetting the dependency array [] causes useEffect to run after every render. If your effect sets
state, this creates an infinite loop (effect → state change → re-render → effect again).

9.4 React Router

// npm install react-router-dom
import { BrowserRouter, Routes, Route, Link, useNavigate, useParams } from 'react-
router-dom';

function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users/:id" element={<UserProfile />} /> {/* :id = dynamic
segment */}
<Route path="*" element={<NotFound />} /> {/* catch-all 404
*/}
</Routes>
</BrowserRouter>
);
}

// Access URL parameters — e.g., /users/42 → id = '42'

function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
// Navigate programmatically (e.g., after login)
function LoginPage() {
const navigate = useNavigate();
const handleLogin = () => navigate('/dashboard');
}

Term / Concept Definition / Notes

Wraps the entire app. Provides routing context to all child

BrowserRouter
components.

Container for Route definitions. Only renders the first matching

Routes
route.

Maps a URL path to a component: path="/about"

Route
element={<About />}.

Renders an <a> tag that navigates without a full page reload. Use
Link
instead of <a href>.

Hook that returns URL parameters as an object. For path

useParams()
'/users/:id', returns { id: '42' }.

useNavigate() Hook that returns a function for programmatic navigation.

Topic 10 [Link] & npm
10.1 What is [Link]?
[Link] is a JavaScript runtime environment built on Chrome's V8 engine. It allows JavaScript to run on
the server side — outside the browser — enabling backend development, build tools, and scripting.

Term / Concept Definition / Notes

An environment that executes code. Node provides the same V8

Runtime
engine Chrome uses, plus server-side APIs.

Node doesn't wait for slow operations (file reads, network

Non-blocking I/O
requests). It registers a callback and moves on.

The mechanism that handles async operations. Continuously

Event loop
checks if there's work to do.

Node uses one thread but handles concurrency through the event
Single-threaded
loop (not multiple CPU threads).

Google's open-source JS engine — compiles JS directly to

V8 engine
machine code for fast execution.

// Run a file with [Link]

node [Link]

// Check version
node --version // e.g., v20.11.0

// Simple HTTP server using built-in 'http' module

const http = require('http');

const server = [Link]((req, res) => {

[Link](200, { 'Content-Type': 'text/plain' });
[Link]('Hello, World!');
});

[Link](3000, () => {
[Link]('Server running at [Link]
});

KEY EXAM POINT

[Link] is what makes the npm ecosystem and React development workflow possible. When you run
npm start or npm run build, it's [Link] executing those commands.

10.2 npm — Node Package Manager

npm is the default package manager for [Link]. It allows you to install, manage, and share JavaScript
packages (libraries and tools).
 npm init # create a new project (walks you through setup)
npm init -y # create with all defaults (quick start)

npm install react # install a package → adds to 'dependencies'

npm install -D jest # install as devDependency (development only)
npm install # install ALL packages listed in [Link]
npm uninstall react # remove a package
npm update # update all packages to latest allowed version
npm run start # run the 'start' script from [Link]
npm run build # run the 'build' script from [Link]
npm list # list all installed packages
npm list --depth=0 # list only top-level packages (cleaner output)

10.3 [Link]
{
"name": "my-project",
"version": "1.0.0",
"description": "A sample web application",
"main": "[Link]",
"scripts": {
"start": "node [Link]", // npm start
"dev": "nodemon [Link]", // npm run dev (auto-restarts on save)
"build": "tsc", // npm run build (compile TypeScript)
"test": "jest" // npm test
},
"dependencies": {
"express": "^4.18.2" // needed in PRODUCTION to run the app
},
"devDependencies": {
"typescript": "^5.0.0", // needed ONLY DURING DEVELOPMENT
"jest": "^29.0.0"
}
}

Term / Concept Definition / Notes

Packages needed to RUN the application in production. Installed

dependencies
by npm install.

Packages only needed during DEVELOPMENT (testing tools,

devDependencies
TypeScript, build tools). Not in production.

Locks the EXACT versions of all packages. Ensures all team

[Link]
members get identical installs.

Where installed packages are stored. NEVER commit this to Git.

node_modules/
Add to .gitignore.

Custom commands you can run with npm run <name>. start and
scripts
test have shortcuts (no run needed).

^4.18.2 (caret) Allow minor and patch updates: 4.x.x (not 5.0.0).
~4.18.2 (tilde) Allow patch updates only: 4.18.x.

EXAM POINT
node_modules/ is NEVER committed to Git — it can contain hundreds of thousands of files. Instead,
commit [Link] and [Link]. Anyone can recreate node_modules by running npm
install.

10.4 CommonJS vs ES Modules

// CommonJS — default module system in [Link]
const express = require('express'); // import
[Link] = { myFunction }; // export

// ES Modules — modern standard (set "type": "module" in [Link])

import express from 'express'; // default import
import { useState } from 'react'; // named import
export const myFunction = () => {}; // named export
export default MyClass; // default export
Topic 11 Git & Version Control
11.1 What is Git?
Git is a distributed version control system that tracks changes to files over time. It allows you to revert
to previous versions, collaborate with others, and maintain multiple development lines simultaneously.

Term / Concept Definition / Notes

A project folder tracked by Git. Contains all your files and the full
Repository (repo)
history of every change.

A snapshot of your changes at a specific point in time. Each has a

Commit
unique hash ID.

A parallel version of the codebase. Work on features in isolation

Branch
without affecting main.

Merge Combining changes from one branch into another.

A copy of the repo hosted online (e.g., on GitHub). Used for

Remote
backup and collaboration.

Working directory Your files as you currently see them on disk.

Staging area (index) Files added with git add — prepared for the next commit.

Hidden folder where Git stores all history and configuration. Never
.git folder
manually edit it.

KEY EXAM POINT

The Three Working Areas: Working Directory (your files) → Staging Area (git add) → Repository (git
commit). Always this order.

11.2 Core Git Commands

Term / Concept Definition / Notes

git init Initialize a new Git repository in the current folder.

git clone <url> Copy a remote repository to your local machine.

git status Show which files are modified, staged, or untracked.

git add <file> Stage a specific file for the next commit.

git add . Stage ALL changed files in the current directory.

git commit -m 'msg' Save staged changes as a commit with a descriptive message.

git log View the full commit history.

git log --oneline Compact view — one line per commit.

 git diff Show unstaged changes (working directory vs last commit).

git diff --staged Show staged changes (ready to be committed).

11.3 Branching & Merging

git branch # list all branches (* = current)
git branch feature-login # create a new branch
git checkout feature-login # switch to that branch
git checkout -b feature-nav # create AND switch in one command (most common)
git switch main # modern alternative to checkout for switching

# Merging — always merge INTO main FROM feature branch

git checkout main # 1. switch to the target (main) branch
git merge feature-login # 2. merge the feature branch into main

# Deleting branches
git branch -d feature-login # safe delete (only if already merged)
git branch -D feature-login # force delete (even if not merged)

# Undo last commit (keeps changes in working directory)

git reset --soft HEAD~1

# Discard all uncommitted changes (DESTRUCTIVE — cannot undo)

git reset --hard HEAD

11.4 Remote Repositories & GitHub

git remote add origin <url> # connect local repo to GitHub
git push origin main # push commits to GitHub
git push -u origin main # push AND set upstream (do this first time)
git pull origin main # fetch AND merge latest from GitHub
git fetch # download changes without merging

# GitHub Workflow (Fork & Pull Request):

# 1. Fork the repo (copy to your GitHub account)
# 2. Clone your fork: git clone <your-fork-url>
# 3. Create a feature branch: git checkout -b my-feature
# 4. Make changes, commit: git add . && git commit -m 'Add feature'
# 5. Push to your fork: git push origin my-feature
# 6. On GitHub: open a Pull Request (PR) to the original repo
# 7. Code review → discussion → merge PR

11.5 Conflict Resolution

A merge conflict occurs when the same part of the same file was changed differently in two branches
being merged. Git marks the conflict in the file and asks you to resolve it manually.

<<<<<<< HEAD
This is the code on YOUR current branch (main)
 =======
This is the code from the branch being merged in (feature-login)
>>>>>>> feature-login

# Steps to resolve a conflict:

# 1. Open the conflicted file
# 2. Choose which version to keep (or write a combination of both)
# 3. DELETE all conflict markers (<<<<<<, =======, >>>>>>>)
# 4. Save the file
# 5. git add <resolved-file>
# 6. git commit -m 'Resolved merge conflict in [Link]'

11.6 .gitignore
The .gitignore file lists files and folders that Git should NOT track. This is essential for keeping
repositories clean and secure.

# .gitignore — common entries for web projects

node_modules/ # package files — too large, recreated with npm install
.env # environment variables — contains secrets (API keys, passwords)
dist/ # compiled/build output — can be regenerated
.DS_Store # macOS system file — not part of the project
*.log # all log files
.cache/ # build cache directories

REMEMBER
Four files to always commit: [Link], [Link], .gitignore, and your actual source
code. Four to NEVER commit: node_modules/, .env, dist/, and any file with passwords or API keys.
Topic 12 Final Revision & Exam Cheat Sheet
This topic is your complete revision summary. Everything in this section is fair game for the exam.

12.1 HTML Quick Reference

Term / Concept Definition / Notes

Semantic structure header > nav | main > section/article | aside | footer

Only ONE <main> One <main> per page. One <h1> per page.

Forms — action URL where form data is sent.

GET = data in URL. POST = data in request body (use for

Forms — method
sensitive data).

<label for='id'> Links label to input. Clicking label focuses input. Always include.

alt on <img> Mandatory for accessibility and when image fails to load.

target='_blank' Open link in new tab. ALWAYS add rel='noopener noreferrer'.

colspan / rowspan Merge table cells horizontally / vertically.

<meta name='viewport' content='width=device-width, initial-

Viewport meta
scale=1.0'> — required for responsive design.

Accessible Rich Internet Applications. role, aria-label, aria-hidden

ARIA
for accessibility.

12.2 CSS Quick Reference

Term / Concept Definition / Notes

Box model order content → padding → border → margin (inside to outside).

box-sizing: border-box Width includes padding + border. Use globally with *.

Inline > ID > Class > Element. Later rules win when specificity
Specificity
ties.

1D layout. display:flex. justify-content = main axis. align-items =

Flexbox
cross axis.

2D layout. display:grid. grid-template-columns. fr unit. repeat().

Grid
minmax().

Media queries @media (min-width: 768px) — mobile first with min-width.

Breakpoints 480px mobile, 768px tablet, 1024px desktop, 1280px large.

rem = relative to root html font-size. em = relative to parent. Use

rem vs em
rem.
12.3 JavaScript Quick Reference
Term / Concept Definition / Notes

Variables const (default), let (reassignable), never var.

=== vs == Always use ===. == does type coercion which causes bugs.

querySelector CSS selector syntax: '.class', '#id', 'element'. Returns first match.

querySelectorAll Returns a NodeList of ALL matching elements.

textContent = safe (no HTML parsing). innerHTML = parses HTML

textContent vs innerHTML
(risky with user data).

addEventListener Preferred event binding. [Link]('click', fn).

[Link]() Stop default browser action (form submit, link navigation).

map (transform), filter (keep), reduce (accumulate), forEach

Array methods
(iterate), find (first match).

const prevents reassignment but object PROPERTIES can still be

const + objects
changed.

12.4 TypeScript Quick Reference

Term / Concept Definition / Notes

Statically typed superset of JavaScript. Compiles to plain JS with

What it is
tsc.

Basic types string, number, boolean, null, undefined, any (avoid), void, never.

Arrays number[] or Array<number>.

Union string | number — can be either type.

Optional email?: string — does not have to be present.

readonly Property cannot be changed after object creation.

interface Defines the shape of an object.

type alias For unions and primitives: type ID = string | number.

Generics <T> placeholder type. function identity<T>(arg: T): T.

Strict mode 'strict': true in [Link] — enables all strict checks.

12.5 React Quick Reference

Term / Concept Definition / Notes

A JS function that returns JSX. Names MUST start with a capital

Component
letter.
 className not class. camelCase events. All tags must close. One
JSX rules
root element.

Data from parent to child. Read-only. Destructure in function

Props
params.

key prop Required on list items rendered with .map(). Must be unique.

useState const [val, setVal] = useState(initial). Setter triggers re-render.

State mutation NEVER mutate directly. ALWAYS use setter function.

useEffect(fn, []) Run once on mount. Perfect for initial data fetching.

useEffect(fn, [dep]) Re-run whenever dep changes.

Return function from useEffect to clean up timers/subscriptions on

Cleanup
unmount.

BrowserRouter > Routes > Route. Link for navigation. useParams

React Router
for URL params.

12.6 [Link] & npm Quick Reference

Term / Concept Definition / Notes

JavaScript runtime outside the browser. Built on Chrome's V8

[Link]
engine.

npm install <pkg> Install to dependencies (needed in production).

npm install -D <pkg> Install to devDependencies (development only).

[Link] Project manifest — lists deps, devDeps, scripts, version.

[Link] Locks exact versions. Commit this file.

node_modules/ NEVER commit. Always in .gitignore.

npm run <script> Run a custom script. npm start and npm test don't need 'run'.

require = CommonJS (Node default). import = ES Modules

require vs import
(modern).

12.7 Git Quick Reference

Term / Concept Definition / Notes

Working Directory → (git add) → Staging Area → (git commit) →

Three areas
Repository.

git add . Stage all changes.

git commit -m 'msg' Save snapshot with message.

git push Send local commits to remote (GitHub).

 git pull Fetch and merge from remote.

git checkout -b name Create and switch to new branch.

git merge <branch> Merge branch into current branch.

<<<<<<< HEAD / ======= / >>>>>>> branch. Edit file, remove

Conflict markers
markers, add, commit.

GitHub feature to propose merging your branch into another (with

Pull Request
review).

.gitignore List files Git should NOT track. node_modules/, .env, dist/.

12.8 Final Exam Reminders

Common Exam Mistakes — AVOID Correct Practice

Using == for comparison Always use === (strict equality)

Using var for variables Use const by default, let only when reassigning

Forgetting alt on images <img src='...' alt='description'>

Using <div> instead of semantic tags Use <nav>, <main>, <section>, <article>

Mutating React state directly Always use the setter: setState(newVal)

Forgetting [Link]() on forms Prevents page reload on form submission

Missing key prop on .map() lists key={[Link]} on each list item

Using class instead of className in JSX className='myClass' in React

Forgetting [] in useEffect Empty [] = run once. No [] = run every render

Committing node_modules to Git Add node_modules/ to .gitignore

FINAL EXAM REMINDER

Be ready to write code from memory. Practice building React components with useState and
useEffect, writing CSS Flexbox/Grid layouts, and the full Git workflow. Know WHY each technology
exists, not just HOW to use it. You have got this!