100 Days Of Code – 2023 Web Development Bootcamp

Introduction [Day 1]
1 Welcome to This Course! [Day 1]
2 What Is Web Development & How Does The Web Work [Day 1]
3 The Three Key Programming Languages [Day 1]
4 How The Web Works A Deep Dive [Day 1]
5 What About The www [Day 1]
6 The 100 Days of Code Challenge! [Day 1]
7 How To Get The Most Out Of This Course [Day 1]
8 Stuck in the Course We Got you Covered! [Day 1]
9 Join Our Learning Community!
10 How To Use The Attached Code [Day 1]

Building a First Website HTML & CSS Basics [Days 1 – 5]
11 Module Introduction [Day 1]
12 How to Create a Website [Day 1]
13 Creating our First HTML Page [Day 1]
14 Setting Up a Development Environment [Day 2]
15 Why Visual Studio Code [Day 2]
16 Understanding HTML Elements [Day 2]
17 Which HTML Elements Exist [Day 2]
18 Adding Another HTML Element [Day 2]
19 Exploring HTML Attributes [Day 2]
20 Getting Started with CSS (Day 2)
21 More CSS Styling [Day 2]
22 Working with Colors [Day 3]
23 Formatting our Code [Day 3]
24 Working with the Browser Developer Tools [Day 3]
25 Adding a Link [Day 3]
26 You can Nest HTML Elements! [Day 3]
27 Using Global CSS Styles [Day 3]
28 CSS Code Formatting [Day 3]
29 The HTML Document Skeleton & Metadata [Day 3]
30 Visual Studio Code Shortcuts & Tricks [Day 3]
31 Code Comments [Day 3]
32 First Summary [Day 3]
33 Styling the Anchor Element Also with Pseudo Hover [Day 4]
34 Why it’s Called Cascading Style Sheets [Day 4]
35 Storing CSS Code in External Files [Day 4]
36 The Void Element Syntax [Day 4]
37 Multiple Files & Requests [Day 4]
38 Selecting Single Elements with the ID Selector [Day 4]
39 Working with font-size and px [Day 4]
40 Using Other Fonts from Google Fonts [Day 4]
41 Understanding How HTML & CSS Handle Text & Whitespace [Day 5]
42 Adding an Image [Day 5]
43 Styling the Image & Using the Body Tag [Day 5]
44 Styling the Overall Page Background [Day 5]
45 Adding a Second HTML File [Day 5]
46 A Word About File Name Conventions [Day 5]
47 Using a Shared CSS File [Day 5]
48 Organizing Source Files in Folders [Day 5]
49 Summary [Day 5]

Diving Deeper Into HTML & CSS [Days 6 – 8]
50 Module Introduction [Day 6]
51 Using the Live Server Extension [Day 6]
52 The Development Server & The Local Website Address [Day 6]
53 Understanding Lists [Day 6]
54 Creating Lists [Day 6]
55 Understanding Parents, Children, Containers & More [Day 6]
56 Understanding Cascading, Inheritance & Specificity [Day 6]
57 Styling the Full Week Page [Day 6]
58 Introducing the CSS Box Model [Day 7]
59 Using the CSS Box Model [Day 7]
60 Creating HTML Layouts [Day 7]
61 Theory Selectors & Combinators [Day 7]
62 Using Selectors & Combinators [Day 7]
63 Understanding Classes [Day 7]
64 Block vs Inline Elements [Day 7]
65 Styling Differences Between Block & Inline Elements [Day 8]
66 Understanding Margin Collapsing [Day 8]
67 The box-shadow Property [Day 8]
68 Your Challenge! [Day 8]
69 Creating the HTML Layout [Day 8]
70 Styling the Main Section [Day 8]
71 Styling Images & Working with Negative Margins [Day 8]
72 Finishing Touches [Day 8]
73 Module Summary [Day 8]
74 A List Of All CSS Selectors [Day 8]

HTML & CSS – Practice & Summary [Days 9 – 10]
75 Module Introduction [Day 9]
76 Your Task! [Day 9]
77 Creating the Core Structure [Day 9]
78 Adding the Header Content [Day 9]
79 Adding Header Styling [Day 9]
80 Spacing & the CSS Box Model [Day 9]
81 Adding the Main Content [Day 9]
82 Styling the Main Content [Day 10]
83 Styling List Items & Links [Day 10]
84 Adding the Footer [Day 10]
85 Introducing New HTML Elements [Day 10]
86 Organizing our Files [Day 10]
87 Module Summary [Day 10]

