Scribd
Upload
2 views35 pages

Multimedia Web Course Notes

The document provides comprehensive course notes on Multimedia and Web Technologies, covering key topics such as multimedia integration in web design, the client-server model of the web, and essential HTML and CSS concepts. It emphasizes the importance of accessibility, semantic HTML, and modern CSS layout techniques like Flexbox and Grid. Additionally, it includes practical tips for setting up a development environment and optimizing web performance.

Uploaded by

joelasuako15
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views35 pages

Multimedia Web Course Notes

The document provides comprehensive course notes on Multimedia and Web Technologies, covering key topics such as multimedia integration in web design, the client-server model of the web, and essential HTML and CSS concepts. It emphasizes the importance of accessibility, semantic HTML, and modern CSS layout techniques like Flexbox and Grid. Additionally, it includes practical tips for setting up a development environment and optimizing web performance.

Uploaded by

joelasuako15
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

MULTIMEDIA & WEB TECHNOLOGIES

Complete Course Notes


Covering all 12 topics — Exam-Ready Reference
Topic 1: Overview of Multimedia & How the Web Works

1.1 What is Multimedia?


Multimedia refers to content that uses a combination of different content forms. In web design,
multimedia integrates text, audio, video, images, animations and interactive content to create engaging
user experiences.

• Forms of Multimedia: Text


• Images (JPEG, PNG, SVG, WebP)
• Audio (MP3, OGG, WAV)
• Video (MP4, WebM)
• Animation (CSS animations, GIFs, Canvas)
• Interactive elements (forms, sliders, games)

KEY Multimedia in web design improves user engagement, accessibility, and information
EXAM retention. Always consider performance — media files can slow down a website
POINT significantly.

1.2 How the Web Works


The web operates on a client-server model. A client (browser) sends a request to a server, which
processes it and returns a response.

The Request-Response Cycle


• User types a URL or clicks a link in a browser
• Browser performs a DNS lookup to find the server's IP address
• Browser sends an HTTP request to the server
• Server processes the request and sends back an HTTP response
• Browser renders the HTML, CSS, and JavaScript

HTTP — HyperText Transfer Protocol


HTTP is the protocol that defines how messages are formatted and transmitted on the web. HTTPS is
the secure, encrypted version using SSL/TLS.

Term / Concept Definition / Notes


GET Retrieve data from the server (e.g., loading a webpage)
POST Send data to the server (e.g., submitting a form)
PUT Update existing data on the server
DELETE Remove data from the server
200 OK Request succeeded
301 Moved Permanently Resource has been redirected
404 Not Found Resource does not exist
500 Internal Server Error Server-side error

URLs — Uniform Resource Locators


A URL uniquely identifies a resource on the web. Structure:
[Link]
|\_____/ \_________/|___||_____________||____________||_______|
|scheme host port path query string fragment

• Parts of a URL: Scheme: https:// or http://


• Host: domain name (e.g., [Link])
• Port: optional, default 80 (HTTP) or 443 (HTTPS)
• Path: location of the resource on the server
• Query string: key=value pairs after '?'
• Fragment: anchor/section within the page after '#'

1.3 Browsers
A web browser is software that retrieves and renders web pages. Major browsers include Chrome,
Firefox, Safari, Edge and Opera.

• Browser responsibilities: Parses HTML to build the DOM (Document Object Model)
• Parses CSS to build the CSSOM (CSS Object Model)
• Combines DOM + CSSOM into a Render Tree
• Executes JavaScript via a JS engine (e.g., V8 in Chrome)
• Displays the final visual output to the user

1.4 Development Environment Setup


Setting up a proper development environment is essential for web development.

• Code Editor: VS Code (most popular), Sublime Text, Atom


• Browser: Chrome or Firefox with DevTools
• [Link] & npm: JavaScript runtime and package manager
• Git: Version control system
• Live Server extension (VS Code): Auto-reloads browser on save

EXAM Know the difference between a text editor and an IDE. VS Code is a lightweight editor
TIP with IDE features via extensions.
Topic 2: HTML Essentials

2.1 What is HTML?


HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the
structure and meaning of web content using elements represented by tags.

<!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>
</body>
</html>

KEY <!DOCTYPE html> tells the browser to use HTML5. The <head> contains metadata
POINT (not visible), and <body> contains visible content.

