🏛️ Westminster College, London | wcc.co.uk

🌐 Full-Stack Web Development · Complete Course Notes

🗓️ 6 Saturdays | 9am–11am 🎯 Beginner → Advanced 💻 Online · Live + Hands‑on
Master modern web development: HTML5/CSS3, JavaScript (ES6+), React, Node.js, Express, SQL/NoSQL databases, authentication, full‑stack integration, and deployment.
📄 Module 1 — HTML5, CSS3 & Responsive Design Week 1 · 2h

🏷️ HTML5 Semantic Structure & Accessibility

HTML5 provides semantic elements that describe content meaning: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Forms: input types (text, email, number, date, tel), validation attributes (required, pattern, min/max), and labels for accessibility. ARIA (Accessible Rich Internet Applications): roles and attributes (aria-label, aria-hidden) to improve screen reader support.
<form action="/submit" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-required="true">
<button type="submit">Subscribe</button>
</form>

🎨 CSS Fundamentals & Modern Layouts

Selectors: element, class, id, attribute, pseudo‑classes (:hover, :nth-child). Box model: margin, border, padding, content. Positioning: static, relative, absolute, fixed, sticky. Flexbox for 1D layouts (align items, justify content, flex wrap). CSS Grid for 2D layouts (grid-template-columns, grid-template-rows, gap).
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
padding: 1rem;
border-radius: 8px;
}

📱 Responsive & Mobile‑First Design

Mobile‑first: write base CSS for small screens, then add media queries for larger breakpoints (min‑width: 768px, 1024px). Use relative units: rem, em, vw, vh, percentages. Media queries: @media (max-width: 768px) { ... }. UI components: responsive navbar (hamburger menu), cards, modals (dialog element or JavaScript overlay).
💡 Hands‑on: Build a responsive personal portfolio website with mobile navbar, project cards, and contact form.
⚡ Module 2 — JavaScript (ES6+) & DOM Manipulation Week 2 · 2h

📜 Core JS & ES6+ Features

Variables: let (mutable), const (immutable binding), avoid var. Data types: string, number, boolean, null, undefined, symbol, object. Functions: function declarations, expressions, arrow functions (() => {}). Closures – inner function retains access to outer scope. Arrays: map, filter, reduce, forEach. Objects and JSON: parse/stringify. Destructuring: const { name, age } = user; Spread/rest operators: ...arr.
const fetchData = async (url) => {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Fetch failed:', error);
}
};

🖱️ DOM Manipulation & Event Handling

DOM (Document Object Model) represents HTML as a tree. Select elements: document.querySelector(), getElementById(). Modify content: innerHTML, textContent, attributes (setAttribute). Add/remove classes via classList. Events: click, submit, input, change, keyup. Attach listeners: addEventListener. Fetch API for AJAX requests. Async/await handles promises cleanly.
document.getElementById('weatherBtn').addEventListener('click', async () => {
const city = document.querySelector('#cityInput').value;
const apiKey = 'YOUR_KEY';
const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
const data = await res.json();
document.getElementById('temp').innerText = data.main.temp;
});
🌦️ Hands‑on: Build a live weather dashboard using a public API (OpenWeatherMap) with city search and dynamic DOM updates.
⚛️ Module 3 — Frontend Development with React Week 3 · 2h

🧩 React Fundamentals & Components

React is a component‑based UI library. Components receive props and return JSX (JavaScript XML). Functional components with Hooks: useState for local state, useEffect for side effects (data fetching, subscriptions). JSX embeds expressions inside curly braces, e.g., {variable}. Event handlers: onClick, onChange.
import React, { useState } from 'react';
function TaskManager() {
const [tasks, setTasks] = useState([]);
const addTask = (task) => setTasks([...tasks, task]);
return (
{tasks.map(t => <li key={t.id}>{t.text}</li>)}
);
}

🔄 React Router & Component Lifecycle

React Router enables client‑side navigation: <BrowserRouter>, <Routes>, <Route>, <Link>. useEffect replaces lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount). Cleanup via return function. Lift state up for shared data; avoid prop drilling using context or state management libraries.
import { useEffect } from 'react';
useEffect(() => {
fetchTasks().then(data => setTasks(data));
return () => console.log('cleanup');
}, []); // empty dependency = run once
📝 Hands‑on: Build a task management SPA (create, edit, delete tasks) with React hooks and local storage.
🖥️ Module 4 — Backend Development with Node.js & Express Week 4 · 2h

🚀 Node.js Runtime & Express Framework

