About the Course :

• 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.

The Complete 2023 Web Development Masterclass (MERN Stack)

Course Curriculum:

Section 1 : Front-End Web Development

1 – What You will get in this course.
2 – Download the course syllabus.
3 – Download the 12 rules to learn to code ebook.
4 – Download the required software.
5 – How does the internet actually work?
6 – How do website actually work?
7 – How to get the most out of the course?
8 – How to get help when you are stuck.
9 – Pathfinder.

Section 2 : 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

Section 3 : Intermediate HTML

18 – The List Element
19 – Nesting and Indentation
20 – Anchor Elements
21 – Image Elements
22 – [Project] Birthday Invite
23 – Tip from Noor – Habit Building with the Calender trick.
24 – Get monthly Tips and Tools to level up as a Developer.

Section 4 : Multi-Page Website

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.

Section 5 – Introduction to CSS

32 – Why do we need CSS?
33 – How to add CSS
Quiz 1 – CSS Quiz
34 – CSS Selectors
35 – [Project] Colour Vocab Website
36 – Tip from Noor – Dealing with Distractions.
37 – Join the Student Community.

Section 6 – 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

Section 7 – Intermidiate CSS

43 – The Cascade – Specificity and Inheritance
44 – Combining CSS Selectors
45 – CSS Positioning
46 – [Project] CSS Flag
47 – Tip from Noor – Nothing Easy is Worth Doing!

Section 8 – Advanced CSS
48 – CSS Display
49 – CSS Float
50 – How to Create Responsite Websites
51 – Media Queries
52 – [Project] Web Design Agency Website
53 – Tip from Noor – How to Deal with Procrastination

Section 9 – Flexbox

54 – Display: Flex
55 – Flex Direction
56 – Flex Layout
57 – Flex Sizing
58 – [Project] Pricing Table
59 – Tip from Noor – Building a Programming Habit.

Section 10 – Grid

60 – Display: Grid
61 – Grid Sizing
62 – Grid Placement
63 – [Project] Mondrian Painting

Section 11 – Bootstrap

64 – What is Bootstrap?
65 – Bootstrap Layout
66 – Bootstrap Components
67 – [Project] TinDog Startup Website

Section 12 – 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 – Lets apply what we have learnt!

Section 13 – Capstone Project 2 – Personal Site

74 – Instructions.

Section 14 – Introduction to Javascript ES6

75 – Download the Course Resources PDF
76 – Introduction to Javascript
77 – Javascript Alerts – Adding Behaviour to Websites.
78 – Data Types
79 – Javascript Variables
80 – Javascript Variables

Exercise Start
Coding Exercise 1: Javascript Variables Exercise

81 – Javascript Variables Exercise Solution
82 – Naming and Naming Conventions for Javascript Variables.

Quiz 2: Javascript Variable Naming Quiz

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 Casing Solution
88 – Basic Arithmetic and the Modulo Operator in Javascript
89 – Increment and Decrement Expressions

Quiz 3: Javascript Number Quiz

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 solutions
96 – Function Part 3: Outputs and Return Values.
97 – Challenge: Create a BMI Calculator

Coding Exercise 3: BMI Calculator Challenge

98 – Challenge: BMI Calculator Solution

Quiz 4: Javascript Functions Quiz

99 – Tip from Noor-Set Your Expectations

Section 15 – Intermediate Javascript

100 – Random Number Generation in Javascript: Building a Love Calculator
101 – Control Statements: Using If-Else Conditionals and Logic
102 – Comparators and Equiality
103 – Combining Comparators

Coding Exercise 4: BMI Calculator Advanced (IF/ELSE)

104 – Introducing the Leap Year Code Challenge
Coding Exercise 5: Leap Year Challenge Exercise

105 – Leap year solution

106 – Collections: Working with JavaScript Arrays
107 – Adding Elements and Intermediate Array Techniques

Coding Exercise 6: Who’s Buying Lunch? Code Challenge

108 – Who’s Buying Lunch Solution
109 – Control Statements: While Loops
110 – Solution to the 99 Bottles Challenge
111 – Control Statements: For Loops
112 – Introducing the Fibonacci Code Challenge

Coding Exercise 7: The Fibonacci Exercise

