The Complete 2024 Web Development Bootcamp

About Course

Learn to code and become a full-stack web developer with this comprehensive web development bootcamp. This free course from Udemy is one of the highest rated in the history of the platform, with over 150,000 ratings and a 4.8 average.

This course is taught by the lead instructor at the App Brewery, London’s leading in-person programming bootcamp. You will learn the latest tools and technologies used by companies like Apple, Google and Netflix. You’ll get step-by-step video tutorials and build real-world websites and web apps. This course includes over 62 hours of HD video tutorials.

This course covers a wide range of topics, including:

* Front-End Web Development
* HTML5
* CSS3
* Flexbox
* Grid
* Bootstrap 5
* Javascript ES6
* DOM Manipulation
* jQuery
* Bash Command Line
* Git, GitHub and Version Control
* Backend Web Development
* Node.js
* NPM
* Express.js
* EJS
* REST
* APIs
* Databases
* SQL
* PostgreSQL
* Authentication
* Firebase
* React.js
* React Hooks
* Web Design
* Deployment with GitHub Pages
* Web3 Development on the Internet Computer
* Blockchain technology
* Token contract development
* NFT minting, buying and selling logic

By the end of this course, you will be able to build any website you can dream of. You’ll also build a portfolio of over 32+ websites that you can show off to any potential employer.

This free course is available from Udemy. You will also find free courses on web development from other platforms like Udacity, Coursera, MasterClass, NearPeer, and more on Theetay.

Build 16 web development projects for your portfolio, ready to apply for junior developer jobs.
Learn the latest technologies, including Javascript, React, Node and even Web3 development.
After the course you will be able to build ANY website you want.
Build fully-fledged websites and web apps for your startup or business.
Work as a freelance web developer.
Master frontend development with React
Master backend development with Node
Learn professional developer best practices.

Course Content

01 – Front-End Web Development

A Message from the Professor
001 What You’ll Get in This Course.mp4

00:00
002 Download the Course Syllabus.html

00:00
003 Download the 12 Rules to Learn to Code eBook (Latest Edition).html

00:00
004 Download the Required Software.html

00:00
005 How Does the Internet Actually Work.mp4

00:00
006 How Do Websites Actually Work.mp4

00:00
007 How to Get the Most Out of the Course.mp4

00:00
008 How to Get Help When You’re Stuck.mp4

00:00
009 Pathfinder.html

00:00
external-links.txt

00:00
Section Quiz

02 – Introduction to HTML

001 A Note About 2023 Course Updates.html

00:00
002 What is HTML.mp4

00:00
003 How to Download the Course Resources.mp4

00:00
004 HTML Heading Elements.mp4

00:00
005 HTML Paragraph Elements.mp4

00:00
006 Self Closing Tags.mp4

00:00
007 (Project) Movie Ranking.mp4

00:00
008 How to Ace this Course.mp4

00:00
external-links.txt

00:00
Section Quiz

03 – Intermediate HTML

04 – Multi-Page Websites

001 Computer File Paths.mp4

00:00
002 What are Webpages.mp4

00:00
003 The HTML Boilerplate.mp4

00:00
004 (Project) Portfolio Website.mp4

00:00
005 How to Host Your Website for Free with GitHub.mp4

00:00
006 Introduction to Capstone Projects.mp4

00:00
007 Instructions for Capstone Project 1 – Online Resume.html

00:00
external-links.txt

00:00
Section Quiz

05 – Introduction to CSS

06 – CSS Properties

07 – Intermediate CSS

08 – Advanced CSS

09 – Flexbox

10 – Grid

11 – Bootstrap

12 – Web Design School – Create a Website that People Love

13 – Capstone Project 2 – Personal Site

14 – Introduction to Javascript ES6

001 Introduction to Javascript.mp4

00:00
002 Javascript Alerts – Adding Behaviour to Websites.mp4

00:00
003 Data Types.mp4

00:00
004 Javascript Variables.mp4

00:00
005 Javascript Variables Exercise Start.mp4