2.2 Semantic HTML


Semantic elements clearly describe their meaning/purpose to both the browser and developer. They
improve accessibility, SEO, and code readability.

Term / Concept Definition / Notes


<header> Introductory content or navigation at the top of a page/section
<nav> Navigation links
<main> The main unique content of the page (only one per page)
<section> A thematic grouping of content
<article> Self-contained, independently distributable content
<aside> Content tangentially related to main content (e.g., sidebar)
<footer> Footer of a page or section
<figure> Self-contained media content with optional caption
<figcaption> Caption for a <figure> element
<time> Represents a specific time or date

EXAM Non-semantic elements like <div> and <span> carry no meaning. Always prefer
TIP semantic elements. E.g., use <nav> instead of <div id='nav'>.

2.3 Common HTML Tags


Headings
<h1>Main Heading</h1> <!-- only ONE h1 per page -->
<h2>Sub-heading</h2>
<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 target='_blank' opens in a new tab. Always add rel='noopener noreferrer' for security
POINT when using target='_blank'.

Images
<img src="[Link]" alt="A descriptive alternative text" width="300"
height="200">

• src: path to the image file


• alt: alternative text — mandatory for accessibility; describes the image to screen readers
• width / height: always set to prevent layout shift

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 -->


<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>

Tables
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer</td>
</tr>
</tfoot>
</table>

• Table tags: <table>: container


• <thead>, <tbody>, <tfoot>: row groups
• <tr>: table row
• <th>: header cell (bold, centered by default)
• <td>: data cell
• colspan / rowspan: merge cells across columns/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</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 validation
type="password" Masked text input
type="number" Numeric input
type="checkbox" Toggle on/off selection
type="radio" Select one from a group (same name attribute)
type="file" File upload
type="submit" Submit button
required Field must be filled before submission
placeholder Hint text shown inside empty input

2.4 Accessibility (a11y)


Accessibility ensures websites can be used by everyone, including people with disabilities.

• Always use alt text on images


• Use semantic HTML elements correctly
• Label all form inputs with <label for='id'>
• Ensure sufficient color contrast (min 4.5:1 ratio)
• Use ARIA attributes when semantic HTML is insufficient (role, aria-label, aria-hidden)
• Ensure keyboard navigation works (Tab key, focus states)

EXAM ARIA = Accessible Rich Internet Applications. WAI-ARIA attributes add accessibility
POINT information to non-semantic elements. E.g., role='button' on a <div>.
Topic 3: Introduction to CSS

3.1 What is CSS?


CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colors, fonts,
spacing, layout, and more.

3.2 CSS Selectors


Term / Concept Definition / Notes
* Universal selector — selects all elements
element Type selector — e.g., p, h1, div
.class Class selector — elements with that class
#id ID selector — one unique element
element element Descendant — all matching descendants
element > element Child — direct children only
element + element Adjacent sibling — immediately after
element ~ element General sibling — all siblings after
[attr] Attribute selector — has that attribute
:hover Pseudo-class — on mouse over
:focus Pseudo-class — when element is focused
:nth-child(n) Pseudo-class — nth child of parent
::before / ::after Pseudo-elements — insert content

3.3 The Cascade, Specificity & Inheritance


Cascade
When multiple rules apply to the same element, the browser determines which rule wins using:
Specificity, then Source Order (later rules win), then !important (overrides all — avoid overusing).

Specificity (from highest to lowest)


