Explore web development, one topic at a time.
Discover web development from HTML, CSS and JavaScript to modern frameworks, backend, full-stack architecture, security, deployment and emerging technologies. Choose a topic to explore its course outline and lessons as they become available.
Web Development topics and courses
Search the directory or filter by category to find a subject.
Introduction to Web Development
Understand what web development is and the roles involved in building for the web.
How the Internet and World Wide Web Work
Learn the infrastructure and protocols that power the web.
Websites, Web Pages and Web Applications
Distinguish static pages from interactive web applications.
Client-Server Architecture
Understand how browsers and servers communicate to deliver web content.
Domain Names and DNS
Map human-readable names to IP addresses with the Domain Name System.
Web Hosting and Web Servers
Store and serve website files so users can access them online.
HTTP and HTTPS Fundamentals
Master the protocol that transfers data between clients and servers.
Frontend vs Backend Development
Compare client-side and server-side roles in building web applications.
Static vs Dynamic Websites
Understand when content is fixed and when it is generated on the fly.
Responsive Web Design Fundamentals
Build sites that adapt cleanly to different screen sizes and devices.
Web Browsers and Developer Tools
Use browser tools to inspect, debug and optimise web pages.
Code Editors and Development Environments
Set up an efficient environment for writing and organising code.
Git and Version Control Fundamentals
Track changes and collaborate using Git version control.
GitHub and Repository Management
Host projects, collaborate and manage code with GitHub.
Web Development Workflow and Best Practices
Adopt a productive, professional process for building web projects.
HTML Fundamentals and Document Structure
Create the basic skeleton of every web page with HTML.
HTML Elements, Tags and Attributes
Use tags and attributes to structure and describe content.
Headings, Paragraphs and Text Formatting
Organise and style text content with semantic HTML elements.
Links and Navigation
Connect pages and create clear navigation structures.
Images, Audio and Video in HTML
Embed and control multimedia content on web pages.
Lists and Tables
Present structured information with lists and tabular data.
Forms and Input Elements
Collect user input with forms and a variety of controls.
Semantic HTML
Use meaningful elements that describe the purpose of content.
HTML Metadata and SEO Basics
Help search engines and browsers understand your pages.
Accessibility Fundamentals in HTML
Build pages that work for users of all abilities.
CSS Fundamentals and Selectors
Apply styles to HTML elements with CSS rules and selectors.
Colors, Backgrounds and Typography
Style text and surfaces with colours, backgrounds and fonts.
CSS Box Model
Understand how every element is laid out as a rectangular box.
Margins, Padding and Borders
Control spacing and outlines around content.
Display and Positioning
Control how elements are placed and flow on the page.
Flexbox Layout
Create flexible one-dimensional layouts with Flexbox.
CSS Grid Layout
Build powerful two-dimensional page layouts with Grid.
Responsive Design and Media Queries
Adapt styles to different viewport sizes and devices.
Mobile-First Design
Design for small screens first and progressively enhance for larger ones.
CSS Units and Variables
Use flexible units and custom properties for maintainable styles.
Pseudo-Classes and Pseudo-Elements
Style elements based on state or create decorative content.
Transitions and Transformations
Add smooth motion and visual effects with CSS transitions and transforms.
CSS Animations
Create multi-step animations with keyframes and animation properties.
CSS Architecture and Maintainable Styles
Organise styles so they scale cleanly across large projects.
Tailwind CSS and Utility-First Styling
Build interfaces quickly with utility classes instead of custom CSS.
JavaScript Fundamentals
Add interactivity and logic to web pages with JavaScript.
Variables, Data Types and Operators
Store and manipulate values with JavaScript’s core types.
Conditions and Loops
Control program flow with decision-making and repetition.
Functions and Scope
Write reusable blocks of code and understand variable visibility.
Arrays and Objects
Work with collections of data using arrays and objects.
DOM Manipulation
Select and change HTML elements dynamically with JavaScript.
Events and Event Handling
Respond to user actions such as clicks, typing and form submission.
Form Validation
Validate user input before it is sent to the server.
Modern JavaScript (ES6+)
Use contemporary language features that make code cleaner and safer.
Destructuring, Spread and Rest Operators
Unpack and combine values elegantly with modern syntax.
Modules and Code Organization
Split code into reusable modules with import and export.
Asynchronous JavaScript
Handle operations that take time without blocking the main thread.
Promises and Async/Await
Write clean asynchronous code with promises and async functions.
Fetch API and HTTP Requests
Communicate with servers and load data using the Fetch API.
Browser Storage: LocalStorage and SessionStorage
Persist data on the client between page loads and sessions.
Frontend Frameworks and Libraries
Get an overview of modern tools for building complex UIs.
React Fundamentals
Build user interfaces with the popular React library.
Components, Props and State
Compose UIs from reusable components that manage their own data.
React Hooks
Use hooks to add state and side effects to function components.
React Routing
Create multi-page experiences within a single-page application.
State Management Fundamentals
Manage application state as your React app grows in complexity.
TypeScript for Frontend Development
Add static types to JavaScript for safer, more maintainable code.
Next.js Fundamentals
Build production-ready React applications with the Next.js framework.
Server-Side Rendering (SSR)
Render pages on the server for better SEO and faster first paint.
Static Site Generation (SSG)
Pre-render pages at build time for speed and scalability.
Vue.js Fundamentals
Build reactive interfaces with the progressive Vue.js framework.
Angular Fundamentals
Create structured single-page applications with Angular.
Frontend Testing and Component Testing
Write tests that keep UI components reliable as the app evolves.
Backend Development Fundamentals
Understand the server-side responsibilities of a web application.
Node.js Fundamentals
Run JavaScript on the server with the Node.js runtime.
Express.js and Backend Routing
Build web servers and define routes with Express.js.
RESTful API Design
Design clean, predictable APIs following REST principles.
GraphQL Fundamentals
Query exactly the data you need with GraphQL APIs.
Authentication and Authorization
Verify users and control what they can access on the server.
Cookies, Sessions and JWT
Maintain user identity across requests with sessions or tokens.
SQL Fundamentals for Web Applications
Query and manage relational data used by web apps.
Database Design and Relationships
Model data with tables, keys and relationships that scale.
PostgreSQL and MySQL
Work with two of the most popular open-source relational databases.
NoSQL Databases and MongoDB
Store flexible, document-oriented data with MongoDB.
CRUD Operations
Implement create, read, update and delete functionality for resources.
File Uploads and Media Storage
Accept and store user-uploaded files and media securely.
Server-Side Validation and Error Handling
Validate input on the server and return clear error responses.
Full-Stack Application Architecture
Design systems that connect frontend, backend and data layers.
Connecting Frontend and Backend
Integrate the client interface with server APIs and data.
Web Application Security Fundamentals
Protect applications against the most common web threats.
Cross-Site Scripting (XSS) Prevention
Stop attackers from injecting malicious scripts into pages.
SQL Injection Prevention
Keep databases safe from malicious query manipulation.
Cross-Site Request Forgery (CSRF) Protection
Prevent unauthorised actions performed on behalf of logged-in users.
Content Security Policy (CSP)
Restrict what resources a page can load to reduce attack surface.
Web Performance Optimization
Make pages load faster and feel more responsive.
Caching and Content Delivery Networks (CDNs)
Serve content quickly from locations close to users.
Web Accessibility and WCAG Principles
Ensure sites are usable by people with diverse abilities.
Website Deployment and Hosting
Publish your site so it is available to users on the internet.
CI/CD for Web Applications
Automate testing and deployment with continuous integration pipelines.
Cloud Platforms for Web Development
Deploy and scale applications using modern cloud providers.
Docker and Containerization Basics
Package applications and their dependencies into portable containers.
Progressive Web Apps (PWAs)
Build web apps that feel native with offline support and installability.
WebSockets and Real-Time Applications
Enable live, two-way communication between client and server.
AI Integration and AI-Powered Web Applications
Add intelligent features to web apps using modern AI services.
Web Development Capstone Project and Portfolio
Build a complete project and present your skills in a professional portfolio.
Choose a category. Build your web development skills step by step.
This directory organises web development from fundamentals and HTML/CSS through JavaScript, frameworks, backend, full-stack security, deployment and emerging technologies. Each topic can have its own course overview, chapter pages, examples, and practice questions. Some course pages still need to be created.