Module Overview

Credits: 20 credits | Level: Undergraduate | Focus: Full-Stack Web Application Development

This module provides a comprehensive introduction to full-stack web development, combining essential frontend and backend technologies. Students will gain hands-on experience with HTML5, CSS3, JavaScript, Python, and Django, while exploring modern frameworks such as React and Django Rest Framework. Each slideshow is designed for a 3-hour session with interactive tasks.

Module Introduction & Web Architecture

Module overview, assessment breakdown, tooling setup, and web architecture fundamentals

25 slides • 3 hours • 2 tasks

HTML5 & Semantic Structure

Semantic HTML, accessibility, SEO, ARIA roles, and structure validation

25 slides • 3 hours • 2 tasks

CSS3 & Responsive Design

Flexbox, Grid, media queries, and responsive design principles

25 slides • 3 hours • 2 tasks

JavaScript Fundamentals

DOM manipulation, events, ES6 syntax, functions, and debugging tools

25 slides • 3 hours • 2 tasks

Asynchronous JavaScript & APIs

Fetch API, Promises, async/await, and API integration patterns

25 slides • 3 hours • 2 tasks

Django Basics

Django project setup, views, templates, URL routing, and static files

25 slides • 3 hours • 2 tasks

Django ORM & CRUD

Models, migrations, admin interface, CRUD operations, and form handling

25 slides • 3 hours • 2 tasks

Django REST Framework

Serializers, viewsets, routers, authentication, and API testing

25 slides • 3 hours • 2 tasks

React & State Management

JSX, components, props/state, lifecycle methods, and Redux basics

25 slides • 3 hours • 2 tasks

Web App Critique

Evaluating usability, performance, accessibility, and standards compliance

25 slides • 3 hours • 2 tasks

Comparative Critique

Comparing frameworks, design decisions, scalability, and maintainability

25 slides • 3 hours • 2 tasks

Project Finalisation

Testing strategies, documentation, deployment, and presentation tips

25 slides • 3 hours • 2 tasks

Assessment Overview

CMM721: Web Application Development has two assessment components: a portfolio of exercises and case studies (60%), and a final project (40%).

Portfolio - Exercises and Case Studies (60%)

Project Type: Portfolio of weekly exercises and case study critiques

Requirements: Weekly practical exercises and critical evaluations of existing web applications

Focus: Technical proficiency, design awareness, and critical analysis skills

Due: Weekly submissions throughout the module

Final Project - Web Application (40%)

Project Type: Individual full-stack web application

Requirements: Complete web application using technologies covered in the module

Focus: Technical implementation, design quality, and professional standards

Due: End of module with presentation

Project Requirements

Technical Stack: HTML5, CSS3, JavaScript, Python/Django, and React (minimum requirements)
Functionality: Full-stack application with database integration and API endpoints
Design Requirements: Responsive design, modern UI/UX, accessibility compliance
Documentation: Comprehensive technical documentation and user guides
Code Quality: Well-structured, commented code following best practices
Testing: Unit tests, integration tests, and user acceptance testing
Deployment: Live deployment with proper hosting configuration

Learning Outcomes Assessed

Develop full-stack web applications using modern frameworks and technologies
Apply responsive design principles and accessibility standards
Design and implement secure API endpoints and database systems
Critically evaluate existing web applications and design decisions
Work independently to solve complex web development problems
Demonstrate professional development practices and ethical considerations
Present technical work effectively to both technical and non-technical audiences

Important Notes

Weekly Exercises: Each week includes practical exercises that contribute to your portfolio assessment.

Case Studies: Critical evaluations of existing web applications demonstrating analytical skills.

Project Scope: Students must agree on project scope with their tutor before development begins.

Professional Standards: All work should demonstrate industry-standard practices and ethical considerations.

Module Quizzes

Test your knowledge with interactive quizzes for each session. Each quiz contains questions based on the lecture content and practical exercises.