The Complete 2024 Web Development Bootcamp by Udemy
Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, PostgreSQL, Web3 and DApps
Course Highlights
- 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.
Skills you will learn!
Curriculum
9 Topics
What You'll Get in This Course
Download the Course Syllabus
Download the 12 Rules to Learn to Code eBook [Latest Edition]
Download the Required Software
How Does the Internet Actually Work?
How Do Websites Actually Work?
How to Get the Most Out of the Course
How to Get Help When You're Stuck
Pathfinder
8 Topics
A Note About 2023 Course Updates
What is HTML?
How to Download the Course Resources
HTML Heading Elements
HTML Paragraph Elements
Self Closing Tags
[Project] Movie Ranking
How to Ace this Course
7 Topics
The List Element
Nesting and Indentation
Anchor Elements
Image Elements
[Project] Birthday Invite
Tip from Angela - Habit Building with the Calendar Trick
Get Access to the Monthly App Brewery Newsletter
7 Topics
Computer File Paths
What are Webpages?
The HTML Boilerplate
[Project] Portfolio Website
How to Host Your Website for Free with GitHub
Introduction to Capstone Projects
Instructions for Capstone Project 1 - Online Resume
7 Topics
Why do we need CSS?
How to add CSS
CSS Quiz
CSS Selectors
[Project] Colour Vocab Website
Tip from Angela - Dealing with Distractions
Join the Student Community
5 Topics
CSS Colours
Font Properties
Inspecting CSS
The CSS Box Model - Margin Padding and Border
[Project] Motivational Poster Website
5 Topics
The Cascade - Specificity and Inheritance
Combining CSS Selectors
CSS Positioning
[Project] CSS Flag
Tip from Angela - Nothing Easy is Worth Doing!
6 Topics
CSS Display
CSS Float
How to Create Responsive Websites
Media Queries
[Project] Web Design Agency Website
Tip from Angela - How to Deal with Procrastination
6 Topics
Display: Flex
Flex Direction
Flex Layout
Flex Sizing
[Project] Pricing Table
Tip from Angela - Building a Programming Habit
4 Topics
Display: Grid
Grid Sizing
Grid Placement
[Project] Mondrian Painting
4 Topics
What is Bootstrap?
Bootstrap Layout
Bootstrap Components
[Project] TinDog Startup Website
6 Topics
Introduction to Web Design
Understanding Colour Theory
Understanding Typography and How to Choose a Font
Manage ATTENTION with effective User Interface (UI) Design
User Experience (UX) Design
Web Design in Practice - Let's apply what we've learnt!
1 Topic
Instructions
30 Topics
Introduction to Javascript
Javascript Alerts - Adding Behaviour to Websites
Data Types
Javascript Variables
Javascript Variables Exercise Start
Javascript Variables Exercise
Javascript Variables Exercise Solution
Naming and Naming Conventions for Javascript Variables
Javascript Variable Naming Quiz
String Concatenation
String Lengths and Retrieving the Number of Characters
Slicing and Extracting Parts of a String
Challenge: Changing Casing in Text
Challenge: Changing String Casing Solution
Basic Arithmetic and the Modulo Operator in Javascript
Increment and Decrement Expressions
Javascript Numbers Quiz
Functions Part 1: Creating and Calling Functions
Functions Part 1 Challenge - The Karel Robot
The Karel Chess Board Solution
A Quick Note About the Next Lesson
Functions Part 2: Parameters and Arguments
Life in Weeks Coding Exercise
Life in Weeks Solution
Functions Part 3: Outputs & Return Values
Challenge: Create a BMI Calculator
BMI Calculator Challenge
Challenge: BMI Calculator Solution
JavaScript Functions Quiz
Tip from Angela - Set Your Expectations
19 Topics
Random Number Generation in Javascript: Building a Love Calculator
Control Statements: Using If-Else Conditionals & Logic
Comparators and Equality
Combining Comparators
BMI Calculator Advanced (IF/ELSE)
Introducing the Leap Year Code Challenge
Leap Year Challenge Exercise
Leap Year Solution
Collections: Working with Javascript Arrays
Adding Elements and Intermediate Array Techniques
Who's Buying Lunch? Code Challenge
Who's Buying Lunch Solution
Control Statements: While Loops
Solution to the 99 Bottles Challenge
Control Statements: For Loops
Introducing the Fibonacci Code Challenge
The Fibonacci Exercise
Fibonacci Solution
Tip from Angela - Retrieval is How You Learn
9 Topics
Adding Javascript to Websites
Introduction to the Document Object Model (DOM)
Solution to the DOM Challenge
Selecting HTML Elements with Javascript
Manipulating and Changing Styles of HTML Elements with Javascript
The Separation of Concerns: Structure vs Style vs Behaviour
Text Manipulation and the Text Content Property
Manipulating HTML Element Attributes
Tip from Angela - The 20 Minute Method
11 Topics
Challenge: The Dicee Challenge
Dicee Challenge Step 0 - Download the Skeleton Project
Dicee Challenge Step 1 - Create an External Javascript File
Dicee Challenge Step 2 - Add Dice Images
Dicee Challenge Step 3 - Create a Random Number
Dicee Challenge Step 4 - Change the <img> to a Random Dice
Dicee Challenge Step 5 - Change both <img> Elements
Dicee Challenge Step 6 - Change the Title to Display a Winner
The Solution to the Dicee Challenge
Download the Completed Website
Tip from Angela - Learning Before you Eat
15 Topics
What We'll Make: Drum Kit
Download the Starting Files
Adding Event Listeners to a Button
Higher Order Functions and Passing Functions as Arguments
Higher Order Function Challenge Solution
How to Play Sounds on a Website
How to Use Switch Statements in Javascript
A Deeper Understanding of Javascript Objects
Objects their Methods and the Dot Notation
A Quick Note About the Next Lesson
Using Keyboard Event Listeners to Check for Key Presses
Understanding Callbacks and How to Respond to Events
Adding Animation to Websites
Download the Completed Website
Tip from Angela - Dealing with Lack of Progress
11 Topics
What is jQuery?
How to Incorporate jQuery into Websites
How Minification Works to Reduce File Size
Selecting Elements with jQuery
Manipulating Styles with jQuery
Manipulating Text with jQuery
Manipulating Attributes with jQuery
Adding Event Listeners with jQuery
Adding and Removing Elements with jQuery
Website Animations with jQuery
Tip from Angela - Mixing Knowledge
25 Topics
What You'll Make: The Simon Game
Play the Game
Step 0 - Download the Starting Files
Step 1 - Add Javascript and jQuery
Step 1 - Answer
Step 2 - Create A New Pattern
Step 2 - Answer
Step 3 - Show the Sequence to the User with Animations and Sounds
Step 3 - Answer
Step 4 - Check Which Button is Pressed
Step 4 - Answer
Step 5 - Add Sounds to Button Clicks
Step 5 - Answer
Step 6 - Add Animations to User Clicks
Step 6 - Answer
Step 7 - Start the Game
Step 7 - Answer
Step 8 - Check the User's Answer Against the Game Sequence8
Step 8 - Answer
Step 9 - Game Over
Step 9 - Answer
Step 10 - Restart the Game
Step 10 - Answer
Download the Completed Project Code
Tip from Angela - Dealing with Frustration
5 Topics
Install Git Bash on Windows
Understanding the Command Line. Long Live the Command Line!
Command Line Techniques and Directory Navigation
Creating Opening and Removing Files through the Command Line
Tip from Angela - Sleep is My Secret Weapon
2 Topics
Backend Web Development Explained
Backend Tools and Technologies - Which one to learn?
8 Topics
What is Node.js?
Install Node.js on Mac
Install Node.js on Windows
Using Node.js
How to Use the Native Node Modules
The NPM Package Manager and Installing External Node Modules
[Project] QR Code Generator
Tip from Angela - Step Up to the Challenge
8 Topics
What is Express?
Creating Our First Server with Express
HTTP Requests
Postman
Introduction to Middlewares
Custom Middlewares
Secrets Access Project
Tip from Angela - How to Solidify Your Knowledge
6 Topics
What is EJS?
EJS Tags
Passing Data to EJS Templates
EJS Partials and Layouts
Band Generator Project
Tip from Angela - Location Location Location!
1 Topic
Instructions
9 Topics
Introduction to Version Control and Git
Version Control Using Git and the Command Line
GitHub and Remote Repositories
Gitignore
Cloning
Branching and Merging
Optional Git Challenge
Forking and Pull Requests
Tip from Angela - Spaced Repetition
8 Topics
Introduction to APIs
Structuring API Requests
What is JSON?
Making Server-Side API Requests with Axios
API Authentication
REST APIs
Secrets Project
Tip from Angela - Use Accountability in your Favour
1 Topic
Instructions
6 Topics
Building your own APIs
Creating GET Routes
Creating POST PUT and PATCH Routes
Creating the DELETE Route
Build your own API for a Blog
Tip from Angela - How to Get a Job as Programmer
2 Topics
Databases Explained: SQL vs. NoSQL
Tip from Angela - When Life Gives You Lemons
6 Topics
SQL Commands: CREATE Table and INSERT Data
SQL Commands: READ SELECT and WHERE
Updating Single Values and Adding Columns in SQL
SQL Commands: DELETE
Understanding SQL Relationships Foreign Keys and Inner Joins
Tip from Angela - Find All the Hard Working People
17 Topics
Introduction to Postgres
How to Install PostgreSQL and pgAdmin
Understand how to use keys Postgres types and keywords
Flag Emojis on Windows ?
Use pgAdmin to CREATE a TABLE
READ data from a Postgres database
Query data using SELECT WHERE and LIKE
UNIQUE and NOT NULL | Travel Tracker Part 1
INSERT and add Data | Travel Tracker Part 2
Travel Tracker Part 3
One to One Relationships & Inner Joins
One to Many Relationships
Many to Many Relationships & Aliases
The Family Travel Tracker
How to update and delete data & tables
Permalist Project
Tip from Angela - Daily Routines
1 Topic
Instructions
11 Topics
Introduction to Authentication
Level 1 - Registering Users with Email and Password
Level 2 - Encryption and Hashing
How to Hack Passwords
Level 3 - How to Salt Passwords for Improved Encryption
Managing Cookies and Sessions
Level 5 - Hide your Secrets with Environment Variables
Set up your Google OAuth Credentials
Level 6 - OAuth: Implement "Sign In with Google"
Finish the app: let users submit secrets
Tip from Angela - How to Work as a Freelancer
46 Topics
What is React?
What we will make in this React module
Introduction to Code Sandbox and the Structure of the Module
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
[Windows] Local Environment Setup for React Development
[Mac] Local Environment Setup for React Development
Newer Versions of Node Troubleshooting
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
React Dependencies & Styling the Keeper App
Tip from Angela - How to Build Your Own Product
7 Topics
What is Web3?
How does the Blockchain actually work?
What are DApps (Decentralised Apps) and how do you develop them?
What is the Internet Computer (ICP)?
Read Me!
[Mac Users] Installation and Setup for Web3 Development
[Windows Users] Installation and Setup for Web3 Development
11 Topics
What You'll Build - DBANK (Inspired by Compound)
Introduction to the Motoko Language
Motoko Functions and the Candid User Interface
Motoko Conditionals and Type Annotations
Query vs. Update Methods
Orthogonal Persistance
Tracking Time and Calculating Compound Interest
Motoko Language Quiz
Adding HTML and CSS to Create the Frontend for DBANK
Connecting the Motoko Backend to our JS Frontend
Where to Get Help and Support for Development on the Internet Computer
6 Topics
What are Cycles and the ICP Token?
No Cycles No Problems!
How to Claim Free Cycles from Dfinity
How to Deploy to the ICP Network
How to Convert ICP into Cycles?
[Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting
4 Topics
How to Configure a DFX Created Project to Use React
Storing Data on a Canister
Retrieving Data from a Canister
Deleting and Persistance
11 Topics
Tokens and Coins: What are they and how are they used?
Download and Configure the Skeleton Project
Using Motoko Hashmaps to Store Token Balances
Showing the User's Token Balance on the Frontend
Creating the Faucet Functionality Using the Shared Keyword
Creating the Transfer Functionality
Using the Transfer Functionality in the Faucet
Persisting Non-Stable Types Using the Pre- and Postupgrade Methods
What is the Internet Identity?
Authenticating with the Internet Identity
[Optional] Live Deployment to Test Internet Identity Authentication
10 Topics
What You'll Build - A Website to Mint Buy and Sell NFTs
Minting NFTs
Viewing the NFT on the Frontend
Enabling the Minting Functionality on the Frontend
Displaying Owned NFTs Using the React Router
Listing NFTs for Sale
Styling the Listed NFTs
Creating the "Discover" Page
Buying NFTs
Join the $6 Million Dollar Supernova Hackathon
4 Topics
AAA 1 - How to Soak in Programming Concepts and more...
AAA 2 - Schedule for Learning to Code and more...
AAA 3 - How to Start Freelancing and more...
AAA 4 - The Live AMA
2 Topics
Vote for the Next Module!
Bonus Lecture
The Complete 2024 Web Development Bootcamp
Related Web Development Courses
.webp)
Thank You!
Your review has been submitted successfully.