113 – Fibonacci Solution
114 – Tip from Noor – Retrieval is How You Learn.

Section 16 – The Document Object Model (DOM)
115 – Adding javascript to Websites
116 – Introduction to the Document Object Model (DOM)
117 – Solution to the DOM Challenge
118 – Selecting HTML Elements with Javascript
119 – Manipulating and Changing Styles of HTML Elements with javascript
120 – The Separation of Concerns: Structure VS Style vs Vehaviour
121 – Text Manipulation and the Text Content Property
122 – Manipulating HTML Element Attributes
123 – Tip from Noor – The 20 Minute Method

Section 17 – Boss Level

Challenge 1 – The Dicee Game
124 – Challenge: The Dicee Challenge
125 – Dicee Challenge Step 0-Download the Skeleton Project
126 – Dicee Challenge Step 1-Create an External Javascript File
127 – Dicee Challenge Step 2-Add Dice Images
128 – Dicee Challenge Step 3 – Create a Random Number
129 – Dicee Challenge Step 4 – Change the <img> to a Random Dice
130 – Dicee Challenge Step 5 – Change both <img> Elements
131 – Dicee Challenge Step 6 – Change the Title to Display a Winner
132 – The Solution to the Dicee Challenge
133 – Download the completed Website
134 – Tip From Noor – Learning Before you eat

Section 18 – Advanced Javascript and DOM Manipulation

135 – What We’ll Make: Drum Kit
136 – Download the Starting files
137 – Adding Event Listeners to a Button
138 – Higher Order Functions and Passing Functions as Arguments
139 – Higher Order Function Challenge Solution
140 – How to Play sounds on a Website
141 – A Deeper Understanding of javascript Objects
142 – How to Use Switch Statements in Javascript
143 – Objects, their Methods and the Dot Notation
144 – A Quick Note About the Next Lesson
145 – Using Keyboard Event Listeners to Check for Key Presses.
146 – Understanding Callbacks and How to Respond to Events.
147 – Adding Animations to Websites
148 – Download the Completed Website
149 – Tip from Noor – Dealing with lack of Progress.

Section 19 – JQuery

150 – What is jQuery?
151 – How to Incorporate jQuery into Websites
152 – How Minification Works to Reduce file Size
153 – Selecting Elements with jQuery
154 – Manipulating Styles with jQuery
155 – Manipulating Text with jQuery
156 – Manipulating Attributes with jQuery
157 – Adding Event Listeners with jQuery
158 – Adding and Removing Elements with jQuery
159 – Website Animations with jQuery
160 – Tip from Noor – Mixing Knowledge

Section 20 – Boss Level Challenge 2 – The Simon Game.

161 – What You’ll Make: the Simon Game
162 – Play the Game
163 – Step 0 – Download the Starting Files
164 – Step 1 – Add Javascript and jQuery
165 – Step 1 – Answer
166 – Step 2 – Create A New Pattern
167 – Step 2 – Answer
168 – Step 3 – Show the Sequence to the user with Animations and Sounds.
169 – Step 3 – Answer
170 – Step 4 – Check Which Buttons is pressed
171 – Step 4 – Answer
172 – Step 5 – Add Sounds to Button Clicks
173 – Step 5 – Answer
174 – Step 6 – Add Animations to user Clicks
175 – Step 6 – Answer
176 – Step 7 – Start the Game.
177 – Step 7 – Answer
178 – Step 8 – Check the users’s Answer Agains the Game Sequence8
179 – Step 8 – Answer
180 – Step 9 – Game Over
181 – Step 9 – Answer
182 – Step 10- Restart the Game
183 – Step 10- Answer
184 – Download the Completed Project Code
185 – Tip from Noor – Dealing with Frustration

Section 21 – The Unix Command Line.

186 – Install Git Bash on Windows
187 – Understanding the Command Line. Long Live the Command Line!
188 – Command Line Techniques and Directory Navigation
189 – Creating, Opening and Removing Files through the Command Line.
190 – Tip from Noor – Sleep is My Secret Weapon.

Section 22 – Backend Web Development

191 – Backend Web Development Explained
192 – Backend Tools and Technologies – Which one to learn?

Section 23 – Node.js