00:00
006 Javascript Variables Exercise.html

00:00
007 Javascript Variables Exercise Solution.mp4

00:00
008 Naming and Naming Conventions for Javascript Variables.mp4

00:00
009 Javascript Variable Naming Quiz.html

00:00
010 String Concatenation.mp4

00:00
011 String Lengths and Retrieving the Number of Characters.mp4

00:00
012 Slicing and Extracting Parts of a String.mp4

00:00
013 Challenge Changing Casing in Text.mp4

00:00
014 Challenge Changing String Casing Solution.mp4

00:00
015 Basic Arithmetic and the Modulo Operator in Javascript.mp4

00:00
016 Increment and Decrement Expressions.mp4

00:00
017 Javascript Numbers Quiz.html

00:00
018 Functions Part 1 Creating and Calling Functions.mp4

00:00
019 Functions Part 1 Challenge – The Karel Robot.mp4

00:00
020 The Karel Chess Board Solution.html

00:00
021 A Quick Note About the Next Lesson.html

00:00
022 Functions Part 2 Parameters and Arguments.mp4

00:00
023 Life in Weeks Coding Exercise.html

00:00
024 Life in Weeks Solution.mp4

00:00
025 Functions Part 3 Outputs & Return Values.mp4

00:00
026 Challenge Create a BMI Calculator.mp4

00:00
027 BMI Calculator Challenge.html

00:00
028 Challenge BMI Calculator Solution.mp4

00:00
029 JavaScript Functions Quiz.html

00:00
030 Tip from Angela – Set Your Expectations.mp4

00:00
external-links.txt

00:00

15 – Intermediate Javascript

001 Random Number Generation in Javascript Building a Love Calculator.mp4

00:00
002 Control Statements Using If-Else Conditionals & Logic.mp4

00:00
003 Comparators and Equality.mp4

00:00
004 Combining Comparators.mp4

00:00
005 BMI Calculator Advanced (IFELSE).html

00:00
006 Introducing the Leap Year Code Challenge.mp4

00:00
007 Leap Year Challenge Exercise.html

00:00
008 Leap Year Solution.mp4

00:00
009 Collections Working with Javascript Arrays.mp4

00:00
010 Adding Elements and Intermediate Array Techniques.mp4

00:00
011 Who’s Buying Lunch Code Challenge.html

00:00
012 Who’s Buying Lunch Solution.mp4

00:00
013 Control Statements While Loops.mp4

00:00
014 Solution to the 99 Bottles Challenge.html

00:00
015 Control Statements For Loops.mp4

00:00
016 Introducing the Fibonacci Code Challenge.mp4

00:00
017 The Fibonacci Exercise.html

00:00
018 Fibonacci Solution.mp4

00:00
019 Tip from Angela – Retrieval is How You Learn.mp4

00:00
external-links.txt

00:00

16 – The Document Object Model (DOM)

001 Adding Javascript to Websites.mp4

00:00
002 Introduction to the Document Object Model (DOM).mp4

00:00
003 Solution to the DOM Challenge.html

00:00
004 Selecting HTML Elements with Javascript.mp4

00:00
005 Manipulating and Changing Styles of HTML Elements with Javascript.mp4

00:00
006 The Separation of Concerns Structure vs Style vs Behaviour.mp4

00:00
007 Text Manipulation and the Text Content Property.mp4

00:00
008 Manipulating HTML Element Attributes.mp4

00:00
009 Tip from Angela – The 20 Minute Method.mp4

00:00
external-links.txt

00:00

17 – Boss Level Challenge 1 – The Dicee Game

001 Challenge The Dicee Challenge.mp4

00:00
002 Dicee Challenge Step 0 – Download the Skeleton Project.html

00:00
003 Dicee Challenge Step 1 – Create an External Javascript File.html

00:00
004 Dicee Challenge Step 2 – Add Dice Images.html

00:00
005 Dicee Challenge Step 3 – Create a Random Number.html

00:00
006 Dicee Challenge Step 4 – Change the img to a Random Dice.html