Serving A Website (Hosting & Deployment) [Day 11]
88 Module Introduction [Day 11]
89 What is Hosting & Deployment [Day 11]
90 Hosting a First Static Website (Example Deployment on Netlify) [Day 11]
91 More Information On Netlify & HTTPS [Day 11]
92 Adding a Favicon [Day 11]
93 Relative vs Absolute Paths [Day 11]
94 Share Your Website! [Day 11]

Introducing Version Control with Git & GitHub [Days 11 – 14]
95 Module Introduction [Day 11]
96 What are Git & GitHub [Day 11]
97 Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]
98 Optional MacOS Terminal (z Shell) Crash Course [Day 11]
99 Optional Windows Command Prompt (cmd) Crash Course [Day 12]
100 Git MacOS Installation [Day 12]
101 Git Windows Installation [Day 12]
102 Understanding the Git Basics [Day 12]
103 Initializing the Repository & Creating our First Commit [Day 12]
104 Activating the Code Lense in Visual Studio Code [Day 13]
105 Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]
106 Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]
107 Onwards to GitHub – What & Why [Day 13]
108 Creating a GitHub Account & a Remote Repository [Day 13]
109 Please Read Windows Users Only
110 Understanding the Personal Access Token & git clone [Day 14]
111 Collaborating on Projects – Collaborators & Organizations [Day 14]
112 Contributing to Projects – Forks & Pull Requests [Day 14]
113 Wrap Up [Day 14]

Understanding HTML & CSS Layouts & Positioning [Days 15 – 20]
114 Module Introduction [Day 15]
115 Project Overview – What we Will Build [Day 15]
116 Project Setup [Day 15]
117 Creating the Landing Page Structure [Day 15]
118 Adding the Page Logo [Day 15]
119 Adding the Page Navigation [Day 15]
120 Introducing CSS Flexbox [Day 15]
121 Aligning Flex Items [Day 15]
122 Your Flexbox Challenge! [Day 16]
123 Adding Flexbox to our Project [Day 16]
124 Adding a Background Image [Day 16]
125 Creating a Container for the Hero-Content [Day 16]
126 Positioning Elements [Day 16]
127 Styling the Hero Content [Day 16]
128 Understanding Fixed & Absolute Positioning [Day 16]
129 Working with % Units & Creating a Top Navigation Bar [Day 17]
130 Finishing the Header [Day 17]
131 Introducing the Highlights Section [Day 17]
132 Creating the HTML Code [Day 17]
133 Building the Flex Container [Day 17]
134 Flex Item Layout [Day 17]
135 Styling Images with object-fit [Day 17]
136 Styling Text [Day 17]
137 Please Read Adding justify-content [Day 17]
138 Understanding Parent – Child Margin Collapsing [Day 18]
139 Working with CSS Functions – Linear Gradients [Day 18]
140 The Next Step [Day 18]
141 Creating a Footer Section [Day 18]
142 Styling the Footer [Day 18]
143 Places Page – Overview & Preparations [Day 18]
144 Creating the Card Content [Day 18]
145 Using position static [Day 18]
146 Creating the Card Look [Day 19]
147 Understanding overflow & Your Challenge! [Day 19]
148 Solving the Challenge [Day 19]
149 Creating all Cards [Day 19]
150 The CSS Grid – Theory [Day 19]
151 Understanding the nth-type Selector & grid-template-columns [Day 19]
152 Your Grid Challenge [Day 20]
153 Working with Unicode UTF-8 [Day 20]
154 Finishing Touches [Day 20]
155 Module Summary [Day 20]
156 Optional Diving Deeper Into position, Flexbox & the Grid [Day 20]

Understanding Responsive Web Design [Days 20 – 24]
157 Module Introduction [Day 20]
158 Project Overview [Day 20]
159 Please Read Optional Lectures [Day 20]
160 Optional Your Challenge – Creating the HTML Structure [Day 20]
161 Optional Challenge Solution – The HTML Structure [Day 20]
162 Optional Styling the Header [Day 21]
163 Optional Styling the main Section [Day 21]
164 What is Responsive Design [Day 21]
165 The Problem with Pixels [Day 21]
166 Introducing em & rem [Day 21]
167 Applying em & rem for the Font Size [Day 22]
168 Deep Dive em vs rem vs % [Day 22]
169 Updating the Project Units [Day 22]
170 Comparing Desktop & Mobile First Design [Day 22]
171 Understanding Media Queries [Day 22]
172 Adding Media Queries to the Project [Day 23]
173 Your Media Queries Challenge! [Day 23]
174 Side Drawer & Hamburger Icon – Theory [Day 23]
175 Creating the Hamburger Button [Day 23]
176 Creating the Side Drawer [Day 23]
177 Understanding HTML Fragments [Day 23]
178 Understanding the Target Selector [Day 24]
179 Finishing the Side Drawer [Day 24]
180 Introducing the z-index Property [Day 24]
181 Module Summary [Day 24]