193 – What is Node.js?
194 – Install Node.js on Mac
195 – Install Node.js on Windows
196 – Using Node.js
197 – How to use the Native Node Modules
198 – The NPM Package Manager and Installing External Node Modules
199 – [Project] QR Code Generator
200 – Tip from Noor – Step Up to the Challenge

Section 24 – Express.js with Node.js

201 – What is Express?
202 – Creating Our First Server with Express.
203 – HTTP Requests
204 – Postman
205 – Introduction to Middlewares
206 – Custom Middlewares
207 – Secrets Access Project
208 – Tip from Noor – How to Soldify Your Knowledge

Section 25 – EJS

209 – What is EJS?
210 – EJS Tags
211 – Passing Data to EJS Templates
212 – EJS Partials and Layouts
213 – Band Generator Project
214 – Tip from Noor – Location,Location,Location!

Section 26 – Capstone Project-Todolist Application
215 – Instructions

Section 27 – Git, Github and Version Control

216 – Introduction to Version Control and Git
217 – Version Control Using Git and the Command Line
218 – GitHub and Remote Repositories
219 – Gitignore
220 – Cloning
221 – Branching and Merging
222 – Optional git Challenge
223 – Forking and Pull Requests
224 – Spaced Repetition

Section 28 – Application Programming Interfaces(APIs)

225 – Introduction to APIs
226 – Structuring API Requests
227 – What is JSON?
228 – Making Server Side API Requests with Axios
229 – API Authentication
230 – REST APIs
231 – Secrets Project
232 – Tip From Noor – Use Accountability in Your Favour

Section 29 – Capstone Project – Use a Public API

233 – Instructions

Section 30 – Boss Level Challenge 3- Blog Website

234 – A New Challenge Format and What We’ll Make: A Blog
235 – Setting Up the Blog Project
236 – Challenge 1
237 – Challenge 1 Solution
238 – Challenge 2
239 – Challenge 2 Solution
240 – Challenge 3
241 – Challenge 3 Solution
242 – Challenge 4
243 – Challenge 4 Solution
244 – Challenge 5
245 – Challenge 5 Solution
246 – Challenge 6
247 – Challenge 6 Solution
248 – Challenge 7
249 – Challenge 7 Solution
250 – Challenge 8
251 – Challenge 8 Solution
252 – Challenge 9
253 – Challenge 9 Solution
254 – Challenge 10
255 – Challenge 10 Solution
256 – Challenge 11
257 – Challenge 11 Solution
258 – Challenge 12
259 – Challenge 12 Solution
260 – Challenge 13
261 – Challenge 13 Solution
262 – Challenge 14 and Solution
263 – Challenge 15
264 – Challenge 15 Solution
265 – Express Routing Parameters
266 – Challenge 16
267 – Challenge 16 Solution
268 – Challenge 17
269 – Challenge 17 Solution
270 – Challenge 18
271 – Challenge 18 Solution
272 – Challenge 19
273 – Challenge 19 Solution
274 – Challenge 20
275 – Challenge 20 Solution
276 – Challenge 21
277 – Challenge 21 Solution
278 – Tip from Noor – When Life Gives You Lemons

Section 31 – Databases

279 – Databases Explained: SQL vs. NOSQL

Section 32 – SQL

280 – SQL Commands: CREATE Table and INSERT Data
281 – SQL Commands: READ, SELECT, and WHERE
282 – Updating Single Values and Adding Columns in SQL
283 – SQL Commands: DELETE
284 – Understanding SQL Relationships, Foreign Keys and Inner Joins.
285 – Tip from Noor – Find All the Hard Working People

Section 33 – MongoDB

286 – Installing MongoDB on Mac
287 – Installing MongoDB on Windows
288 – MongoDB CURD Operations in the Shell: Create
289 – MongoDB CRUD Operations in the Shell: Reading & Queries
290 – MongoDB CRUD Operations in the Shell: Update
291 – MongoDB CRUD Operations in the Shell: Delete
292 – Relationships in MongoDB
293 – Working with The Native MongoDB Driver.
294 – If you have forgotten to Quit the Mongod Server.
295 – Tip from Noor – Daily routines

Section 34 – Mongoose

