development

The Complete 2025 Web Development Bootcamp

Master full-stack web development with a comprehensive course covering HTML, CSS, JavaScript, React, Node.js, Express, MongoDB, and more. Learn how to build responsive, interactive, and scalable web applications, preparing you for a career in web development.

The Complete 2025 Web Development Bootcamp
Duration5 months
Lessons150
LevelBeginner
ModeLive Online

What you will learn

  • HTML 5
  • CSS 3
  • Flexbox
  • Grid
  • Bootstrap 5
  • Javascript ES6
  • DOM Manipulation
  • jQuery
  • Bash Command Line
  • Git, GitHub and Version Control
  • Node.js
  • NPM
  • Express.js
  • EJS
  • REST
  • APIs
  • SQL
  • PostgreSQL
  • Authentication
  • React.js
  • React Hooks
  • Web Design
  • Deployment with GitHub Pages
  • Web3 Development on the Internet Computer
  • Blockchain technology

Corporate training outcomes

  • Completion certificate
  • Practical assignments and project work
  • Mentor support and progress tracking
  • Custom batch options for teams
  • Yes

Requirements

  • Laptop with good internet
  • No prior experience needed
  • Willing to dedicate time
  • Passionate about web development
  • Curious about creating dynamic websites and applications

Curriculum

HTML Basics
  • Introduction
  • What is HTML
  • HTML Heading Elements
  • HTML Paragraph Elements
  • How to Ace this Course
Intermediate HTML
  • The List Element
  • Nesting and Indentation
  • Anchor Elements
  • Image Elements
  • [Project] Birthday Invite
  • Get Access to the Monthly App Brewery Newsletter
Multi Page Website
  • Computer File Paths
  • What are Webpages?
  • The HTML Boilerplate
  • [Project] Portfolio Website
  • How to Host Your Website for Free with GitHub
  • First Capstone Project
  • Instructions for Capstone Project 1 - Online Resume
Intro to CSS
  • Why do we need CSS?
  • How to add CSS
  • CSS Quiz
  • CSS Selectors
  • [Project] Colour Vocab Website
  • Join the Student Community
Styling Websites with CSS
  • CSS Colours
  • Font Properties
  • Inspecting CSS
  • The CSS Box Model - Margin, Padding and Border
  • [Project] Motivational Poster Website
Intermediate CSS
  • Combining CSS Selectors
  • CSS Positioning
  • [Project] CSS Flag
Advanced CSS
  • CSS Display
  • CSS Float
  • Responsive Website
  • Media Queries
  • [Project] Web Design Agency Website
FlexBox
  • Flexbox Layouts
  • Flex Direction
  • Flexbox Sizing
  • Responsive Design with Flexbox
  • [Project] Pricing Table
Grid
  • CSS Grid Layout
  • Grid Sizing and Placement
  • Advanced Grid Techniques
Bootstrap
  • Introduction to Bootstrap
  • Bootstrap Grid System
  • Using Bootstrap Components
Fundamentals of Web and UI/UX Design
  • Introduction to Web Design
  • Understanding Colour Theory
  • Typography and Font Selection
  • UI Design Principles
  • User Experience (UX) Design
  • Web Design in Practice
Project 2
  • Project Instructions
Introduction to JS
  • Introduction to JavaScript
  • JavaScript Alerts
  • Understanding Data Types
  • JavaScript Variables
  • Naming Conventions for Variables
  • String Operations
  • Arithmetic in JavaScript
  • Functions - Part 1: Creation & Calling
  • Functions - Part 2: Parameters & Arguments
  • Functions - Part 3: Return Values
  • JavaScript Quiz
Intermediate JS
  • Random Number Generation in JavaScript
  • Control Statements: If-Else & Logic
  • Comparators and Equality
  • Working with Arrays in JavaScript
  • Loops: While and For
  • Code Challenges: Leap Year, Who's Buying Lunch, Fibonacci
  • Advanced BMI Calculator with IF/ELSE
Document Object Model(DOM)
  • Adding JavaScript to Websites
  • Introduction to the Document Object Model (DOM)
  • Selecting and Manipulating HTML Elements with JavaScript
  • Separation of Concerns in Web Development
  • Text and Attribute Manipulation with JavaScript
Project 3
  • Instruction for Project 3
Advanced JavaScript and DOM
  • Downloading Files and Setting Up
  • Adding Event Listeners to Buttons
  • Higher Order Functions in JavaScript
  • Playing Sounds and Using Switch Statements
  • JavaScript Objects and Methods
  • Handling Key Presses with Event Listeners
  • Understanding Callbacks and Adding Animations
Jquery
  • Introduction to jQuery
  • Incorporating jQuery into Websites
  • Minification for File Size Reduction
  • Selecting and Manipulating Elements with jQuery
  • Adding Event Listeners and Animations with jQuery
Git
  • Installing Git Bash on Windows
  • Understanding the Command Line
  • Command Line Navigation and Techniques
  • File Operations via the Command Line
Backend Development
  • Introduction to Backend Web Development
  • Backend Tools and Technologies Overview
Node.js
  • Introduction to Node.js
  • Installing Node.js on Mac and Windows
  • Using Node.js and Native Modules
  • The NPM Package Manager
  • [Project] QR Code Generator