Creating Beautiful Websites [Days 24 – 25]
182 Module Introduction [Day 24]
183 Three Things to Keep in Mind [Day 24]
184 Introducing the Module Project [Day 24]
185 Sizing & Spacing [Day 24]
186 Choosing the Right Font [Day 24]
187 Understanding The Importance of Grey, Primary & Accent Colors [Day 24]
188 Introducing CSS Variables CSS Custom Properties [Day 25]
189 CSS Variables in Action [Day 25]
190 Comparing root vs html vs Selectors [Day 25]
191 Understanding CSS Transformations [Day 25]
192 Adding CSS Transitions [Day 25]
193 Working with SVGs [Day 25]

Adding Forms To Websites [Days 26 – 29]
194 Module Introduction [Day 26]
195 What & Why [Day 26]
196 Important Form HTML Elements [Day 26]
197 Our First Input Element [Day 26]
198 Adding a Button [Day 26]
199 The Form Element, Form Submission & Different Types of Requests [Day 26]
200 Styling the Form Element [Day 27]
201 Adding Labels [Day 27]
202 More Detailed Forms Styling [Day 27]
203 Understanding Different Input Types [Day 27]
204 Understanding Email, Numbers, Password & Date Types [Day 27]
205 Working with Radio Buttons [Day 27]
206 Using Checkboxes [Day 28]
207 The Textarea Element For Longer Text [Day 28]
208 Adding a Dropdown [Day 28]
209 Forms & Semantics (Structuring Forms) [Day 28]
210 More on Form Buttons [Day 28]
211 Validation Attributes [Day 28]
212 More Input & Form Attributes [Day 28]
213 Your Challenge! [Day 29]
214 Challenge Base Page Structure & Styling [Day 29]
215 Challenge First Set of Input Elements [Day 29]
216 Challenge Adding Remaining Elements [Day 29]
217 Challenge Submission & Validation [Day 29]
218 Challenge Styling [Day 29]

Understanding the JavaScript Basics [Days 29 – 33]
219 Module Introduction [Day 29]
220 What is JavaScript & Why would we use it [Day 29]
221 What You Will Learn In this Module [Day 29]
222 Introducing Values & Variables [Day 29]
223 Adding the script HTML Element [Day 30]
224 Working with Values & Basic JavaScript Commands [Day 30]
225 Introducing Variables (Data Containers) [Day 30]
226 A Closer Look At The JavaScript Syntax [Day 30]
227 A Second Variable & Practice Time! [Day 30]
228 Outsourcing JavaScript Code Into External Files [Day 30]
229 Introducing Arrays (Managing Lists Of Data) [Day 30]
230 Introducing Objects (Grouping Related Data) [Day 30]
231 Splitting Code Across Multiple Lines [Day 31]
232 Accessing Object Properties [Day 31]
233 Performing Operations [Day 31]
234 Onwards To Custom Commands! [Day 31]
235 Introducing Functions [Day 31]
236 Functions & Variables [Day 31]
237 Returning Values In Functions [Day 31]
238 Passing Data Into Functions With Parameters [Day 31]
239 Functions – A Summary [Day 31]
240 Time To Practice The Problem [Day 32]
241 Time To Practice The Solution [Day 32]
242 Introducing Methods [Day 32]
243 Making Our Developer Life Easier (Logging with console.log()) [Day 32]
244 Math Operations & Working With Different Kinds Of Values [Day 32]
245 The Modulus Operator [Day 32]
246 Math Operations & Math Rules [Day 32]
247 Performing String (Text) Operations [Day 32]
248 JavaScript Operators, Shorthand Operators & Value Types [Day 32]
249 String Operations & String Methods [Day 32]
250 Basic Array Operations [Day 33]
251 Splitting JavaScript Code Across Multiple Files [Day 33]
252 Module Summary [Day 33]