00:00
007 Dicee Challenge Step 5 – Change both img Elements.html

00:00
008 Dicee Challenge Step 6 – Change the Title to Display a Winner.html

00:00
009 The Solution to the Dicee Challenge.mp4

00:00
010 Download the Completed Website.html

00:00
011 Tip from Angela – Learning Before you Eat.mp4

00:00
external-links.txt

00:00
Section Quiz

18 – Advanced Javascript and DOM Manipulation

001 What We’ll Make Drum Kit.mp4

00:00
002 Download the Starting Files.html

00:00
003 Adding Event Listeners to a Button.mp4

00:00
004 Higher Order Functions and Passing Functions as Arguments.mp4

00:00
005 Higher Order Function Challenge Solution.html

00:00
006 How to Play Sounds on a Website.mp4

00:00
007 A Deeper Understanding of Javascript Objects.mp4

00:00
008 How to Use Switch Statements in Javascript.mp4

00:00
009 Objects, their Methods and the Dot Notation.mp4

00:00
010 A Quick Note About the Next Lesson.html

00:00
011 Using Keyboard Event Listeners to Check for Key Presses.mp4

00:00
012 Understanding Callbacks and How to Respond to Events.mp4

00:00
013 Adding Animation to Websites.mp4

00:00
014 Download the Completed Website.html

00:00
015 Tip from Angela – Dealing with Lack of Progress.mp4

00:00
external-links.txt

00:00

19 – jQuery

001 What is jQuery.mp4

00:00
002 How to Incorporate jQuery into Websites.mp4

00:00
003 How Minification Works to Reduce File Size.mp4

00:00
004 Selecting Elements with jQuery.mp4

00:00
005 Manipulating Styles with jQuery.mp4

00:00
006 Manipulating Text with jQuery.mp4

00:00
007 Manipulating Attributes with jQuery.mp4

00:00
008 Adding Event Listeners with jQuery.mp4

00:00
009 Adding and Removing Elements with jQuery.mp4

00:00
010 Website Animations with jQuery.mp4

00:00
011 Tip from Angela – Mixing Knowledge.mp4

00:00
external-links.txt

00:00

20 – Boss Level Challenge 2 – The Simon Game

001 What You’ll Make The Simon Game.mp4

00:00
002 Play the Game.html

00:00
003 Step 0 – Download the Starting Files.html

00:00
004 Step 1 – Add Javascript and jQuery.html

00:00
005 Step 1 – Answer.html

00:00
006 Step 2 – Create A New Pattern.html

00:00
007 Step 2 – Answer.html

00:00
008 Step 3 – Show the Sequence to the User with Animations and Sounds.html

00:00
009 Step 3 – Answer.html

00:00
010 Step 4 – Check Which Button is Pressed.html

00:00
011 Step 4 – Answer.html

00:00
012 Step 5 – Add Sounds to Button Clicks.html

00:00
013 Step 5 – Answer.html

00:00
014 Step 6 – Add Animations to User Clicks.html

00:00
015 Step 6 – Answer.html

00:00
016 Step 7 – Start the Game.html

00:00
017 Step 7 – Answer.html

00:00
018 Step 8 – Check the User’s Answer Against the Game Sequence8.html

00:00
019 Step 8 – Answer.html

00:00
020 Step 9 – Game Over.html

00:00
021 Step 9 – Answer.html

00:00
022 Step 10 – Restart the Game.html

00:00
023 Step 10 – Answer.html

00:00
024 Download the Completed Project Code.html

00:00
025 Tip from Angela – Dealing with Frustration.mp4

00:00
external-links.txt

00:00

21 – The Unix Command Line

22 – Backend Web Development

23 – Node.js

24 – Express.js with Node.js

25 – EJS

26 – Capstone Project – Create a Blog web application

27 – Git, Github and Version Control

001 Introduction to Version Control and Git.mp4

00:00
002 Version Control Using Git and the Command Line.mp4

00:00
003 GitHub and Remote Repositories.mp4

00:00
004 Gitignore.mp4

