Web Technologies

State University of Zanzibar (SUZA)

BSc Computer Science (BCS) & BITAM — Semester II, Academic Year 2025/2026

HTML · CSS · JavaScript · React · Spring Boot · Node · Django · Docker

🎯

Course Overview

This course teaches modern web application development from foundations to deployment. Students learn the full stack — HTML, CSS, JavaScript, React, REST APIs in three popular backend frameworks, databases, security, testing, performance, real-time, and DevOps — culminating in a production-grade capstone project.

A single unified course delivered jointly to BSc CS (BCS) and BITAM students. The capstone project is run by mixed BCS+BITAM teams of three.

Duration: 15 weeks (Semester II) · Contact hours: 3 lecture hrs + 2 lab hrs per week · Credits: 15

Assessment

  • Course Work — 60%
    • Practical labs (8 labs, auto-graded via GitHub Classroom): 15%
    • Homework 1 — Frontend (solo): 10%
    • Homework 2 — Full-stack CRUD (solo): 10%
    • Capstone project (mixed BCS+BITAM team of 3): 20%
    • Mid-semester test (week 8): 5%
  • Final Exam — 40%
✅

Prerequisites

Students should have completed (or have equivalent knowledge of):

  • Object-Oriented Programming — classes, inheritance, interfaces (ideally Java)
  • Programming fundamentals — variables, control flow, functions, basic data structures
  • Basic Git & command line — clone, commit, push; navigate folders
  • Basic SQL is helpful but not required (we cover what you need)
Hardware/software: A laptop able to run Node.js, JDK 21, Docker, and a modern browser (8 GB RAM minimum, 16 GB recommended). Stable internet for npm, Maven, and Docker pulls. No prior web experience required.
🎓

Learning Outcomes

By the end of this course, students will be able to:

  1. Explain the architecture of the web (HTTP, client–server, n-tier, monolith vs microservices).
  2. Apply common design patterns (MVC, REST, Repository, Observer) to web apps.
  3. Run an Agile project on GitHub using Scrum/Kanban with Projects boards.
  4. Use the cascade, specificity, and combinators correctly in CSS.
  5. Build accessible (WCAG-conformant), responsive UIs with HTML5 + CSS Flexbox + Grid.
  6. Write modern JavaScript and manipulate the DOM directly.
  7. Consume REST APIs from the browser using Fetch + async/await.
  8. Build single-page apps with React (components, state, hooks, routing).
  9. Design a relational schema and write safe, parameterised SQL.
  10. Implement REST APIs in Spring Boot (deep), Node/Express, and Django.
  11. Apply authentication (JWT) and OWASP-grade security.
  12. Write unit, integration, and E2E tests with Vitest, RTL, and Playwright.
  13. Optimise for Core Web Vitals and add real-time features (WebSockets / SSE).
  14. Containerise a multi-service app and set up CI/CD on GitHub Actions; deploy live.
📚

Lectures

#TopicWeeksNotesFormat
L1 Web Foundations 1 History, HTTP, client–server, Web 1.0/2.0/3.0 PDF
L2 Web Architecture & Design Patterns 2 n-tier, SOA & ESB, monolith vs microservices, MVC, REST, Repository, Observer, SPA/SSR/MPA PDF
L3 Agile Methodology 3 Scrum (roles, events, artefacts), Kanban, user stories, Git/GitHub workflow, GitHub Projects PDF
L4 HTML & CSS Basics 4 Semantic HTML, selectors, combinators, the cascade, specificity, inheritance, accessibility PDF
L5 CSS Layout 5 display, box model, Flexbox (with terminology), Grid, responsive design, CSS variables PDF
L6 JavaScript & the DOM 6 Modern JS, DOM, events, delegation, async/await, ES modules PDF
L7 AJAX, Fetch & REST APIs 7 HTTP verbs, JSON, Fetch, error handling, CORS, API-client patterns PDF
Mid-semester test (5%) 8 Covers Lectures 1–7
L8 Frontend Frameworks (React) 8–9 Components, JSX, useState, useEffect, props, routing · Vue/Angular/Svelte overview PDF
L9 Databases for the Web 10 SQL CRUD, joins, parameterised queries, transactions, ORMs, migrations PDF
L10 Backend REST APIs (overview) 11 10a Spring Boot · 10b Node/Express · 10c Django REST (comparison) PDF
L10a Spring Boot REST (deep dive) 11 REST foundations, URI design, status codes, @RestController, DTOs & validation, @RestControllerAdvice, RFC 7807 Problem Details PDF
L11 Authentication & Web Security 12 bcrypt, sessions vs JWT, OAuth/OIDC, OWASP Top 10, CSRF/XSS, HTTPS PDF
L12 Testing, Performance & Real-time 13 Vitest, RTL, Playwright · Core Web Vitals, caching · WebSockets & SSE PDF
L13 Deployment & DevOps 14 Docker, Compose, GitHub Actions CI/CD, Render/Fly.io, 12-Factor, observability PDF
Capstone presentations & revision 15 Team demos, peer evaluation, exam preparation
🔬

Practical Lab Sessions

📦 Submission via GitHub Classroom: Accept the invite for each lab from the course Classroom. Push commits to your assigned repo. Autograder runs on every push and your final score auto-imports to Moodle at the deadline.
LabTitleFormat
Lab 1a HTML Only: Personal Profile + About Us page (auto-graded via GitHub Classroom) TXT
Lab 1 HTML5 + CSS3: Build Your Personal Portfolio (deploy to GitHub Pages) TXT
Lab 2 JavaScript & the DOM: Interactive Todo App with localStorage TXT
Lab 3 Fetch & REST APIs: Weather Dashboard (Open-Meteo) TXT
Lab 4 React: Course Catalog SPA with routing & favourites TXT
Lab 5 SQL: Library schema, queries, transactions, injection demo TXT
Lab 6 Spring Boot REST API: Students CRUD with validation & Swagger
🟢 Start here: Beginner walkthrough · Runnable starter (3 classes, no Docker)
🔵 Production-grade: Full walkthrough · Runnable reference (DTOs, advice, Swagger, tests, Docker) 		TXT
Lab 7 Authentication: signup, login, JWT, role-based access, rate limiting TXT
Lab 8 Docker, CI/CD & Deployment: containerise, GitHub Actions, deploy live TXT
📝