Advanced JavaScript Working with the DOM [Days 33 – 37]
253 Module Introduction [Day 33]
254 Our Starting Setup [Day 33]
255 The Global window & document Objects [Day 33]
256 What Is The DOM [Day 33]
257 Exploring The DOM [Day 33]
258 Drilling Into The DOM To Select & Change HTML Elements [Day 33]
259 Loading Our Script Correctly [Day 33]
260 The DOM Tree & DOM Traversal [Day 33]
261 Drilling Into The DOM & Exploring Text Nodes [Day 34]
262 DOM Drilling Limitations [Day 34]
263 Searching The DOM For Elements [Day 34]
264 Querying Elements [Day 34]
265 Common Query Methods [Day 34]
266 Time to Practice The Problem [Day 34]
267 Time to Practice The Solution [Day 34]
268 Next Steps [Day 34]
269 Inserting New HTML Elements via JavaScript [Day 34]
270 Deleting DOM Elements [Day 35]
271 Moving Existing Elements Around [Day 35]
272 Working with innerHTML [Day 35]
273 Introducing Events [Day 35]
274 Adding a First click Event Listener [Day 35]
275 Listening To User Input Events [Day 35]
276 The event Object [Day 35]
277 A More Realistic Demo & Example [Day 36]
278 Introducing Constant Variables (Constants) [Day 36]
279 Changing Element Styles With JavaScript [Day 36]
280 Managing CSS Classes With JavaScript [Day 36]
281 Module Summary [Day 36]
282 Time to Practice The Problem [Day 37]
283 Time to Practice The Solution [Day 37]

Advanced JavaScript Control Structures [Days 37 – 39]
284 Module Introduction [Day 37]
285 Getting Started with Control Structures [Day 37]
286 Introducing Boolean Values (Booleans) & Comparison Operators [Day 37]
287 Booleans & Comparison Operators In Action [Day 37]
288 Using Booleans In if Statements (Conditional Code Execution) [Day 37]
289 A Real Example [Day 38]
290 Alternatives with else and else if [Day 38]
291 More on Boolean Values [Day 38]
292 Truthy & Falsy Values [Day 38]
293 Introducing Loops (Repeated Code Execution) [Day 38]
294 The Regular for Loop [Day 38]
295 The for-of Loop (for Arrays) [Day 38]
296 Using the Regular for Loop with Arrays [Day 38]
297 The for-in Loop (for Objects) [Day 38]
298 The while Loop [Day 38]
299 Practice Time Setup & The for Loop [Day 39]
300 Practice Time The for-of Loop [Day 39]
301 Practice Time The for-in Loop [Day 39]
302 Practice Time The while Loop [Day 39]
303 Module Summary [Day 39]

Milestone Project Building a Tic-Tac-Toe Game [Days 40 – 44]
304 Module Introduction [Day 40]
305 Planning The Project [Day 40]
306 Creating The HTML Structure [Day 40]
307 Adding Base Page Styles [Day 40]
308 Adding Styling For The Game Configuration Area [Day 41]
309 Styling The Game Board [Day 41]
310 Adding JavaScript, Script Files & First Event Listeners [Day 41]
311 Showing & Hiding The Configuration Modal (Overlay) [Day 41]
312 Handling Form Submission With JavaScript [Day 42]
313 Validating User Input With JavaScript [Day 42]
314 Storing & Managing Submitted Data [Day 42]
315 Adding Logic For Starting A Game [Day 43]
316 Managing Game Rounds (Turns) & Field Selection [Day 43]
317 Tracking Selected Fields On The Game Board [Day 43]
318 Checking For A Winner Or Draw [Day 44]
319 Ending The Game & Adding Restart Logic [Day 44]
320 Module Summary [Day 44]

Working with Third-Party Packages [Days 45 – 46]
321 Module Introduction [Day 45]
322 What & Why [Day 45]
323 Third-Party Code vs Custom Code (Your Own Code) [Day 45]
324 First Example Adding Bootstrap For Some Default Styling [Day 45]
325 Adding & Using the Bootstrap CSS Package [Day 45]
326 Adding a JavaScript Package [Day 45]
327 Adding an Image Carousel Gallery with a Third-Party Package [Day 45]
328 Combining Third-Party Packages With Custom Code [Day 45]
329 More Bootstrap Examples [Day 45]
330 Exercise Solution & First Summary [Day 45]
331 Another Example Preparing a Parallax Page [Day 45]
332 Adding A Parallax Effect Package [Day 46]
333 Viewing Third-Party Source Code & Module Summary [Day 46]

Onwards To Backend Development [Day 46]
334 Module Introduction [Day 46]
335 What is The Backend & Why Do We Need Server-side Code [Day 46]
336 Dynamic Websites vs Static Websites [Day 46]
337 Frontend vs Backend vs Fullstack Development [Day 46]
338 Choosing a Backend (Server-side) Programming Language [Day 46]