• Inline styles (style='...') — 1,0,0,0
• ID selectors (#id) — 0,1,0,0
• Class selectors, pseudo-classes, attribute selectors — 0,0,1,0
• Type selectors, pseudo-elements — 0,0,0,1
3.4 The Box Model
Every HTML element is a rectangular box. The Box Model consists of four areas:

+-------------------------------+
| MARGIN | <-- Space outside the border
| +-------------------------+ |
| | BORDER | | <-- The visible border
| | +-------------------+ | |
| | | PADDING | | | <-- Space inside the border
| | | +-------------+ | | |
| | | | CONTENT | | | | <-- The actual content
| | | +-------------+ | | |
| | +-------------------+ | |
| +-------------------------+ |
+-------------------------------+

Term / Concept Definition / Notes


content The actual element content (text, image, etc.)
padding Space between content and border (inside the element)
border The visible line around the element
margin Space outside the border (between elements)
box-sizing: content-box Default — width/height applies only to content area
box-sizing: border-box Width/height includes padding and border (RECOMMENDED —
use universally)

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


* {
box-sizing: border-box;
}

3.5 Typography & Visual Styling


p {
font-family: 'Arial', sans-serif; /* font stack */
font-size: 16px; /* or rem, em */
font-weight: bold; /* 100-900 or bold/normal */
font-style: italic;
line-height: 1.6; /* unitless = relative to font-size */
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;
}
/* Units quick reference */
/* px = absolute pixels */
/* em = relative to parent font-size */
/* rem = relative to root (html) font-size */
/* % = relative to parent */
/* vw/vh = viewport width/height */
Topic 4: Modern CSS Layouts

4.1 Flexbox
Flexbox (Flexible Box Layout) is a one-dimensional layout model — it handles elements in a row OR
column. Apply display: flex to the parent (flex container).

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

.item {
flex: 1; /* shorthand: flex-grow flex-shrink flex-basis
*/
align-self: flex-end; /* override align-items for this item */
order: 2; /* change visual order */
}

Term / Concept Definition / Notes


flex-direction Sets main axis: row (horizontal) or column (vertical)
justify-content Aligns items along the MAIN axis
align-items Aligns items along the CROSS axis
flex-wrap Allows items to wrap onto multiple lines
gap Spacing between flex items
flex-grow How much item grows relative to others (0 = don't grow)
flex-shrink How much item shrinks when space is limited
flex-basis Initial size of item before growing/shrinking
flex: 1 Shorthand meaning grow=1, shrink=1, basis=0%

4.2 CSS Grid


CSS Grid is a two-dimensional layout system — handles both rows AND columns simultaneously.
Apply display: grid to the container.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 columns */
grid-template-rows: auto 200px auto; /* 3 rows */
gap: 20px; /* row-gap and column-gap */
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 */


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

/* Useful functions */
/* repeat(3, 1fr) = 1fr 1fr 1fr */
/* minmax(200px, 1fr) = min 200px, max 1fr */
/* auto-fit + minmax: responsive grid without media queries */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

EXAM Flexbox is for 1D layouts (rows OR columns). Grid is for 2D layouts (rows AND
TIP columns). Use Grid for page layout, Flexbox for component alignment.

4.3 Responsive Design


Responsive design ensures websites look and work well on all screen sizes — mobile, tablet, and
desktop.

• Mobile First: design for small screens first, then add styles for larger screens
• Fluid layouts: use % and fr units instead of fixed px
• Flexible media: use max-width: 100% on images
• Media queries: apply different CSS at different screen sizes

4.4 Media Queries


/* Base styles (mobile first) */
body {
font-size: 16px;
}

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


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

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

/* Other media features */


@media (max-width: 600px) { /* styles for small screens only */ }
@media (orientation: landscape) { /* landscape mode */ }
@media print { /* print styles */ }

Common breakpoints: 480px (mobile), 768px (tablet), 1024px (desktop), 1280px (large
KEY
desktop). Always include the viewport meta tag in HTML: <meta name='viewport'
POINT
content='width=device-width, initial-scale=1.0'>
Topic 5: TailwindCSS and Interface Design

5.1 What is TailwindCSS?


TailwindCSS is a utility-first CSS framework. Instead of writing custom CSS, you apply pre-defined
utility classes directly in HTML. It enables rapid UI development.

KEY Traditional CSS: write custom class names and CSS rules. Tailwind: compose
CONCEP utilities in HTML. E.g., instead of writing '.btn { background: blue; padding: 8px 16px;
T }' you write class='bg-blue-500 px-4 py-2'.

5.2 Core Utility Classes


Term / Concept Definition / Notes
p-4 padding: 1rem (all sides) — scale: 1 unit = 0.25rem
px-4 / py-4 horizontal (x) or vertical (y) padding
m-4 / mx-4 / my-4 margin — same pattern as padding
w-full / h-screen width: 100% / height: 100vh
text-xl / text-sm font sizes (xs, sm, base, lg, xl, 2xl, 3xl, ...)
font-bold / font-medium font-weight utilities
text-center / text-right text alignment
text-gray-600 color — format: text-{color}-{shade 100-900}
bg-blue-500 background color
rounded / rounded-lg border-radius (sm, md, lg, full)
border / border-2 border width
shadow / shadow-lg box-shadow
flex / grid display: flex / grid
items-center / justify- Flex/Grid alignment utilities
between
hidden / block / inline display property
hover:bg-blue-600 Hover state prefix
md:grid-cols-2 Responsive prefix (sm, md, lg, xl, 2xl)

5.3 Tailwind Configuration


// [Link]
[Link] = {
content: ['./src/**/*.{html,js,jsx,ts,tsx}'], // Files to scan for classes
theme: {
extend: {
colors: {
brand: '#1a56db', // Custom colors
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
spacing: {
'18': '4.5rem', // Custom spacing
}
}
},
plugins: [],
}

5.4 Design Systems


A design system is a set of reusable components, patterns, and guidelines that ensure visual
consistency across a product.

• Color palette: primary, secondary, neutral, semantic colors


• Typography scale: heading sizes, body text, line heights
• Spacing scale: consistent padding, margin values
• Components: buttons, cards, inputs, modals
• Breakpoints: standardized responsive breakpoints

EXAM Tailwind's configuration file IS your design system. Customizing the [Link]
TIP object defines your design tokens (colors, spacing, fonts) for the entire project.
Topic 6: JavaScript Fundamentals

6.1 Variables
// var - function scoped, can be re-declared (avoid in modern JS)
var name = 'Alice';

// let - block scoped, can be reassigned (preferred for mutable values)


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

// const - block scoped, cannot be reassigned (preferred for constants)


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

// Data types
let str = 'Hello'; // String
let num = 42; // Number
let bool = true; // Boolean
let arr = [1, 2, 3]; // Array
let obj = { key: 'value' }; // Object
let n = null; // Null (intentional absence of value)
let u = undefined; // Undefined (unassigned)

Use const by default. Use let only when you need to reassign. Never use var in
EXAM
modern JavaScript. const does NOT make objects/arrays immutable — it prevents
POINT
reassignment of the variable itself.

6.2 Operators
Term / Concept Definition / Notes
+-*/% Arithmetic operators (% is modulus/remainder)
** Exponentiation (e.g., 2**3 = 8)
= Assignment
== / != Equality (loose — does type coercion, AVOID)
=== / !== Strict equality (checks type AND value, PREFERRED)
< > <= >= Comparison operators
&& / || Logical AND / OR
! Logical NOT
?? Nullish coalescing: returns right side if left is null/undefined
?. Optional chaining: safely access nested properties
typeof Returns type as a string: 'string', 'number', 'boolean', 'object',
'undefined'

6.3 Functions
// Function declaration (hoisted — can call before it's defined)
function greet(name) {
return 'Hello, ' + name;
}

// Function expression (not hoisted)


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

// 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;

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

// Rest parameters
const sum = (...nums) => [Link]((acc, n) => acc + n, 0);

// Immediately Invoked Function Expression (IIFE)


(function() { [Link]('Runs immediately'); })();

6.4 Control Flow


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

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

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

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

// Array methods
const numbers = [1, 2, 3, 4, 5];
[Link](n => [Link](n)); // iterate
const doubled = [Link](n => n * 2); // transform each item
const evens = [Link](n => n % 2 === 0); // filter
const total = [Link]((sum, n) => sum + n, 0); // accumulate

6.5 DOM Manipulation


The DOM (Document Object Model) is a tree representation of the HTML document. JavaScript can
read and modify the DOM to create dynamic pages.

// Selecting elements
const el = [Link]('myId');
const el2 = [Link]('.myClass'); // first match
const els = [Link]('p'); // all matches
(NodeList)

// Reading & changing content


[Link] = 'New text'; // plain text (safe)
[Link] = '<strong>Bold</strong>'; // HTML content (be careful with user
data)
[Link]; // for form inputs

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

// CSS classes
[Link]('active');
[Link]('hidden');
[Link]('open'); // add if absent, remove if present
[Link]('active'); // returns boolean

// CSS styles
[Link] = 'red'; // inline style (use sparingly)

// Creating and adding elements


const newEl = [Link]('p');
[Link] = 'New paragraph';
[Link](newEl); // add at end
[Link](newEl, refEl); // add before reference

6.6 Event Handling


// addEventListener is preferred
const btn = [Link]('#myBtn');
[Link]('click', function(event) {
[Link]('Clicked!', [Link]);
});

// Arrow function (concise)


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

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

EXAM Event Bubbling: events bubble up from child to parent to document. Event Delegation:
POINT attach a single listener to a parent to handle events from many children using [Link].
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.

• Catches type errors at compile time, before runtime


• Provides better IDE support (autocomplete, refactoring)
• Makes code more readable and self-documenting
• All valid JavaScript is valid TypeScript

7.2 Basic Types


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

// any (avoid — disables type checking)


let anything: any = 'could be anything';

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

// Tuples (fixed-length array with specific types)


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

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

// Literal types
let direction: 'up' | 'down' | 'left' | 'right' = 'up';

// void (function returns nothing)


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

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


function fail(msg: string): never {
throw new Error(msg);
}
7.3 Interfaces
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'
};