00:00
005 Cloning.mp4

00:00
006 Branching and Merging.mp4

00:00
007 Optional Git Challenge.html

00:00
008 Forking and Pull Requests.mp4

00:00
009 Tip from Angela – Spaced Repetition.mp4

00:00
external-links.txt

00:00
Section Quiz

28 – Application Programming Interfaces (APIs)

001 Introduction to APIs.mp4

00:00
002 Structuring API Requests.mp4

00:00
003 What is JSON.mp4

00:00
004 Making Server-Side API Requests with Axios.mp4

00:00
005 API Authentication.mp4

00:00
006 REST APIs.mp4

00:00
007 Secrets Project.mp4

00:00
008 Tip from Angela – Use Accountability in your Favour.mp4

00:00
Section Quiz

29 – Capstone Project – Use a Public API

30 – Build Your Own API

31 – Databases

32 – SQL

33 – PostgreSQL

001 Introduction to Postgres.mp4

00:00
002 How to Install PostgreSQL and pgAdmin.html

00:00
003 Understand how to use keys, Postgres types and keywords.mp4

00:00
004 Flag Emojis on Windows.html

00:00
005 Use pgAdmin to CREATE a TABLE.mp4

00:00
006 READ data from a Postgres database.mp4

00:00
007 Query data using SELECT, WHERE, and LIKE.mp4

00:00
008 UNIQUE and NOT NULL Travel Tracker Part 1.mp4

00:00
009 INSERT and add Data Travel Tracker Part 2.mp4

00:00
010 Travel Tracker Part 3.mp4

00:00
011 One to One Relationships & Inner Joins.mp4

00:00
012 One to Many Relationships.mp4

00:00
013 Many to Many Relationships & Aliases.mp4

00:00
014 The Family Travel Tracker.mp4

00:00
015 How to update and delete data & tables.mp4

00:00
016 Permalist Project.mp4

00:00
017 Tip from Angela – Daily Routines.mp4

00:00
Section Quiz

34 – Capstone Project – Book Notes

35 – Authentication and Security – Handling Credentials & Designing a Secure Login

001 Introduction to Authentication.mp4

00:00
002 Level 1 – Registering Users with Email and Password.mp4

00:00
003 Level 2 – Encryption and Hashing.mp4

00:00
004 How to Hack Passwords.mp4

00:00
005 Level 3 – How to Salt Passwords for Improved Encryption.mp4

00:00
006 Managing Cookies and Sessions.mp4

00:00
007 Level 5 – Hide your Secrets with Environment Variables.mp4

00:00
008 Set up your Google OAuth Credentials.html

00:00
009 Level 6 – OAuth Implement Sign In with Google.mp4

00:00
010 Finish the app let users submit secrets.mp4

00:00
011 Tip from Angela – How to Work as a Freelancer.mp4

00:00
external-links.txt

00:00
Section Quiz

36 – React.js

001 What is React.mp4

00:00
002 What we will make in this React module.mp4

00:00
003 Introduction to Code Sandbox and the Structure of the Module.mp4

00:00
004 Introduction to JSX and Babel.mp4

00:00
005 JSX Code Practice.mp4

00:00
006 Javascript Expressions in JSX & ES6 Template Literals.mp4

00:00
007 Javascript Expressions in JSX Practice.mp4

00:00
008 JSX Attributes & Styling React Elements.mp4

00:00
009 Inline Styling for React Elements.mp4

00:00
010 React Styling Practice.mp4

00:00
011 React Components.mp4

00:00
012 React Components Practice.mp4

00:00
013 Javascript ES6 – Import, Export and Modules.mp4

00:00
014 Javascript ES6 Import, Export and Modules Practice.mp4

00:00
015 (Windows) Local Environment Setup for React Development.mp4

00:00
016 (Mac) Local Environment Setup for React Development.mp4

00:00
017 Newer Versions of Node Troubleshooting.html

00:00
018 Keeper App Project – Part 1 Challenge.mp4

00:00
019 Keeper App Part 1 Solution.mp4