NodeJS Introduction – Getting Started With Backend Development [Day 47]
339 Module Introduction [Day 47]
340 Installing NodeJS [Day 47]
341 Executing NodeJS Code [Day 47]
342 Creating a Custom NodeJS Server [Day 47]
343 Handling Requests & Creating Custom Responses [Day 47]
344 Doing More Server-side Work [Day 47]
345 Summary [Day 47]

Enhancing NodeJS with ExpressJS [Days 48 – 49]
346 Module Introduction [Day 48]
347 Installing Express with npm [Day 48]
348 Creating a Server with Express & Handling Requests + Responses [Day 48]
349 Parsing User Data With Express [Day 48]
350 Storing Data in (Server-side) Files [Day 48]
351 More About The JSON Format [Day 49]
352 Reading File Data & Returning Dynamic Responses (Dynamic HTML Code) [Day 49]
353 Enhancing the Developer Workflow with nodemon [Day 49]
354 Summary [Day 49]

More Express Static & Dynamic Content with Templates (EJS) [Days 49 – 51]
355 Module Introduction [Day 49]
356 Creating a Starting Project & What Needs To Change [Day 49]
357 Setting Up A Basic Express App (incl. Practice) [Day 49]
358 Serving HTML Files With Node & Express [Day 49]
359 Serving Static Files (CSS & JavaScript) [Day 50]
360 Parsing Form Data & Redirecting Requests [Day 50]
361 Adding the EJS Template Engine [Day 50]
362 Rendering Dynamic Content With Templates [Day 50]
363 Outputting Repeated Content With EJS & Loops [Day 50]
364 Rendering Conditional Content [Day 50]
365 Including Partial Content [Day 51]
366 EJS & IDE Support [Day 51]
367 Module Summary [Day 51]

Handling Dynamic Routes (URLs), Errors & Manag. Bigger Express Projects [51-53]
368 Module Introduction [Day 51]
369 Introducing Dynamic Routes [Day 51]
370 Managing Data with Unique IDs [Day 51]
371 Loading & Displaying Detail Data [Day 52]
372 Showing a 404 Page For Not Found Cases [Day 52]
373 More 404 Page Usage (Non-Existent Routes) [Day 52]
374 Handling Server-Side Errors (500 Status Code) [Day 52]
375 Working With Status Codes [Day 52]
376 Code Refactoring & Adding More Functions [Day 52]
377 Importing & Exporting Code In NodeJS [Day 53]
378 Using The Express Router To Split The Route Configuration [Day 53]
379 Introducing Query Parameters (& Hidden Form Fields) [Day 53]
380 Query Parameters vs Route Parameters [Day 53]
381 Module Summary [Day 53]

Exploring More Advanced JavaScript Concepts [Days 54 – 56]
382 Module Introduction [Day 54]
383 Functions & Default Parameters [Day 54]
384 Rest Parameters & The Spread Operator [Day 54]
385 Functions Are Objects! [Day 54]
386 Working with Template Literals [Day 54]
387 Primitive vs Reference Values [Day 54]
388 Custom Error Handling With try catch [Day 55]
389 Error Data & Throwing Custom Errors [Day 55]
390 Variable Scoping & Shadowing [Day 55]
391 Introducing Classes As Object Blueprints [Day 55]
392 Classes & Methods (and this) [Day 55]
393 Destructuring Objects & Arrays [Day 55]
394 Diving Into Asynchronous Code & Callback Functions [Day 56]
395 Introducing Promises [Day 56]
396 Asynchronous Code & Error Handling [Day 56]
397 Improving Code With async await [Day 56]
398 Module Summary [Day 56]

Onwards To Databases [Days 56 – 57]
399 Module Introduction [Day 56]
400 Why Databases And What Are Databases In The First Place [Day 56]
401 A Quick Introduction To SQL Databases (RDBMS) [Day 57]
402 A Quick Introduction To NoSQL Databases [Day 57]
403 SQL vs NoSQL Databases [Day 57]

SQL Databases – Introduction & Core Concepts [Days 57 – 59]
404 Module Introduction [Day 57]
405 What & Why [Day 57]
406 RDBMS Options [Day 57]
407 Installing MySQL & Setup Steps [Day 57]
408 Database Server vs Databases vs Tables [Day 57]
409 Writing Our First SQL Code & Creating a Database [Day 57]
410 Creating a Table & Table Structure [Day 58]
411 Inserting Data Into A Table [Day 58]
412 Reading Data From A Table (incl. Filtering) [Day 58]
413 Updating & Deleting Data [Day 58]
414 Designing A More Complex Database [Day 58]
415 Adding A New Table [Day 58]
416 Implementing A More Complex Design With Relations [Day 59]
417 Inserting Related Data [Day 59]
418 Practice Inserting Related Data [Day 59]
419 Querying & Joining Related Data [Day 59]
420 Practice Joining Data [Day 59]
421 Module Summary & More On Relationships [Day 59]