// Extending interfaces
interface AdminUser extends User {
department: string;
}

// Interface for functions


interface Formatter {
(value: string): string;
}

// Type aliases (similar to interfaces, preferred for unions/primitives)


type ID = string | number;
type Point = { x: number; y: number };

7.4 Functions 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 functions
function identity<T>(arg: T): T {
return arg;
}
identity<string>('hello'); // T = string
identity<number>(42); // T = number

7.5 Compilation Workflow


# Install TypeScript
npm install -g typescript

# Compile a file
tsc [Link]

# Initialize [Link]
tsc --init

# Watch mode (auto-compile on save)


tsc --watch

// [Link] key options


{
"compilerOptions": {
"target": "ES6", // compiled JS version
"module": "CommonJS",
"strict": true, // enable all strict checks (recommended)
"outDir": "./dist", // output directory
"rootDir": "./src" // source directory
}
}
Topic 8: Introduction to React

8.1 What is React?


React is a JavaScript library for building user interfaces, developed by Meta (Facebook). It uses a
component-based architecture and a virtual DOM for efficient updates.

• Component-based: UI broken into reusable, independent pieces


• Declarative: describe what the UI should look like, not how to update it
• Virtual DOM: React compares a virtual representation of the DOM and only updates what
changed (reconciliation)
• Unidirectional data flow: data flows from parent to child via props