00:00
020 React Props.mp4

00:00
021 React Props Practice.mp4

00:00
022 React DevTools.mp4

00:00
023 Mapping Data to Components.mp4

00:00
024 Mapping Data to Components Practice.mp4

00:00
025 Javascript ES6 MapFilterReduce.mp4

00:00
026 Javascript ES6 Arrow functions.mp4

00:00
027 Keeper App Project – Part 2.mp4

00:00
028 React Conditional Rendering with the Ternary Operator & AND Operator.mp4

00:00
029 Conditional Rendering Practice.mp4

00:00
030 State in React – Declarative vs. Imperative Programming.mp4

00:00
031 React Hooks – useState.mp4

00:00
032 useState Hook Practice.mp4

00:00
033 Javascript ES6 Object & Array Destructuring.mp4

00:00
034 Javascript ES6 Destructuring Challenge Solution.mp4

00:00
035 Event Handling in React.mp4

00:00
036 React Forms.mp4

00:00
037 Class Components vs. Functional Components.mp4

00:00
038 Changing Complex State.mp4

00:00
039 Changing Complex State Practice.mp4

00:00
040 Javascript ES6 Spread Operator.mp4

00:00
041 Javascript ES6 Spread Operator Practice.mp4

00:00
042 Managing a Component Tree.mp4

00:00
043 Managing a Component Tree Practice.mp4

00:00
044 Keeper App Project – Part 3.mp4

00:00
045 React Dependencies & Styling the Keeper App.mp4

00:00
046 Tip from Angela – How to Build Your Own Product.mp4

00:00
external-links.txt

00:00
Section Quiz

37 – Web3 Decentralised App (DApp) Development with the Internet Computer

001 What is Web3.mp4

00:00
002 How does the Blockchain actually work.mp4

00:00
003 What are DApps (Decentralised Apps) and how do you develop them.mp4

00:00
004 What is the Internet Computer (ICP).mp4

00:00
005 Read Me!.html

00:00
006 (Mac Users) Installation and Setup for Web3 Development.mp4

00:00
007 (Windows Users) Installation and Setup for Web3 Development.mp4

00:00
external-links.txt

00:00
Section Quiz

38 – Build Your First Defi (Decentralised Finance) DApp – DBANK

001 What You’ll Build – DBANK (Inspired by Compound).mp4

00:00
002 Introduction to the Motoko Language.mp4

00:00
003 Motoko Functions and the Candid User Interface.mp4

00:00
004 Motoko Conditionals and Type Annotations.mp4

00:00
005 Query vs. Update Methods.mp4

00:00
006 Orthogonal Persistance.mp4

00:00
007 Tracking Time and Calculating Compound Interest.mp4

00:00
008 Motoko Language Quiz.html

00:00
009 Adding HTML and CSS to Create the Frontend for DBANK.mp4

00:00
010 Connecting the Motoko Backend to our JS Frontend.mp4

00:00
011 Where to Get Help and Support for Development on the Internet Computer.html

00:00
external-links.txt

00:00
Section Quiz

39 – Deploying to the ICP Live Blockchain

40 – Building DApps on ICP with a React Frontend

41 – Create Your Own Crypto Token

001 Tokens and Coins What are they and how are they used.mp4

00:00
002 Download and Configure the Skeleton Project.mp4

00:00
003 Using Motoko Hashmaps to Store Token Balances.mp4

00:00
004 Showing the User’s Token Balance on the Frontend.mp4

00:00
005 Creating the Faucet Functionality Using the Shared Keyword.mp4

00:00
006 Creating the Transfer Functionality.mp4

00:00
007 Using the Transfer Functionality in the Faucet.mp4

00:00
008 Persisting Non-Stable Types Using the Pre- and Postupgrade Methods.mp4

00:00
009 What is the Internet Identity.mp4

00:00
010 Authenticating with the Internet Identity.mp4

00:00
011 (Optional) Live Deployment to Test Internet Identity Authentication.mp4

00:00
external-links.txt