Using MySQL In NodeJS & Express Websites [Days 60 – 62]
422 Module Introduction [Day 60]
423 Why Should Database-Accessing Code Run On The Backend [Day 60]
424 What We’ll Build In This Section [Day 60]
425 Planning Our Database Structure [Day 60]
426 Database Initialization [Day 60]
427 Project Setup [Day 60]
428 Creating Our First Routes [Day 60]
429 Connecting To The Database & Querying Data [Day 61]
430 Inserting Data With Placeholders (Injecting Dynamic Data) [Day 61]
431 Fetching & Displaying a List Of Blog Posts [Day 61]
432 Fetching & Displaying a Single Blog Post [Day 62]
433 Formatting & Transforming Fetched Data [Day 62]
434 Preparing The Update Post Page [Day 62]
435 Updating Posts [Day 62]
436 Deleting Posts [Day 62]
437 Module Summary [Day 62]

NoSQL & MongoDB – An Introduction [Days 63 – 64]
438 Module Introduction [Day 63]
439 The Idea Behind NoSQL Database Systems [Day 63]
440 Introducing MongoDB [Day 63]
441 General Setup Instructions & Installing MongoDB on macOS [Day 63]
442 Installing MongoDB on Windows [Day 63]
443 Installing the MongoDB Shell [Day 63]
444 Inserting Data with MongoDB [Day 63]
445 Reading & Filtering Data [Day 64]
446 Updating Documents In A MongoDB Database [Day 64]
447 Deleting Documents With MongoDB [Day 64]
448 Planning a Complete Database Design Layout [Day 64]
449 Implementing the Planned Design & Layout [Day 64]
450 Practice Time & More Filtering Operators [Day 64]

NodeJS & MongoDB (NoSQL) [Days 65 – 67]
451 Module Introduction [Day 65]
452 Planning the Database Structure & Layout [Day 65]
453 Project & Database Initialization [Day 65]
454 Connecting to MongoDB – Potential Error
455 Connecting to MongoDB (from inside NodeJS) [Day 65]
456 Fetching & Displaying A List Of Authors [Day 65]
457 Inserting Documents (New Posts) [Day 65]
458 Fetching & Displaying Documents [Day 66]
459 MongoDB Projection & NodeJS
460 Fetching a Single Document [Day 66]
461 Transforming & Preparing Data [Day 66]
462 Updating Documents [Day 66]
463 Deleting Documents [Day 66]
464 ExpressJS & Handling Asynchronous Code Errors [Day 67]

Adding File Upload To A Website [Days 67 – 68]
465 Module Introduction [Day 67]
466 The Two Sides Of Uploading Files & Setting Up A Starting Project [Day 67]
467 Adding A File Picker To A Form [Day 67]
468 Parsing Incoming File Uploads With The multer Package [Day 67]
469 How To Store Files On A Backend [Day 67]
470 Configuring Multer In-Depth [Day 67]
471 Storing File Data In A Database (And What NOT To Store) [Day 68]
472 Serving Uploaded Files To Website Visitors [Day 68]
473 Adding An Image Preview Feature [Day 68]
474 Module Summary [Day 68]

Ajax & Asynchronous JS-driven Http Requests [Days 68 – 70]
475 Module Introduction [Day 68]
476 What Is Ajax And Why Would We Need It [Day 68]
477 What is Ajax [Day 68]
478 The Starting Project & A Problem [Day 69]
479 Sending & Handling a GET Ajax Request [Day 69]
480 Updating The DOM Based On The Response [Day 69]
481 Preparing The POST Request Data [Day 69]
482 Sending & Handling a POST Ajax Request [Day 69]
483 Improving The User Experience (UX) [Day 70]
484 Handling Errors (Server-side & Technical) [Day 70]
485 We Now Have More HTTP Methods! [Day 70]
486 Module Summary [Day 70]

