English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 373 lectures (61h 44m) | 31.50 GB
Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, PostgreSQL, Web3 and DApps
Throughout this comprehensive course, we cover a massive amount of tools and technologies, including:
- Front-End Web Development
- HTML 5
- CSS 3
- Bootstrap 4
- 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
- MongoDB
- Mongoose
- Authentication
- Firebase
- React.js
- React Hooks
- Web Design
- Deployment with GitHub Pages, Heroku and MongoDB Atlas
- 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 fluently programming and be ready to make 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.
What you’ll learn
- You will build 16 web development projects for your portfolio, ready to apply for junior developer jobs.
- You will learn the latest technologies, including Javascript, React, Node and even Web3 development.
- You will master both front and back-end development, becoming a full-stack developer by the end of the course.
- 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.
Table of Contents
Front-End Web Development
1 What You_ll Get in This Course
2 Download the Course Syllabus
3 Download the 12 Rules to Learn to Code eBook [Latest Edition]
4 Download the Required Software
5 How Does the Internet Actually Work
6 How Do Websites Actually Work
7 How to Get the Most Out of the Course
8 How to Get Help When You_re Stuck
9 Pathfinder
Introduction to HTML
10 A Note About 2023 Course Updates
11 What is HTML
12 How to Download the Course Resources
13 HTML Heading Elements
14 HTML Paragraph Elements
15 Self Closing Tags
16 [Project] Movie Ranking
17 How to Ace this Course
Intermediate HTML
18 The List Element
19 Nesting and Indentation
20 Anchor Elements
21 Image Elements
22 [Project] Birthday Invite
23 Tip from Angela – Habit Building with the Calendar Trick
24 Get Access to the Monthly App Brewery Newsletter
Multi-Page Websites
25 Computer File Paths
26 What are Webpages
27 The HTML Boilerplate
28 [Project] Portfolio Website
29 How to Host Your Website for Free with GitHub
30 Introduction to Capstone Projects
31 Instructions for Capstone Project 1 – Online Resume
Introduction to CSS
32 Why do we need CSS
33 How to add CSS
34 CSS Selectors
35 [Project] Colour Vocab Website
36 Tip from Angela – Dealing with Distractions
37 Join the Student Community
CSS Properties
38 CSS Colours
39 Font Properties
40 Inspecting CSS
41 The CSS Box Model – Margin, Padding and Border
42 [Project] Motivational Poster Website
Intermediate CSS
43 The Cascade – Specificity and Inheritance
44 Combining CSS Selectors
45 CSS Positioning
46 [Project] CSS Flag
47 Tip from Angela – Nothing Easy is Worth Doing!
Advanced CSS
48 CSS Display
49 CSS Float
50 How to Create Responsive Websites
51 Media Queries
52 [Project] Web Design Agency Website
53 Tip from Angela – How to Deal with Procrastination
Flexbox
54 Display Flex
55 Flex Direction
56 Flex Layout
57 Flex Sizing
58 [Project] Pricing Table
59 Tip from Angela – Building a Programming Habit
Grid
60 Display Grid
61 Grid Sizing
62 Grid Placement
63 [Project] Mondrian Painting
Bootstrap
64 What is Bootstrap
65 Bootstrap Layout
66 Bootstrap Components
67 [Project] TinDog Startup Website
Web Design School – Create a Website that People Love
68 Introduction to Web Design
69 Understanding Colour Theory
70 Understanding Typography and How to Choose a Font
71 Manage ATTENTION with effective User Interface (UI) Design
72 User Experience (UX) Design
73 Web Design in Practice – Let_s apply what we_ve learnt!
Capstone Project 2 – Personal Site
74 Instructions
Introduction to Javascript ES6
75 Introduction to Javascript
76 Javascript Alerts – Adding Behaviour to Websites
77 Data Types
78 Javascript Variables
79 Javascript Variables Exercise Start
80 Javascript Variables Exercise
81 Javascript Variables Exercise Solution
82 Naming and Naming Conventions for Javascript Variables
83 String Concatenation
84 String Lengths and Retrieving the Number of Characters
85 Slicing and Extracting Parts of a String
86 Challenge Changing Casing in Text
87 Challenge Changing String Casing Solution
88 Basic Arithmetic and the Modulo Operator in Javascript
89 Increment and Decrement Expressions
90 Functions Part 1 Creating and Calling Functions
91 Functions Part 1 Challenge – The Karel Robot
92 The Karel Chess Board Solution
93 A Quick Note About the Next Lesson
94 Functions Part 2 Parameters and Arguments
95 Life in Weeks Coding Exercise
96 Life in Weeks Solution
97 Functions Part 3 Outputs & Return Values
98 Challenge Create a BMI Calculator
99 BMI Calculator Challenge
100 Challenge BMI Calculator Solution
101 Tip from Angela – Set Your Expectations
Intermediate Javascript
102 Random Number Generation in Javascript Building a Love Calculator
103 Control Statements Using If-Else Conditionals & Logic
104 Comparators and Equality
105 Combining Comparators
106 BMI Calculator Advanced (IFELSE)
107 Introducing the Leap Year Code Challenge
108 Leap Year Challenge Exercise
109 Leap Year Solution
110 Collections Working with Javascript Arrays
111 Adding Elements and Intermediate Array Techniques
112 Who_s Buying Lunch Code Challenge
113 Who_s Buying Lunch Solution
114 Control Statements While Loops
115 Solution to the 99 Bottles Challenge
116 Control Statements For Loops
117 Introducing the Fibonacci Code Challenge
118 The Fibonacci Exercise
119 Fibonacci Solution
120 Tip from Angela – Retrieval is How You Learn
The Document Object Model (DOM)
121 Adding Javascript to Websites
122 Introduction to the Document Object Model (DOM)
123 Solution to the DOM Challenge
124 Selecting HTML Elements with Javascript
125 Manipulating and Changing Styles of HTML Elements with Javascript
126 The Separation of Concerns Structure vs Style vs Behaviour
127 Text Manipulation and the Text Content Property
128 Manipulating HTML Element Attributes
129 Tip from Angela – The 20 Minute Method
Boss Level Challenge 1 – The Dicee Game
130 Challenge The Dicee Challenge
131 Dicee Challenge Step 0 – Download the Skeleton Project
132 Dicee Challenge Step 1 – Create an External Javascript File
133 Dicee Challenge Step 2 – Add Dice Images
134 Dicee Challenge Step 3 – Create a Random Number
135 Dicee Challenge Step 4 – Change the img to a Random Dice
136 Dicee Challenge Step 5 – Change both img Elements
137 Dicee Challenge Step 6 – Change the Title to Display a Winner
138 The Solution to the Dicee Challenge
139 Download the Completed Website
140 Tip from Angela – Learning Before you Eat
Advanced Javascript and DOM Manipulation
141 What We_ll Make Drum Kit
142 Download the Starting Files
143 Adding Event Listeners to a Button
144 Higher Order Functions and Passing Functions as Arguments
145 Higher Order Function Challenge Solution
146 How to Play Sounds on a Website
147 How to Use Switch Statements in Javascript
148 A Deeper Understanding of Javascript Objects
149 Objects, their Methods and the Dot Notation
150 A Quick Note About the Next Lesson
151 Using Keyboard Event Listeners to Check for Key Presses
152 Understanding Callbacks and How to Respond to Events
153 Adding Animation to Websites
154 Download the Completed Website
155 Tip from Angela – Dealing with Lack of Progress
jQuery
156 What is jQuery
157 How to Incorporate jQuery into Websites
158 How Minification Works to Reduce File Size
159 Selecting Elements with jQuery
160 Manipulating Styles with jQuery
161 Manipulating Text with jQuery
162 Manipulating Attributes with jQuery
163 Adding Event Listeners with jQuery
164 Adding and Removing Elements with jQuery
165 Website Animations with jQuery
166 Tip from Angela – Mixing Knowledge
Boss Level Challenge 2 – The Simon Game
167 What You_ll Make The Simon Game
168 Play the Game
169 Step 0 – Download the Starting Files
170 Step 1 – Add Javascript and jQuery
171 Step 1 – Answer
172 Step 2 – Create A New Pattern
173 Step 2 – Answer
174 Step 3 – Show the Sequence to the User with Animations and Sounds
175 Step 3 – Answer
176 Step 4 – Check Which Button is Pressed
177 Step 4 – Answer
178 Step 5 – Add Sounds to Button Clicks
179 Step 5 – Answer
180 Step 6 – Add Animations to User Clicks
181 Step 6 – Answer
182 Step 7 – Start the Game
183 Step 7 – Answer
184 Step 8 – Check the User_s Answer Against the Game Sequence8
185 Step 8 – Answer
186 Step 9 – Game Over
187 Step 9 – Answer
188 Step 10 – Restart the Game
189 Step 10 – Answer
190 Download the Completed Project Code
191 Tip from Angela – Dealing with Frustration
The Unix Command Line
192 Install Git Bash on Windows
193 Understanding the Command Line. Long Live the Command Line!
194 Command Line Techniques and Directory Navigation
195 Creating, Opening, and Removing Files through the Command Line
196 Tip from Angela – Sleep is My Secret Weapon
Backend Web Development
197 Backend Web Development Explained
198 Backend Tools and Technologies – Which one to learn
Node.js
199 What is Node.js
200 Install Node.js on Mac
201 Install Node.js on Windows
202 Using Node.js
203 How to Use the Native Node Modules
204 The NPM Package Manager and Installing External Node Modules
205 [Project] QR Code Generator
206 Tip from Angela – Step Up to the Challenge
Express.js with Node.js
207 What is Express
208 Creating Our First Server with Express
209 HTTP Requests
210 Postman
211 Introduction to Middlewares
212 Custom Middlewares
213 Secrets Access Project
214 Tip from Angela – How to Solidify Your Knowledge
EJS
215 What is EJS
216 EJS Tags
217 Passing Data to EJS Templates
218 EJS Partials and Layouts
219 Band Generator Project
220 Tip from Angela – Location, Location, Location!
Capstone Project – Create a Blog web application
221 Instructions
Git, Github and Version Control
222 Introduction to Version Control and Git
223 Version Control Using Git and the Command Line
224 GitHub and Remote Repositories
225 Gitignore
226 Cloning
227 Branching and Merging
228 Optional Git Challenge
229 Forking and Pull Requests
230 Tip from Angela – Spaced Repetition
Application Programming Interfaces (APIs)
231 Introduction to APIs
232 Structuring API Requests
233 What is JSON
234 Making Server-Side API Requests with Axios
235 API Authentication
236 REST APIs
237 Secrets Project
238 Tip from Angela – Use Accountability in your Favour
Capstone Project – Use a Public API
239 Instructions
Build Your Own API
240 Building your own APIs
241 Creating GET Routes
242 Creating POST, PUT, and PATCH Routes
243 Creating the DELETE Route
244 Build your own API for a Blog
245 Tip from Angela – How to Get a Job as Programmer
Databases
246 Databases Explained SQL vs. NoSQL
247 Tip from Angela – When Life Gives You Lemons
SQL
248 SQL Commands CREATE Table and INSERT Data
249 SQL Commands READ, SELECT, and WHERE
250 Updating Single Values and Adding Columns in SQL
251 SQL Commands DELETE
252 Understanding SQL Relationships, Foreign Keys and Inner Joins
253 Tip from Angela – Find All the Hard Working People
PostgreSQL
254 Introduction to Postgres
255 How to Install PostgreSQL and pgAdmin
256 Understand how to use keys, Postgres types and keywords
257 Flag Emojis on Windows
258 Use pgAdmin to CREATE a TABLE
259 READ data from a Postgres database
260 Query data using SELECT, WHERE, and LIKE
261 UNIQUE and NOT NULL Travel Tracker Part 1
262 INSERT and add Data Travel Tracker Part 2
263 Travel Tracker Part 3
264 One to One Relationships & Inner Joins
265 One to Many Relationships
266 Many to Many Relationships & Aliases
267 The Family Travel Tracker
268 How to update and delete data & tables
269 Permalist Project
270 Tip from Angela – Daily Routines
Capstone Project – Book Notes
271 Instructions
Authentication and Security – Handling Credentials & Designing a Secure Login
272 Introduction to Authentication
273 Level 1 – Registering Users with Email and Password
274 Level 2 – Encryption and Hashing
275 How to Hack Passwords
276 Level 3 – How to Salt Passwords for Improved Encryption
277 Managing Cookies and Sessions
278 Level 5 – Hide your Secrets with Environment Variables
279 Set up your Google OAuth Credentials
280 Level 6 – OAuth Implement Sign In with Google
281 Finish the app let users submit secrets
282 Tip from Angela – How to Work as a Freelancer
React.js
283 What is React
284 What we will make in this React module
285 Introduction to Code Sandbox and the Structure of the Module
286 [Optional] Local Development Setup
287 Introduction to JSX and Babel
288 JSX Code Practice
289 Javascript Expressions in JSX & ES6 Template Literals
290 Javascript Expressions in JSX Practice
291 JSX Attributes & Styling React Elements
292 Inline Styling for React Elements
293 React Styling Practice
294 React Components
295 React Components Practice
296 Javascript ES6 – Import, Export and Modules
297 Javascript ES6 Import, Export and Modules Practice
298 Keeper App Project – Part 1 Challenge
299 Keeper App Part 1 Solution
300 React Props
301 React Props Practice
302 React DevTools
303 Mapping Data to Components
304 Mapping Data to Components Practice
305 Javascript ES6 MapFilterReduce
306 Javascript ES6 Arrow functions
307 Keeper App Project – Part 2
308 React Conditional Rendering with the Ternary Operator & AND Operator
309 Conditional Rendering Practice
310 State in React – Declarative vs. Imperative Programming
311 React Hooks – useState
312 useState Hook Practice
313 Javascript ES6 Object & Array Destructuring
314 Javascript ES6 Destructuring Challenge Solution
315 Event Handling in React
316 React Forms
317 Class Components vs. Functional Components
318 Changing Complex State
319 Changing Complex State Practice
320 Javascript ES6 Spread Operator
321 Javascript ES6 Spread Operator Practice
322 Managing a Component Tree
323 Managing a Component Tree Practice
324 Keeper App Project – Part 3
325 Note about the Next Lesson – Packages and Imports
326 React Dependencies & Styling the Keeper App
327 Tip from Angela – How to Build Your Own Product
Web3 Decentralised App (DApp) Development with the Internet Computer
328 What is Web3
329 How does the Blockchain actually work
330 What are DApps (Decentralised Apps) and how do you develop them
331 What is the Internet Computer (ICP)
332 Read Me!
333 [Mac Users] Installation and Setup for Web3 Development
334 [Windows Users] Installation and Setup for Web3 Development
Build Your First Defi (Decentralised Finance) DApp – DBANK
335 What You_ll Build – DBANK (Inspired by Compound)
336 Introduction to the Motoko Language
337 Motoko Functions and the Candid User Interface
338 Motoko Conditionals and Type Annotations
339 Query vs. Update Methods
340 Orthogonal Persistance
341 Tracking Time and Calculating Compound Interest
342 Adding HTML and CSS to Create the Frontend for DBANK
343 Connecting the Motoko Backend to our JS Frontend
344 Where to Get Help and Support for Development on the Internet Computer
Deploying to the ICP Live Blockchain
345 What are Cycles and the ICP Token
346 How to Claim Free Cycles from Dfinity
347 How to Deploy to the ICP Network
348 How to Convert ICP into Cycles
349 [Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting
Building DApps on ICP with a React Frontend
350 How to Configure a DFX Created Project to Use React
351 Storing Data on a Canister
352 Retrieving Data from a Canister
353 Deleting and Persistance
Create Your Own Crypto Token
354 Tokens and Coins What are they and how are they used
355 Download and Configure the Skeleton Project
356 Using Motoko Hashmaps to Store Token Balances
357 Showing the User_s Token Balance on the Frontend
358 Creating the Faucet Functionality Using the Shared Keyword
359 Creating the Transfer Functionality
360 Using the Transfer Functionality in the Faucet
361 Persisting Non-Stable Types Using the Pre- and Postupgrade Methods
362 What is the Internet Identity
363 Authenticating with the Internet Identity
364 [Optional] Live Deployment to Test Internet Identity Authentication
Minting NFTs and Building an NFT Marketplace like OpenSea
365 What You_ll Build – A Website to Mint, Buy and Sell NFTs
366 Minting NFTs
367 Viewing the NFT on the Frontend
368 Enabling the Minting Functionality on the Frontend
369 Displaying Owned NFTs Using the React Router
370 Listing NFTs for Sale
371 Styling the Listed NFTs
372 Creating the Discover Page
373 Buying NFTs
374 Join the $6 Million Dollar Supernova Hackathon
Optional Module Ask Angela Anything
375 AAA 1 – How to Soak in Programming Concepts and more
376 AAA 2 – Schedule for Learning to Code and more
377 AAA 3 – How to Start Freelancing and more
378 AAA 4 – The Live AMA
Next Steps
379 Vote for the Next Module!
380 Bonus Lecture
Resolve the captcha to access the links!