Homeworks

HWTitleWeightFormat
HW 1 Frontend App: Recipe Finder (HTML + CSS + vanilla JS, no frameworks) 10% TXT
HW 2 Full-Stack CRUD: Class Attendance App (React + your choice of backend) 10% TXT
HW 3 CAPSTONE: Production-Ready Web App (team of 3, Agile + DevOps) 30% TXT
📁

Project Information — Capstone Document Templates

Download these four templates for Homework 3 (the Capstone). Use them in order — each one builds on the previous. Fill them in as a team, then submit through Moodle at each milestone.

#DocumentWhen to submitDownload
1 Concept Note — the one-page idea: problem, users, value End of Week 3 01_Concept_Note_Template.docx
2 Project Proposal — scope, deliverables, team, plan End of Week 5 02_Project_Proposal_Template.docx
3 SRS — Software Requirements Specification (functional & non-functional) End of Week 8 03_SRS_Template.docx
4 SDD — Software Design Document (architecture, components, data, UI) End of Week 11 04_SDD_Template.docx

📥 Tip: right-click any link → Save link as… to download. Each template has placeholder text in [square brackets] — replace it with your project's content.

💡

Code Examples

Starter HTML

Semantic HTML5 page with header, nav, main, sections, form, footer.

HTML

Starter CSS

CSS variables, Flexbox header, responsive Grid, mobile-first media queries.

CSS

Starter JS

Form handling, FormData, smooth-scroll nav.

JS

Fetch Demo

Async/await against the Open-Meteo API with error handling.

JS

Express Students API

Full CRUD with Node, Express, and SQLite — runnable in <1 min.

JS

Spring Boot Controller

Layered REST controller with validation and proper status codes.

JAVA

Django REST Views

Model + serializer + ViewSet + router — full CRUD in ~15 lines.

PY

docker-compose.yml

3-tier stack: web (nginx) + api + Postgres with healthcheck.

YAML

GitHub Actions CI

Workflow that tests frontend + backend, then publishes Docker image.

YAML
📚

Resources for Students

Cheatsheets, starter templates, setup instructions, and curated external links for every part of the course. See the full Resources page → for everything; quick picks below.

💻 Setup Guide

Install Node, Git, JDK 21, Python, Docker. macOS / Windows / Linux steps.

MD

🪟 Windows: JDK + Maven + JAVA_HOME

The Spring Boot lab blocker — fixes the JAVA_HOME / PATH trap for Lab 6 onward.

MD

📏 Code Style Guide

What graders look for: HTML, CSS, JS, React, Java, Python, Git conventions.

MD

📋 HTML Cheatsheet

Skeleton, semantic elements, forms, media, accessibility quick wins.

MD

📋 CSS Cheatsheet

Selectors, cascade, box model, Flexbox, Grid, responsive design.

MD

📋 JavaScript Cheatsheet

ES2015+, DOM, events, async/await, modules — everything for L6 & Lab 2.

MD

📋 HTTP & REST Cheatsheet

Methods, status codes, REST design, CORS, Fetch usage.

MD

📋 React Cheatsheet

Components, props, useState, useEffect, routing, custom hooks.

MD

📋 SQL Cheatsheet

DDL, CRUD, joins, aggregation, transactions, parameterised queries.

MD

📋 Docker Cheatsheet

Daily commands, Dockerfile recipes, multi-service Compose stack.

MD

📋 Git & GitHub Cheatsheet

Daily workflow, branches, conflicts, GitHub Classroom flow.

MD

📦 Starter Templates

HTML page, CSS reset, JS skeleton, .gitignore, README — drop-in for any lab.

HTML

📖 Books, Courses & Videos

Eloquent JS, Full Stack Open, MDN, Traversy, Fireship — the full curated list.

List

👉 Open the full Resources page for external links (MDN, OWASP, Spring guides, Docker docs, Postman, Vitest, Playwright, and more) organised by lecture topic.

📖

Course Topics

  • ▸ Web architecture & HTTP
  • ▸ n-Tier, monolith vs microservices, SPA/SSR
  • ▸ MVC, REST, Repository, Observer patterns
  • ▸ Agile, Scrum, Kanban, GitHub Projects
  • ▸ Semantic HTML5 & accessibility (WCAG)
  • ▸ CSS cascade, specificity, inheritance
  • ▸ CSS combinators & selectors
  • ▸ Box model, Flexbox, Grid, responsive design
  • ▸ Modern JavaScript & the DOM
  • ▸ Fetch API & consuming REST
  • ▸ React (hooks, routing)
  • ▸ SQL & ORMs (Prisma, JPA, Django)
  • ▸ Spring Boot, Express, Django REST
  • ▸ Authentication: bcrypt, JWT, OAuth
  • ▸ OWASP Top 10 mitigations
  • ▸ Testing: Vitest, RTL, Playwright
  • ▸ Performance: Core Web Vitals, caching
  • ▸ Real-time: WebSockets, SSE
  • ▸ Docker & Docker Compose
  • ▸ GitHub Actions CI/CD
  • ▸ Deployment to Render / Fly.io
  • ▸ 12-Factor & observability

State University of Zanzibar (SUZA)

Last updated: April 2026