User Authentication & Working With Sessions [Days 70 – 73]
487 Module Introduction [Day 70]
488 What is Authentication & Why Would You Want To Add It To A Website [Day 70]
489 Our Starting Project [Day 70]
490 Adding a Basic Signup Functionality [Day 70]
491 Must-Do Hashing Passwords [Day 71]
492 Adding User Login Functionality [Day 71]
493 Validating Signup Information [Day 71]
494 Introducing Sessions & Cookies – The Stars Of Authentication [Day 71]
495 Adding Sessions Support To Our Website [Day 71]
496 Storing Authentication Data In Sessions [Day 72]
497 Using Sessions & Cookies For Controlling Access [Day 72]
498 Adding The Logout Functionality [Day 72]
499 A Closer Look At Cookies [Day 72]
500 Diving Deeper Into Sessions (Beyond Authentication) [Day 72]
501 Authorization vs Authentication [Day 73]
502 Practicing Sessions & Working With Sessions [Day 73]
503 Writing Custom Middlewares & Using res.locals [Day 73]
504 Module Summary [Day 73]

Security [Days 74 – 75]
505 Module Introduction [Day 74]
506 Authentication vs Website Security [Day 74]
507 Understanding CSRF Attacks [Day 74]
508 Partial CSRF Protection With Same-Site Cookies [Day 74]
509 Implementing A Better CSRF Protection [Day 74]
510 csurf() Alternative
511 Understanding XSS Attacks [Day 74]
512 Protecting Against XSS Attacks [Day 74]
513 Understanding SQL Injection Attacks [Day 75]
514 Protecting Against SQL Injection Attacks [Day 75]
515 A Word About NoSQL Injection [Day 75]
516 Module Summary [Day 75]
517 Avoid Exposing Your Server-side Code or Data Accidentally! [Day 75]

Writing Good Code, Refactoring & The MVC Pattern [Days 75 – 78]
518 Module Introduction [Day 75]
519 Our Starting Project (Deep Dive) [Day 75]
520 What’s Wrong With Our Code [Day 75]
521 Splitting Our Routes [Day 76]
522 Extracting Configuration Settings [Day 76]
523 Extracting Custom Middleware [Day 76]
524 An Introduction To The MVC Pattern [Day 76]
525 Creating Our First Model [Day 76]
526 Adding Update & Delete Functionalities To The Model [Day 76]
527 Adding Fetch Functionalities To The Model [Day 76]
528 Adding A First Controller & Controller Actions [Day 77]
529 Refactoring The Sessions & Input Validation Errors Functionality [Day 77]
530 Refactoring The CSRF Token Handling [Day 77]
531 Migrating The Authentication Functionality To MVC [Day 77]
532 Improving Asynchronous Error Handling [Day 78]
533 Protecting Routes With Custom Middleware [Day 78]

Milestone Project A Complete Online Shop (From A to Z!) [Days 78 – 92]
534 Module Introduction [Day 78]
535 Planning The Project [Day 78]
536 Your Challenge! [Day 78]
537 Course Project Setup [Day 78]
538 Creating Folders, Files & A First Set Of Routes [Day 78]
539 Adding EJS & First Views [Day 79]
540 Populating & Rendering The First View [Day 79]
541 Adding Base CSS Files & Static File Serving [Day 79]
542 Adding CSS Variables & A Website Theme [Day 79]
543 More Base CSS Styles For The Website [Day 80]
544 Styling First Form Elements [Day 80]
545 Adding A MongoDB Database Server & Connection [Day 80]
546 Adding User Signup [Day 81]
547 Security Time Adding CSRF Protection [Day 81]
548 Implementing Proper Error Handling With The Error Handling Middleware [Day 81]
549 Introducing Sessions & Configuring Sessions [Day 81]
550 Implementing Authentication & User Login [Day 82]
551 Finishing Authentication & Checking The Auth Status (Custom Middleware) [Day 82]
552 Adding Logout Functionality [Day 82]
553 Handling Errors In Asynchronous Code [Day 82]
554 Adding User Input Validation [Day 82]
555 Flashing Errors & Input Data Onto Sessions [Day 83]
556 Displaying Error Messages & Saving User Input [Day 83]
557 Admin Authorization & Protected Navigation [Day 83]
558 Setting Up Base Navigation Styles [Day 83]
559 Building a Responsive Website [Day 84]
560 Frontend JavaScript For Toggling The Mobile Menu [Day 84]
561 Adding Product Admin Pages & Forms [Day 84]
562 Adding The Image Upload Functionality [Day 85]
563 More Data Adding a Product Model & Storing Products In The Database [Day 85]
564 Fetching & Outputting Product Items [Day 85]
565 Styling Product Items [Day 86]
566 Adding the Product Details (Single Product) Page [Day 86]
567 Updating Products (As Administrator) [Day 86]
568 Adding a File Upload Preview [Day 87]
569 Making Products Deletable [Day 87]
570 Using Ajax Frontend JS Requests & Updating The DOM [Day 87]
571 Various Fixes & Proper Route Protection [Day 88]
572 Outputting Products For Customers [Day 88]
573 Outputting Product Details [Day 88]
574 Adding A Cart Model [Day 89]
575 Working On The Shopping Cart Logic [Day 89]
576 Adding Cart Items Via Ajax Requests [Day 89]
577 Adding A Cart Page [Day 90]
578 Styling The Cart Page [Day 90]
579 Updating Cart Items (Changing Quantities) [Day 90]
580 Updating Carts Via Ajax Requests (PATCH Requests) [Day 90]
581 Updating The DOM After Cart Item Updates [Day 91]
582 JavaScript & Floating Point Arithmetic [Day 91]
583 Adding The Order Controller & A Basic Order Model [Day 91]
584 Saving Orders In The Database [Day 91]
585 Displaying Orders (For Customers & Administrators) [Day 92]
586 Managing Orders As An Administrator [Day 92]
587 Keeping Cart Items Updated [Day 92]
588 Bugfixing & Polishing [Day 92]
589 Module Summary [Day 92]