296 – Introduction to Mongoose
297 – Reading from Your Database with Mongoose
298 – Data Validation with Mongoose
299 – Updating and Deleting Data using Mongoose.
300 – Establishing Relationships and Embedding Documents using Mongoose.
301 – Tip from Noor – Deep Work

Section 35 – Putting Everything Together

302 – Lets take the ToDoList project to the Next Level and connect it with mongoose
303 – Rendering Database items in the ToDoList App
304 – Adding New Items to our ToDoList Database
305 – Deleting Items from out ToDoList Database
306 – Creating Custom Lists using Express Route Parameters
307 – Adding New Items to the Custom ToDoLists
308 – Revisiting Lodash and Deleting Items from Custom ToDo Lists
309 – Tip from Angela – One Step at a Time

Section 36 – Deploying Your Web Application

310 – How to Deploy Web Apps with a Database
311 – How to Setup MongoDB Atlas
312 – Deploying an App with a Database to Heroku
313 – Tip from Noor – Discipline Breeds Discipline

Section 37 – Boss Level Challenge 4 – Blog Website Upgrade

314 – Challenge: Give your Blog a Database
315 – Step 0 – Download the Starting Files
316 – Step 1 – Save Composed Posts with MongoDB
317 – Step 2 – Get the Home Page to Render the Posts
318 – Step 3 – Fix the bug
319 – Step 4 – Render the correct blog post based on post_id
320 – Completed Blog with Database Solution
321 – Tip from Noor – Dealing with Limitations

Section 38 – Build Your Own RESTful API From Scratch

322 – What is REST?
323 – Creating a Database with Robo 3T
324 – Set Up Server Challenge
325 – Set Up Server Solution
326 – Get All Articles
327 – POST a New Article
328 – Delete All Articles
329 – Chained Route Handlers using Express
330 – GET a Specific Article
331 – PUT a Specific Article
332 – PATCH a Specific Article
333 – DELETE a Specific Article
334 – Download The Completed project Code
335 – Tip from Noor – How to Get a job as Programmer

Section 39 – Authentication & Security

336 – Introduction to Authentication
337 – Getting Set Up
338 – Level 1 – Register users with Username and Password
339 – How to Review the Source Code
340 – Level 2 – Database Encryption
341 – Using Environment Variables to keep Secrets Safe
342 – Level 3 – Hashing Passwords
343 – Hacking 101
344 – Level 4 – Salting and Hashing passwords and bcrypt
345 – What are Cookies and Sessions
346 – Using Passport.js to Add Cookies and Sessions
347 – Level 6 – OAuth 2.0 & How to Implement Sign in with Google
348 – Finishing Up the App – Letting users Submit Secrets
349 – Download the Completed Project code
350 – Tip from Noor – How to Work as a Freelancer

Section 40 – React.js

351 – What is React?
352 – What we will make in this React module
353 – Introduction to Code Sandbox and the Structure of the Module
354 – Introduction to JSX and Babel
355 – JSX Code Practice
356 – Javascript Expressions in JSX & ES6 Template Literals
357 – Javascript Expressions in JSX Practice
358 – JSX Attributes & Styling React Elements
359 – Inline Styling for React Elements
360 – React Styling Practice
361 – React Components
362 – React Components practice
363 – Javascript ES6 – Import, Export and Modules
364 – Javascript ES6 Import, Export and Modules Practice
365 – [Windows] Local Environment Setup for React Development
366 – [Mac] Local Environment Setup for React Development
367 – Newer Versions of Node Troubleshooting
368 – keeper App project – Part 1 Challenge
369 – keeper App Part 1 Solution
370 – React Props
371 – React Props Practice
372 – React DevTools
373 – Mapping Data to Components
374 – Mapping Data to Components Practice
375 – Javascript ES6 Arrow functions
376 – Javascript ES6 Arrow Functions
377 – Keeper App project – Part 2
378 – React Conditional Rendering with the Ternary Operator & AND Operator
379 – Conditional Rendering Practice
380 – State in React – Declarative vs. Imperative programming
381 – React Hooks – useState
382 – useState hook Practice
383 – Javascript ES6 Object & Array Destructuring
384 – javascript ES6 Destructuring Challenge Solution
385 – Event Handling in React
386 – React Forms
387 – Class Components vs. Functional Components
388 – Changing Complex State
389 – Changing Complex State Practice
390 – Javascript ES6 Spread Operator
391 – Javascript ES6 Spread Operator practice
392 – Managing a Component Tree
393 – Managing a Component Tree Practice
394 – Keeper App project – Part 3
395 – React Dependencies & Styling the Keeper
396 – Tip From Noor – How to Build Your Own Product.