8.2 JSX
JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code inside JavaScript. It gets
compiled to [Link]() calls.

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

// JSX Rules:
// 1. Use className instead of class
// 2. All tags must be closed (<br /> not <br>)
// 3. Return one root element (or use <>...</> Fragment)
// 4. JavaScript expressions go in {curly braces}
// 5. camelCase for HTML attributes: onClick, onChange, htmlFor

const name = 'Alice';


const greeting = <p>Hello, {name}!</p>; // {name} evaluates the JS variable
const sum = <p>2 + 2 = {2 + 2}</p>; // any JS expression

8.3 Components
// Functional component (MODERN — preferred)
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}
</div>
);

// Using components
function App() {
return (
<div>
<Card title="Welcome">
<Button label="Click Me" onClick={() => alert('Hi!')} />
</Card>
</div>
);
}

8.4 Props
Props (properties) are how data is passed from a parent component to a child component. They are
read-only inside the child.

// Parent passes props


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

// Child receives and uses props


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

// children prop — content between component tags


function Wrapper({ children }) {
return <div className="wrapper">{children}</div>;
}

8.5 State with useState


import { useState } from 'react';

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

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

// State with objects


const [user, setUser] = useState({ name: '', email: '' });
// Update: spread existing state, override changed fields
setUser(prev => ({ ...prev, name: 'Alice' }));

EXAM NEVER modify state directly ([Link]++ is WRONG). Always use the setter
POINT function. State changes trigger a re-render of the component.
Topic 9: Intermediate React Development

9.1 Event Handling in React