Working With Services & APIs (e.g. Adding Stripe Payments) [Day 93]
590 Module Introduction [Day 93]
591 What Are Services & APIs [Day 93]
592 Why Would You Use Services & APIs [Day 93]
593 Introducing Stripe [Day 93]
594 Creating A Stripe Account [Day 93]
595 Setting Up A Stripe API Request [Day 93]
596 Configuring The Stripe Request & Handling Payments [Day 93]
597 Module Summary [Day 93]
598 More Services Social Login (Google, Facebook), Google Analytics & More [Day 93]

Deploying (Publishing) Websites [Days 94 – 95]
599 Module Introduction [Day 94]
600 How Are Websites Made Available To The Public [Day 94]
601 Static vs Dynamic Websites [Day 94]
602 Hosting Database Servers [Day 94]
603 Deployment (Preparation) Steps [Day 94]
604 The Example Projects [Day 94]
605 Testing & Code Preparation (incl. Environment Variables) [Day 94]
606 Evaluating Cross-Browser Support [Day 94]
607 Search Engine Optimization (SEO) [Day 94]
608 Adding a Favicon [Day 94]
609 Improving Performance & Shrinking Assets (JS, Images) [Day 95]
610 Deployment Example Static Websites (Refresher) [Day 95]
611 Deployment Example Dynamic Website With Backend Code [Day 95]
612 Deploying A MongoDB Database With Atlas [Day 95]
613 Finishing Dynamic Website Deployment [Day 95]

Web Services & Building Custom (REST) APIs [Days 95 – 97]
614 Module Introduction [Day 95]
615 APIs & Services What & Why [Day 95]
616 JS Packages vs URL-based APIs What We Will Build Here [Day 95]
617 APIs vs Traditional Websites [Day 95]
618 Introducing REST APIs [Day 96]
619 Building A First Basic REST API [Day 96]
620 Enhancing The API & Making It More Realistic [Day 96]
621 A More Complex REST API First Steps [Day 96]
622 Finishing The First API Endpoints [Day 97]
623 Testing APIs With Postman [Day 97]
624 Adding PATCH & DELETE Routes Endpoints [Day 97]
625 Adding A Decoupled Frontend Website (SPA) [Day 97]
626 Why Would You Use A Decoupled Frontend SPA [Day 97]
627 Understanding CORS Errors [Day 97]
628 Fixing CORS Errors & Connecting The Frontend SPA To The REST API [Day 97]

Working With Frontend JavaScript Frameworks & Introducing Vue.js [Days 98 – 99]
629 Module Introduction [Day 98]
630 Why Would You Use Frontend JavaScript UI Frameworks [Day 98]
631 React vs Vue vs Angular Which Framework Should You Use [Day 98]
632 Getting Started With Vue.js (Vue) [Day 98]
633 Listening To Events & Updating Data + the DOM [Day 98]
634 Introducing Two-Way-Binding [Day 98]
635 Outputting Lists Of Data [Day 99]
636 Outputting Content Conditionally [Day 99]
637 Updating Data [Day 99]
638 Deleting Data [Day 99]
639 Sending a POST Http Request [Day 99]
640 Loading Data & Managing Loading States [Day 99]
641 Loading Vue Differently [Day 99]
642 Sending PATCH + DELETE Requests & Module Summary [Day 99]

Course Summary & Where To Go Next [Day 100]
643 Bonus Possible Next Steps, Practice Opportunities & Project Ideas [Day 100]