Courses / Web development

Full Stack Development

Build web applications with HTML, CSS, TypeScript, React and Next.js, then connect APIs, databases and AI-powered features.

Apply for this course View curriculum ↓

Complete the course application form on Google Forms.

Discipline: Web development
Curriculum: 7 units

01 / COURSE OVERVIEW

What this course covers.

Explore the full-stack ecosystem, from accessible, responsive interfaces to server-side applications and data management. The syllabus covers React and Next.js, REST and GraphQL APIs, SQL and NoSQL databases, authentication, security, Docker and CI/CD. Apply these skills through practical experiments and a deployable full-stack capstone with responsible AI integration.

02 / WHAT YOU WILL LEARN

Build your understanding.

01
Build accessible, responsive interfaces with HTML5, CSS3, JavaScript and TypeScript.
02
Develop reusable React interfaces and Next.js applications using the App Router.
03
Create Node.js APIs with REST and GraphQL, and work with SQL and NoSQL databases.
04
Apply authentication, authorisation, security controls, Docker and CI/CD workflows.
05
Integrate an AI-assisted feature and demonstrate a deployable full-stack capstone.

03 / THE CURRICULUM

Inside the course.

Explore the units and topics in their original curriculum order.

Unit I

MODERN WEB ARCHITECTURE AND FRONT-END FOUNDATIONS

Topics covered

Web evolution and the full-stack model
client-server architecture
HTTP/HTTPS
DNS
browsers and rendering
accessibility and responsive design principles
semantic HTML5
modern CSS3 including layout, Flexbox, Grid, responsive units, media queries, and design tokens
JavaScript fundamentals, ES2023+ syntax, modules, asynchronous programming, promises, fetch, and error handling.

Unit II

TYPESCRIPT, REACT, AND COMPONENT-BASED UI

Topics covered

TypeScript types, interfaces, generics, narrowing, and configuration
React components, JSX, props, state, hooks, forms, events, conditional rendering, lists, composition, reusable component patterns, client-side routing, data fetching, testing fundamentals, and accessibility in component-based interfaces.

Unit III

NEXT.JS AND FULL-STACK FRONT-END DEVELOPMENT

Topics covered

Next.js project structure
App Router
layouts and nested routes
server and client components
data fetching and caching
loading and error states
forms and server actions
metadata and SEO
image and font optimisation
environment configuration
deployment considerations
and performance patterns for production web applications.

Unit IV

NODE.JS, API DESIGN, REST, AND GRAPHQL

Topics covered

Node.js runtime and package management
asynchronous server programming
Express or equivalent server frameworks
middleware
validation
logging
error handling
REST resource design, status codes, pagination, filtering, and versioning
GraphQL schemas, queries, mutations, resolvers, and error handling
API documentation and testing.

Unit V

DATA MANAGEMENT: SQL AND NOSQL

Topics covered

Relational modelling
SQL schemas, keys, joins, constraints, indexes, transactions, and migrations
PostgreSQL or equivalent database workflows
NoSQL document modelling
MongoDB or equivalent document databases
choosing SQL versus NoSQL
data access layers
connection management
validation
backup considerations
and performance basics.

Unit VI

AUTHENTICATION, SECURITY, AND RELIABLE DELIVERY

Topics covered

Identity and access management
sessions, cookies, tokens, and OAuth concepts
role-based access control
password storage
input validation
protection against XSS, CSRF, injection, broken access control, and insecure dependencies
secrets management
security headers
Docker images and containers
environment configuration
automated testing
CI/CD pipelines
deployment checks
monitoring basics
and rollback strategy.

Unit VII

AI/LLM INTEGRATION AND CAPSTONE PRACTICE

Topics covered

Patterns for integrating AI and LLM services into web applications
prompt design
structured outputs
streaming responses
tool and function calling
retrieval-augmented generation concepts
privacy, safety, cost, latency, and evaluation
building an AI-assisted feature with a secure API boundary
full-stack integration
documentation
code review
and capstone demonstration.

04 / PRACTICAL LEARNING

Put it into practice.

Practical experiments

Build an accessible semantic HTML5 profile and responsive landing page using CSS3.
Implement a TypeScript utility library with typed validation and asynchronous API calls.
Develop a React single-page interface with reusable components, forms, routing, and client-side state.
Create a Next.js application with layouts, server/client components, data fetching, metadata, and a protected route.
Build a Node.js REST API with validation, structured errors, pagination, and automated endpoint tests.
Implement a GraphQL API with a schema, queries, mutations, resolvers, and input validation.
Design and access a SQL database using migrations, joins, transactions, and an application data-access layer.
Build a NoSQL document workflow and compare its modelling choices with the SQL implementation.
Add authentication and role-based authorisation, then apply security controls against common web vulnerabilities.
Containerise the application with Docker and create a basic CI/CD workflow for automated test and build checks.
Integrate an AI/LLM-powered feature with structured output, streaming, safeguards, and an evaluation checklist.
Complete and demonstrate a deployable full-stack capstone application.

05 / TOOLS & TECHNOLOGIES