Node.js runs JavaScript on the server (V8 engine). Event‑driven, non‑blocking I/O. Express.js is minimal web framework: routing, middleware, HTTP utilities. RESTful API design: use HTTP methods (GET, POST, PUT, DELETE). Route parameters: /users/:id. Middleware functions: app.use(express.json()) to parse JSON bodies, custom logging, authentication.
const express = require('express');
const app = express();
app.use(express.json());
let posts = [];
app.get('/api/posts', (req, res) => res.json(posts));
app.post('/api/posts', (req, res) => {
const newPost = { id: Date.now(), ...req.body };
posts.push(newPost);
res.status(201).json(newPost);
});
app.listen(5000, () => console.log('Server running'));

🔧 Environment Variables & Error Handling

Use dotenv to load .env files for configuration (port, DB credentials, API keys). Error handling middleware: app.use((err, req, res, next) => {...}). Debugging with console.log, Node.js inspector, or nodemon for auto‑restart.
📝 Hands‑on: Build a blog API with CRUD operations (create post, read all, update, delete) stored in memory or JSON file.
🗄️ Module 5 — Databases & Authentication Week 5 · 2h

🐘 PostgreSQL (SQL) & MongoDB (NoSQL)

PostgreSQL: relational database with ACID compliance. Use pg library or ORM (Sequelize, Prisma). SQL basics: SELECT ... FROM ... WHERE ..., INSERT INTO, UPDATE, DELETE FROM, JOINs. MongoDB: document‑based NoSQL. Use Mongoose ODM to define schemas and models. Comparison: SQL for structured relationships, NoSQL for flexible schemas and horizontal scaling.
// Mongoose schema example
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
username: { type: String, required: true, unique: true },
email: String,
passwordHash: String
});
const User = mongoose.model('User', userSchema);

🔐 Authentication: JWT & Password Hashing

JSON Web Tokens (JWT): stateless authentication. User logs in → server returns signed token → client stores it (localStorage/httpOnly cookie) and sends in Authorization header. Password hashing with bcrypt: never store plaintext passwords. bcrypt.hash(password, saltRounds) and bcrypt.compare(plain, hash). Protect routes: middleware verifies JWT and attaches user info to request.
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
app.post('/login', async (req, res) => {
const user = await User.findOne({ username: req.body.username });
const valid = await bcrypt.compare(req.body.password, user.passwordHash);
if (!valid) return res.status(401).json({ error: 'Invalid credentials' });
const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, { expiresIn: '1d' });
res.json({ token });
});
🔒 Hands‑on: Build a user login/registration system with MongoDB or PostgreSQL, using JWT for protected routes.
🚀 Module 6 — Full-Stack Integration & Deployment Week 6 · 2h

🔗 Connecting React Frontend with Backend API

In development, proxy or CORS. CORS (Cross-Origin Resource Sharing): configure Express with cors middleware to allow frontend origin. Fetch data from React: use useEffect to call API, store response in state. Handle loading and error states. For forms, send POST/PUT requests with JSON body and authorization headers.
// React fetch with token
const fetchProfile = async () => {
const token = localStorage.getItem('token');
const res = await fetch('/api/users/me', {
headers: { 'Authorization': `Bearer ${token}` }
});
const data = await res.json();
setUser(data);
};

📦 Deployment & CI/CD Basics

Frontend: build static files (npm run build) and deploy to Netlify or Vercel (automatic from Git). Backend: deploy Node/Express on Render, Railway, or AWS EC2. Set environment variables. Database: use cloud services (MongoDB Atlas, Neon.tech for PostgreSQL). CI/CD: connect GitHub to deployment platform — push to main branch triggers rebuild and deploy.
# Example deployment commands
# Frontend (Vercel)
vercel --prod
# Backend (Render) – define start script in package.json:
"scripts": { "start": "node server.js" }

🎓 Capstone Project: Full‑Stack E‑commerce or SaaS App

Project requirements:
  • Frontend: React with responsive design, routing, state management.
  • Backend: Node/Express REST API with authentication (JWT).
  • Database: PostgreSQL or MongoDB with at least two related collections (e.g., users, products, orders).
  • Integration: frontend consumes backend API, handles auth, and displays dynamic data.
  • Deployment: live demo on Vercel/Netlify + Render/Railway.
Example ideas: e‑commerce store (product listing, cart, checkout), task management with teams, booking system, or a blog with comments. Deliverables: GitHub repository, live URL, and a 5‑minute presentation.
🏆 Evaluation criteria: code quality, functionality, UI/UX, proper use of version control, and deployment reliability.