function Form() {
const handleSubmit = (e) => {
[Link](); // prevent page reload
[Link]('Submitted!');
};

const handleChange = (e) => {


[Link]([Link]); // current input value
};

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

9.2 Controlled Forms


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

const handleChange = (e) => {


setFormData(prev => ({
...prev,
[[Link]]: [Link] // dynamic key using computed property
}));
};

const handleSubmit = (e) => {


[Link]();
[Link](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>
);
}
9.3 useEffect Hook
useEffect lets you perform side effects in functional components — data fetching, subscriptions, DOM
manipulation.

import { useState, useEffect } from 'react';

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

// Runs after every render (no dependency array)


useEffect(() => {
[Link] = 'Posts Page';
});

// Runs once on mount (empty dependency array [])


useEffect(() => {
fetch('[Link]
.then(res => [Link]())
.then(data => {
setPosts(data);
setLoading(false);
});
}, []); // <-- empty array = runs once only

// Runs when 'userId' changes


useEffect(() => {
// fetch data for this user
}, [userId]); // <-- re-runs whenever userId changes

// Cleanup function (runs on component unmount)


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

Term / Concept Definition / Notes


useEffect(() => {}, []) Runs once when component mounts
useEffect(() => {}) Runs after every render
useEffect(() => {}, [dep]) Runs on mount AND when dep changes
return () => { cleanup } Cleanup runs on unmount

9.4 React Router (Routing)


// 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 />} /> {/* dynamic
route */}
<Route path="*" element={<NotFound />} /> {/* 404 catch-
all */}
</Routes>
</BrowserRouter>
);
}

// Access URL parameters


function UserProfile() {
const { id } = useParams(); // gets :id from the URL
return <div>User ID: {id}</div>;
}

// Programmatic navigation
function LoginPage() {
const navigate = useNavigate();
const handleLogin = () => navigate('/dashboard');
}
Topic 10: [Link] and npm

10.1 What is [Link]?


[Link] is a JavaScript runtime built on Chrome's V8 engine. It allows JavaScript to run on the
SERVER side (outside the browser), enabling backend development, tooling, and scripts.

• Non-blocking, event-driven I/O — handles many requests efficiently


• Single-threaded with an event loop
• Used for web servers ([Link]), APIs, build tools, CLI tools
• Has access to the file system, network, OS — things the browser can't do

// Run a JavaScript file with [Link]


node [Link]

// Check [Link] version


node --version

// Start a simple HTTP server (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 on port 3000'));

10.2 npm — Node Package Manager


npm is the default package manager for [Link]. It lets you install, manage, and share JavaScript
packages (libraries).

npm init # create a new project (generates [Link])


npm init -y # create with default values
npm install react # install a package (adds to dependencies)
npm install -D jest # install as devDependency (only for development)
npm install # install all packages listed in [Link]
npm uninstall react # remove a package
npm update # update all packages
npm run <script> # run a script from [Link]
npm list # list installed packages

10.3 [Link]
{
"name": "my-project",
"version": "1.0.0",
"description": "A sample project",
"main": "[Link]",
"scripts": {
"start": "node [Link]",
"dev": "nodemon [Link]",
"build": "tsc",
"test": "jest"
},
"dependencies": {
"express": "^4.18.2" // required in production
},
"devDependencies": {
"typescript": "^5.0.0" // only needed during development
}
}

Term / Concept Definition / Notes


dependencies Packages needed to RUN the application in production
devDependencies Packages only needed DURING DEVELOPMENT (testing, build
tools)
[Link] Locks exact versions of ALL packages for reproducible installs
node_modules/ Where installed packages are stored — NEVER commit to Git
^4.18.2 Caret: allows minor and patch updates (4.x.x)
~4.18.2 Tilde: allows patch updates only (4.18.x)

10.4 CommonJS vs ES Modules


// CommonJS (default in [Link])
const express = require('express'); // import
[Link] = { myFunc }; // export

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


import express from 'express'; // import
export const myFunc = () => {}; // named export
export default MyClass; // default export
Topic 11: Git and Version Control

11.1 What is Git?


Git is a distributed version control system that tracks changes to files over time. It lets you revert to
previous versions, collaborate with others, and maintain multiple development lines (branches).

• Repository (repo): a project folder tracked by Git


• Commit: a snapshot of your changes at a point in time
• Branch: a parallel version of the code
• Merge: combining changes from one branch into another
• Remote: a copy of the repo hosted online (e.g., GitHub)

11.2 Core Git Commands


Term / Concept Definition / Notes
git init Initialize a new Git repository in current folder
git clone <url> Copy a remote repository to your local machine
git status Show the state of the working directory and staging area
git add <file> Stage a file for the next commit
git add . Stage ALL changed files
git commit -m 'message' Save staged changes as a commit with a message
git log View commit history
git log --oneline Compact commit history (one line per commit)
git diff Show unstaged changes
git diff --staged Show staged changes (ready to commit)