00:00
Section Quiz

42 – Minting NFTs and Building an NFT Marketplace like OpenSea

001 What You’ll Build – A Website to Mint, Buy and Sell NFTs.mp4

00:00
002 Minting NFTs.mp4

00:00
003 Viewing the NFT on the Frontend.mp4

00:00
004 Enabling the Minting Functionality on the Frontend.mp4

00:00
005 Displaying Owned NFTs Using the React Router.mp4

00:00
006 Listing NFTs for Sale.mp4

00:00
007 Styling the Listed NFTs.mp4

00:00
008 Creating the Discover Page.mp4

00:00
009 Buying NFTs.mp4

00:00
010 Join the $6 Million Dollar Supernova Hackathon.html

00:00
external-links.txt

00:00
Section Quiz

43 – Optional Module Ask Angela Anything

44 – Next Steps

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

4.7

Total 3 Ratings

2 Ratings

1 Rating

0 Rating

babdul

2 months ago

Really Easy.

Faateh Naeem

4 months ago

Awesome!!

Bilal Basharat

4 months ago

Good Experience

About Course

What Will You Learn?

Course Content

01 – Front-End Web Development

A Message from the Professor

001 What You’ll Get in This Course.mp4

002 Download the Course Syllabus.html

003 Download the 12 Rules to Learn to Code eBook (Latest Edition).html

004 Download the Required Software.html

005 How Does the Internet Actually Work.mp4

006 How Do Websites Actually Work.mp4

007 How to Get the Most Out of the Course.mp4

008 How to Get Help When You’re Stuck.mp4

009 Pathfinder.html

external-links.txt

Section Quiz

02 – Introduction to HTML

001 A Note About 2023 Course Updates.html

002 What is HTML.mp4

003 How to Download the Course Resources.mp4

004 HTML Heading Elements.mp4

005 HTML Paragraph Elements.mp4

006 Self Closing Tags.mp4

007 (Project) Movie Ranking.mp4

008 How to Ace this Course.mp4

external-links.txt

Section Quiz

03 – Intermediate HTML

001 The List Element.mp4

002 Nesting and Indentation.mp4

003 Anchor Elements.mp4

004 Image Elements.mp4

005 (Project) Birthday Invite.mp4

006 Tip from Angela – Habit Building with the Calendar Trick.mp4

007 Get Access to the Monthly App Brewery Newsletter.html

external-links.txt

04 – Multi-Page Websites

001 Computer File Paths.mp4

002 What are Webpages.mp4

003 The HTML Boilerplate.mp4

004 (Project) Portfolio Website.mp4

005 How to Host Your Website for Free with GitHub.mp4

006 Introduction to Capstone Projects.mp4

007 Instructions for Capstone Project 1 – Online Resume.html

external-links.txt

Section Quiz

05 – Introduction to CSS

001 Why do we need CSS.mp4

002 How to add CSS.mp4

003 CSS Quiz.html

004 CSS Selectors.mp4

005 (Project) Colour Vocab Website.mp4

006 Tip from Angela – Dealing with Distractions.mp4

007 Join the Student Community.html

external-links.txt

06 – CSS Properties

001 CSS Colours.mp4

002 Font Properties.mp4

003 Inspecting CSS.mp4

004 The CSS Box Model – Margin, Padding and Border.mp4

005 (Project) Motivational Poster Website.mp4

external-links.txt

Section Quiz

07 – Intermediate CSS

001 The Cascade – Specificity and Inheritance.mp4

002 Combining CSS Selectors.mp4

003 CSS Positioning.mp4

004 (Project) CSS Flag.mp4

005 Tip from Angela – Nothing Easy is Worth Doing!.mp4

external-links.txt

08 – Advanced CSS

001 CSS Display.mp4

002 CSS Float.mp4

003 How to Create Responsive Websites.mp4

004 Media Queries.mp4

005 (Project) Web Design Agency Website.mp4

006 Tip from Angela – How to Deal with Procrastination.mp4

external-links.txt

Section Quiz

09 – Flexbox