Express.js and Node.js
  • Introduction to Express
  • Creating a Server with Express
  • Understanding HTTP Requests
  • Using Postman for Testing
  • Introduction to Middlewares
  • Custom Middlewares
  • [Project] Secrets Access
EJS
  • Introduction to EJS
  • EJS Tags and Syntax
  • Passing Data to EJS Templates
  • Using Partials and Layouts in EJS
  • [Project] Band Generator
Project 3
  • Project 3 Instructions
Git,Github,Version Control
  • Introduction to Version Control and Git
  • Using Git with the Command Line
  • Working with GitHub and Remote Repositories
  • Gitignore and Cloning
  • Branching and Merging in Git
  • Forking and Pull Requests
API
  • Introduction to APIs
  • Structuring API Requests
  • Understanding JSON
  • Making Server-Side API Requests with Axios
  • API Authentication
  • REST APIs
  • [Project] Secrets
Project 4
  • Project 4 Instructions
Building and Managing APIs
  • Building Your Own APIs
  • Creating GET, POST, PUT, and PATCH Routes
  • Creating the DELETE Route
  • [Project] Blog API
Databases
  • SQL VS noSQL
SQL
  • SQL Basics: CREATE Table and INSERT Data
  • SQL Commands: SELECT, WHERE, and READ
  • Updating Values and Adding Columns in SQL
  • DELETE Command in SQL
  • Understanding SQL Relationships, Foreign Keys, and Joins
PostgreSQL
  • Introduction to PostgreSQL
  • Installing PostgreSQL and pgAdmin
  • Using Keys, Postgres Types, and Keywords
  • Creating and Reading Data in PostgreSQL
  • Querying with SELECT, WHERE, LIKE
  • UNIQUE and NOT NULL Constraints
  • Travel Tracker Project - Part 1 to 3
  • Relationships in SQL: One-to-One, One-to-Many, Many-to-Many
  • Updating and Deleting Data in PostgreSQL
  • [Project] Permalist
Project 5
  • Project 5 Instructions
Authentication and Security in Web Development
  • Introduction to Authentication
  • Registering Users with Email and Password
  • Encryption, Hashing, and Salting Passwords
  • Managing Cookies, Sessions, and Environment Variables
  • OAuth Authentication with Google
  • [Project] Secrets Submission App
react.js
  • What is React?
  • What we will make in this React module
  • Introduction to Code Sandbox and the Structure of the Module
  • [Optional] Local Development Setup
  • Introduction to JSX and Babel
  • JSX Code Practice
  • Javascript Expressions in JSX & ES6 Template Literals
  • Javascript Expressions in JSX Practice
  • JSX Attributes & Styling React Elements
  • Inline Styling for React Elements
  • React Styling Practice
  • React Components
  • React Components Practice
  • Javascript ES6 - Import, Export and Modules
  • Javascript ES6 Import, Export and Modules Practice
  • Keeper App Project - Part 1 Challenge
  • Keeper App Part 1 Solution
  • React Props
  • React Props Practice
  • React DevTools
  • Mapping Data to Components
  • Mapping Data to Components Practice
  • Javascript ES6 Map/Filter/Reduce
  • Javascript ES6 Arrow functions
  • Keeper App Project - Part 2
  • React Conditional Rendering with the Ternary Operator & AND Operator
  • Conditional Rendering Practice
  • State in React - Declarative vs. Imperative Programming
  • React Hooks - useState
  • useState Hook Practice
  • Javascript ES6 Object & Array Destructuring
  • Javascript ES6 Destructuring Challenge Solution
  • Event Handling in React
  • React Forms
  • Class Components vs. Functional Components
  • Changing Complex State
  • Changing Complex State Practice
  • Javascript ES6 Spread Operator
  • Javascript ES6 Spread Operator Practice
  • Managing a Component Tree
  • Managing a Component Tree Practice
  • Keeper App Project - Part 3
  • Note about the Next Lesson - Packages and Imports
  • React Dependencies & Styling the Keeper App
Introduction to Web3 and Blockchain Development
  • What is Web3?
  • How Blockchain Technology Powers Web3
  • Understanding Decentralized Networks
  • Introduction to the Internet Computer (ICP)
  • Setting Up Web3 Development Environment on Mac
  • Setting Up Web3 Development Environment on Windows
  • Key Concepts in Web3 Development
  • Exploring the Benefits of Web3 and Blockchain
  • How Smart Contracts Work
  • Understanding Web3 Wallets and Transactions
  • Building Your First Web3 Application
  • Security Considerations in Web3 Development
Project 6
  • Project 6 Instructions
Working with ICP and Deploying on the Internet Computer Blockchain
  • What are Cycles and the ICP Token?
  • Understanding the Role of Cycles in the ICP Network
  • How to Claim Free Cycles from Dfinity
  • Converting ICP into Cycles for Network Usage
  • How to Deploy Your Application to the ICP Network
  • Deploying a Static Website to the ICP Blockchain for Hosting
  • The Process of Interacting with ICP Blockchain
  • Managing Cycles and ICP Token for Cost Efficiency
Integrating React with DFX and Managing Canister Data
  • How to Configure a DFX Created Project to Use React
  • Storing Data on a Canister
  • Retrieving Data from a Canister
  • Deleting Data and Ensuring Persistence
  • Integrating React with Canister Data
  • Best Practices for Data Management in Web3 Development
Final Project
  • Final Project Overview
  • Discussions
Conclusion
  • what is next?