11.3 Branching & Merging


git branch # list all branches
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
git switch main # modern way to switch branches

# Merging
git checkout main # switch to target branch
git merge feature-login # merge feature into main

# Deleting a branch
git branch -d feature-login # delete merged branch
git branch -D feature-login # force delete (even if unmerged)

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 (first time)
git pull origin main # fetch and merge changes from GitHub
git fetch # download changes without merging

# GitHub Workflow
# 1. Fork the repo (copy to your GitHub account)
# 2. Clone your fork locally
# 3. Create a feature branch
# 4. Make changes and commit
# 5. Push to your fork
# 6. Open a Pull Request (PR) on GitHub
# 7. Code review -> Merge PR

11.5 Conflict Resolution


A merge conflict occurs when the same part of a file was changed in both branches. Git marks the
conflict in the file:

<<<<<<< HEAD
This is the code on YOUR current branch
=======
This is the code on the branch being MERGED IN
>>>>>>> feature-branch

# Steps to resolve:
# 1. Open the conflicted file
# 2. Choose which version to keep (or write a combination)
# 3. Remove all conflict markers (<<<<<<, =======, >>>>>>>)
# 4. Save the file
# 5. git add <file>
# 6. git commit -m 'Resolved merge conflict'

11.6 .gitignore
The .gitignore file lists files and directories that Git should NOT track.

# .gitignore example
node_modules/ # never commit packages — too large
.env # environment variables / secrets
dist/ # build output
.DS_Store # Mac system file
*.log # all log files

The Three Working Areas in Git: Working Directory (your files as you see them),
EXAM
Staging Area/Index (files added with git add, ready to commit), Repository (committed
POINT
history stored in .git folder).
Topic 12: Final Project & Course Revision

12.1 Project Evaluation Criteria


Final projects are typically assessed on the following areas:

• Functionality: Does the application work as intended?


• Code Quality: Is the code clean, readable, and well-structured?
• UI/UX Design: Is the interface user-friendly and visually coherent?
• Responsiveness: Does it work on different screen sizes?
• Accessibility: Basic a11y implemented (alt text, labels, keyboard nav)?
• Version Control: Evidence of commits, branches, and proper Git usage?
• Presentation: Can you explain your code and decisions clearly?

12.2 Key Concepts Summary


HTML
• Always use semantic elements (header, nav, main, section, article, aside, footer)
• Forms: action, method, input types, labels linked with for/id, required, placeholder
• Tables: thead, tbody, tfoot, th, td, colspan, rowspan
• Images: always include alt attribute

CSS
• Box model: content > padding > border > margin; use box-sizing: border-box globally
• Specificity order: inline > ID > class > element
• Flexbox for 1D, Grid for 2D layouts
• Media queries with min-width (mobile first)
• Tailwind: utility classes applied directly in HTML

JavaScript
• Use const by default, let for reassignment, never var
• Use === for equality (not ==)
• DOM: querySelector, addEventListener, classList, textContent, innerHTML
• Event object: [Link](), [Link]
• Array methods: map, filter, reduce, forEach

TypeScript
• Adds static typing to JavaScript; compiled with tsc
• Types: string, number, boolean, any, void, never, arrays, tuples, union
• Interfaces define the shape of objects
• Generics enable reusable typed functions/components
React
• Components are functions returning JSX
• Props pass data from parent to child (read-only)
• State (useState) triggers re-renders when changed
• useEffect for side effects: fetching data, timers, subscriptions
• React Router: BrowserRouter, Routes, Route, Link, useNavigate, useParams

[Link] & npm


• [Link] runs JavaScript on the server
• npm manages packages; [Link] is the project config
• dependencies vs devDependencies
• node_modules never goes in Git (.gitignore it)

Git
• Workflow: git add -> git commit -> git push
• Branch for features, merge back to main
• Pull Requests on GitHub for code review
• Conflict resolution: edit file, remove markers, add, commit

FINAL Be prepared to write code from memory. Practice building simple components in
EXAM React, writing CSS layouts with Flexbox/Grid, and common Git commands.
REMINDE Understand WHY each technology is used, not just HOW to use it.
R

You might also like