Section 41 – Web3 Decentralised App (DApp) Development with the Internet computer.

397 – What is Web3 ?
398 – How does the Blockchain actually work?
399 – What are DApps (Decentralised Apps) and how do you develop them?
400 – What is the Internet Computer (ICP)?
401 – Read me!
402 – [Mac Users] Installation and Setup for Web3 Development
403 – [Windows Users] Installation and Setup for Web3 Development

Section 42 – Build Your First Defi (Decentralised Finance) DApp-DBANK

404 – What You’ll Build – DBANK (Inspired by Compound)
405 – Introduction to the Motoko Language
406 – Motoko Functions and the Candid User Interface
407 – Motoko Conditionals and Type Annotations
408 – Query vs. Update Methods
409 – Orthogonal Persistance
410 – Tracking Time and Calculating Compound Interest

Quiz 5: Motoko Language Quiz

411 – Adding HTML and CSS to Create the Frontend for DBANK
412 – Connecting the Motoko Backend to our JS Frontend
413 – Where to Get Help and Support for Development on the Internet Computer

Section 43 – Deploying to the ICP Live Blockchain

414 – What are Cycles and the ICP Token?
415 – No Cycles, No Problems!
416 – How to Claim Free Cycles from Dfinity
417 – How to Deploy to the ICP Network
418 – How to Convert ICP into Cycles?
419 – [Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting

Section 44 – Building DApps on ICP with a React Frontend

420 – How to Configure a DFX Created Project to Use React
421 – Storing Data on a Canister
422 – Retrieving Data from a Canister
423 – Deleting and Persistance

Section 45 – Create Your Own Crypto Token

424 – Tokens and Coins: What are they and how are they used?
425 – Download and Configure the Skeletor Project
426 – Using Motoko Hashmaps to Store Token Balances
427 – Showing the User’s Token Balance on the Frontend
428 – Creating the Faucet Functionality Using the Shared Keyword
429 – Creating the Transfer Functionality
430 – Using the Transfer Functionality in the Faucet
431 – Persisting Non-Stable Types Using the Pre-and Postupgrade Methods
432 – What is the Internet Identity?
433 – Authenticating with the Internet Identity
434 – [Optional] Live Deployment to Test Internet Identity Authentication

Section 46 – Minting NFTs and Building an NFT marketplace like OpenSea

435 – What you’ll Build – A Websit to Mint, Buy and Sell NFTs.
436 – Minting NFTs
437 – Viewing the NFT on the Frontend
438 – Enabling the Minting Functionality on the Frontend
439 – Displaying Owned NFTs using the React Router
440 – Listing NFTs for Sale
441 – Styling the Listed NFTs
442 – Creating the “Discover” Page
443 – Buying NFTs
444 – Join the $6 Million Dollar Supernova Hackathon

Section 47 – Optional Module: Ask Noor Anything.

445 – AAA 1 – How to Soak in Programming Concepts and more…
446 – AAA 2 – Schedule for Learning to Code and more…
447 – AAA 3 – How to Start Freelancing and more…

448 – AAA 4 – The Live AMA

Section 48 – Next Steps.

449 – Vote for the Next
450 – Bonus Lecture.

About Muhammad Abdullah Al Noor, Chief Trainer of TrainerBD.com

Muhammad Abdullah Al Noor is an ICT professional and software developer having 20+ years hands-on experience in creating large ERPs with Oracle. He is an MBA (MIS) and OCP (Oracle Certified Professional). His areas of expertise are Project Management, Software Development with Oracle, Oracle Database Administration, Oracle Database Performance tuning and lead team of Oracle developers and Oracle DBA. He had successfully conducted a good number of sessions on Oracle Database and Programming Training up to advance level.

Learn More ..

Payment Procedure :