CF

100 Days Of Code: The Complete Web Development Bootcamp 2024

78h 51m 55s
English
Paid

100 Days Of Code: The Complete Web Development Bootcamp 2024 is a 613-lesson 78 hours 51 minutes self-paced course by Academind Pro (Maximilian Schwarzmüller). Learn web development step by step.

Course facts

Lessons
613
Duration
78 hours 51 minutes
Level
All levels
Language
English
Updated
Instructor
Academind Pro (Maximilian Schwarzmüller)
Price
Premium

Learn web development step by step. This guide walks you through the basics and helps you build real projects. You can follow the 100‑day plan or move at your own pace.

Who This Course Is For

You can start with zero experience. You will learn each skill one step at a time. You will write code, test ideas and learn how the web works.

If you already know the basics, you can use this course to go deeper. You can skip parts you know and focus on areas like REST APIs, NodeJS or website security.

Why Web Development Matters

Web developers build more than websites. You build tools behind mobile apps, online shops, games and web apps. Many companies need these skills, so demand stays high.

You can use these skills in a job or to build your own project.

How the Course Works

The course is split into clear modules. You can follow it in order or jump to topics you want to learn. If you are new to coding, follow the lessons in sequence so each step makes sense.

The 100 Days of Code Plan

You can follow a 100‑day plan where you code for 1 hour each day. This helps you stay on track. A companion site and notes guide you through the plan.

This plan is optional. You can move faster or slower and skip topics if you want.

Projects You Will Build

You learn by doing. You will build a browser game, a blog, a travel site, an online shop and more. These projects help you learn each skill in a real setting.

Money‑Back Option

The course has a 30‑day money‑back guarantee. You can try it and get a refund if it is not a good fit.

What You Will Learn

  • How the web works
  • HTML, CSS and JavaScript basics
  • HTML page structure and common elements
  • CSS box model, units, flexbox and layout tools
  • Responsive design and CSS grid
  • JavaScript basics and how to work with the DOM
  • Handling browser events and user input
  • Frontend projects like a Tic‑Tac‑Toe game
  • Backend development with NodeJS and Express
  • Dynamic pages, routing and templates
  • SQL and NoSQL databases
  • Using databases with NodeJS and Express
  • Auth, security basics, file uploads and input checks
  • Full projects like a simple online shop
  • Using third‑party services like Stripe
  • REST API design
  • Intro to frontend frameworks like Vue.js

Additional

https://github.com/academind/100-days-of-web-development

How To Use The Attached Code

Who teaches 100 Days Of Code: The Complete Web Development Bootcamp 2024? Academind Pro (Maximilian Schwarzmüller)

Academind Pro (Maximilian Schwarzmüller) thumbnail

Academind is the teaching brand of Maximilian Schwarzmüller (Max) and Manuel Lorenz, two German developers whose Udemy catalog has become one of the largest single-instructor presences on that platform. Max in particular is widely cited as one of the clearest teachers of the JavaScript framework landscape — his Angular, React, Vue, and Node.js courses have collectively taught millions of students.

The Academind Pro platform extends beyond Udemy with deeper, more comprehensive courses aimed at developers building real applications rather than picking up syntax. Course material covers the full modern web stack: React (including Next.js), Vue, Angular, Node.js, NestJS, TypeScript, Docker, AWS, React Native, Flutter, and the broader full-stack JavaScript ecosystem.

The CourseFlix listing under this source carries over 25 Academind Pro courses spanning that range. Material is paid; Academind Pro runs on per-course pricing on the original platform. Courses are taught in Max's signature thorough, build-an-application-with-me style — long-form, deeply project-based, and continuously updated as the underlying frameworks evolve.

What lessons are included in 100 Days Of Code: The Complete Web Development Bootcamp 2024?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 613 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome to This Course! [Day 1]
All Course Lessons (613)
#Lesson TitleDurationAccess
1
Welcome to This Course! [Day 1] Demo
01:10
2
What Is "Web Development" & How Does The Web Work? [Day 1]
07:51
3
The Three Key Programming Languages [Day 1]
05:23
4
How The Web Works: A Deep Dive [Day 1]
08:09
5
The 100 Days of Code Challenge! [Day 1]
03:51
6
How To Get The Most Out Of This Course [Day 1]
03:40
7
Stuck in the Course? We Got you Covered! [Day 1]
03:24
8
Module Introduction [Day 1]
02:24
9
How to Create a Website [Day 1]
05:20
10
Creating our First HTML Page [Day 1]
08:29
11
Setting Up a Development Environment [Day 2]
11:23
12
Why Visual Studio Code? [Day 2]
02:07
13
Understanding HTML Elements [Day 2]
06:03
14
Which HTML Elements Exist? [Day 2]
07:17
15
Adding Another HTML Element [Day 2]
07:25
16
Exploring HTML Attributes [Day 2]
04:34
17
Getting Started with CSS (Day 2)
06:18
18
More CSS Styling [Day 2]
02:39
19
Working with Colors [Day 3]
08:13
20
Formatting our Code [Day 3]
04:17
21
Working with the Browser Developer Tools [Day 3]
06:14
22
Adding a Link [Day 3]
06:41
23
You can Nest HTML Elements! [Day 3]
02:19
24
Using Global CSS Styles [Day 3]
07:50
25
The HTML Document Skeleton & Metadata [Day 3]
07:37
26
Visual Studio Code Shortcuts & Tricks [Day 3]
07:50
27
First Summary [Day 3]
06:25
28
Styling the Anchor Element Also with Pseudo Hover [Day 4]
04:50
29
Why it's Called Cascading Style Sheets [Day 4]
02:26
30
Storing CSS Code in External Files [Day 4]
06:24
31
The Void Element Syntax [Day 4]
01:23
32
Multiple Files & Requests [Day 4]
06:07
33
Selecting Single Elements with the ID Selector [Day 4]
05:40
34
Working with "font-size" and "px" [Day 4]
05:16
35
Using Other Fonts from Google Fonts [Day 4]
08:14
36
Adding an Image [Day 5]
04:49
37
Styling the Image & Using the Body Tag [Day 5]
07:49
38
Styling the Overall Page Background [Day 5]
01:59
39
Adding a Second HTML File [Day 5]
05:36
40
Using a Shared CSS File [Day 5]
04:45
41
Organizing Source Files in Folders [Day 5]
03:12
42
Summary [Day 5]
03:55
43
Module Introduction [Day 6]
01:57
44
Using the Live Server Extension [Day 6]
03:39
45
Understanding Lists [Day 6]
05:03
46
Creating Lists [Day 6]
08:02
47
Understanding Parents, Children, Containers & More [Day 6]
08:45
48
Understanding Cascading, Inheritance & Specificity [Day 6]
08:02
49
Styling the Full Week Page [Day 6]
06:21
50
Introducing the CSS Box Model [Day 7]
07:03
51
Using the CSS Box Model [Day 7]
08:52
52
Creating HTML Layouts [Day 7]
07:23
53
Theory: Selectors & Combinators [Day 7]
04:09
54
Using Selectors & Combinators [Day 7]
10:45
55
Understanding Classes [Day 7]
06:23
56
Block vs Inline Elements [Day 7]
08:19
57
Styling Differences Between Block & Inline Elements [Day 8]
09:16
58
Understanding Margin Collapsing [Day 8]
04:44
59
The "box-shadow" Property [Day 8]
06:25
60
Your Challenge! [Day 8]
01:44
61
Creating the HTML Layout [Day 8]
04:29
62
Styling the Main Section [Day 8]
05:39
63
Styling Images & Working with Negative Margins [Day 8]
05:16
64
Finishing Touches [Day 8]
04:09
65
Module Summary [Day 8]
05:41
66
Module Introduction [Day 9]
02:45
67
Your Task! [Day 9]
02:18
68
Creating the Core Structure [Day 9]
11:22
69
Adding the Header Content [Day 9]
03:35
70
Adding Header Styling [Day 9]
12:09
71
Spacing & the CSS Box Model [Day 9]
05:13
72
Adding the Main Content [Day 9]
11:12
73
Styling the Main Content [Day 10]
06:57
74
Styling List Items & Links [Day 10]
16:58
75
Adding the Footer [Day 10]
12:57
76
Introducing New HTML Elements [Day 10]
05:38
77
Organizing our Files [Day 10]
01:59
78
Module Summary [Day 10]
01:23
79
Module Introduction [Day 11]
02:30
80
What is "Hosting" & "Deployment"? [Day 11]
03:17
81
Hosting a First Static Website (Example Deployment on Netlify) [Day 11]
02:24
82
More Information On Netlify & HTTPS [Day 11]
01:58
83
Adding a Favicon [Day 11]
06:17
84
Relative vs Absolute Paths [Day 11]
05:37
85
Module Introduction [Day 11]
02:20
86
What are Git & GitHub? [Day 11]
06:03
87
Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]
05:25
88
Optional: MacOS Terminal (z Shell) Crash Course [Day 11]
18:00
89
Optional: Windows Command Prompt (cmd) Crash Course [Day 12]
13:10
90
Git: MacOS Installation [Day 12]
04:25
91
Git: Windows Installation [Day 12]
09:21
92
Understanding the Git Basics [Day 12]
04:35
93
Initializing the Repository & Creating our First Commit [Day 12]
18:52
94
Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]
13:11
95
Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]
13:54
96
Onwards to GitHub - What & Why? [Day 13]
04:36
97
Creating a GitHub Account & a Remote Repository [Day 13]
12:26
98
Understanding the Personal Access Token & "git clone" [Day 14]
14:50
99
Collaborating on Projects - Collaborators & Organizations [Day 14]
20:16
100
Contributing to Projects - Forks & Pull Requests [Day 14]
13:33
101
Wrap Up [Day 14]
05:12
102
Module Introduction [Day 15]
01:23
103
Project Overview - What we Will Build [Day 15]
02:05
104
Project Setup [Day 15]
03:46
105
Creating the Landing Page Structure [Day 15]
05:01
106
Adding the Page Logo [Day 15]
08:22
107
Adding the Page Navigation [Day 15]
04:20
108
Introducing CSS Flexbox [Day 15]
08:46
109
Aligning Flex Items [Day 15]
04:14
110
Your Flexbox Challenge! [Day 16]
03:07
111
Adding Flexbox to our Project [Day 16]
05:38
112
Adding a Background Image [Day 16]
08:45
113
Creating a Container for the Hero-Content [Day 16]
05:21
114
Positioning Elements [Day 16]
06:06
115
Styling the Hero Content [Day 16]
08:40
116
Understanding Fixed & Absolute Positioning [Day 16]
07:56
117
Working with % Units & Creating a Top Navigation Bar [Day 17]
06:59
118
Finishing the Header [Day 17]
08:21
119
Introducing the "Highlights" Section [Day 17]
02:16
120
Creating the HTML Code [Day 17]
10:37
121
Building the Flex Container [Day 17]
06:32
122
Flex Item Layout [Day 17]
05:27
123
Styling Images with "object-fit" [Day 17]
06:08
124
Styling Text [Day 17]
06:25
125
Understanding Parent - Child Margin Collapsing [Day 18]
03:33
126
Working with CSS Functions - Linear Gradients [Day 18]
05:40
127
The Next Step [Day 18]
01:58
128
Creating a Footer Section [Day 18]
03:44
129
Styling the Footer [Day 18]
07:36
130
Places Page - Overview & Preparations [Day 18]
05:13
131
Creating the Card Content [Day 18]
07:05
132
Using "position: static" [Day 18]
07:40
133
Creating the Card Look [Day 19]
03:54
134
Understanding "overflow" & Your Challenge! [Day 19]
06:32
135
Solving the Challenge [Day 19]
11:33
136
Creating all Cards [Day 19]
09:07
137
The CSS Grid - Theory [Day 19]
10:21
138
Understanding the "nth-type" Selector & "grid-template-columns" [Day 19]
06:51
139
Your Grid Challenge [Day 20]
07:14
140
Working with Unicode UTF-8 [Day 20]
04:32
141
Finishing Touches [Day 20]
06:37
142
Module Summary [Day 20]
04:53
143
Module Introduction [Day 20]
02:02
144
Project Overview [Day 20]
04:40
145
Optional: Your Challenge - Creating the HTML Structure [Day 20]
06:56
146
Optional: Challenge Solution - The HTML Structure [Day 20]
12:58
147
Optional: Styling the Header [Day 21]
14:57
148
Optional: Styling the "main" Section [Day 21]
16:40
149
What is Responsive Design? [Day 21]
05:49
150
The Problem with Pixels [Day 21]
05:46
151
Introducing "em" & "rem" [Day 21]
03:53
152
Applying "em" & "rem" for the Font Size [Day 22]
13:08
153
Deep Dive: "em" vs "rem" vs "%" [Day 22]
09:05
154
Updating the Project Units [Day 22]
10:04
155
Comparing Desktop & Mobile First Design [Day 22]
05:17
156
Understanding Media Queries [Day 22]
08:54
157
Adding Media Queries to the Project [Day 23]
09:21
158
Your Media Queries Challenge! [Day 23]
08:08
159
Side Drawer & Hamburger Icon - Theory [Day 23]
04:17
160
Creating the Hamburger Button [Day 23]
09:55
161
Creating the Side Drawer [Day 23]
12:05
162
Understanding HTML Fragments [Day 23]
05:53
163
Understanding the Target Selector [Day 24]
04:30
164
Finishing the Side Drawer [Day 24]
06:43
165
Module Summary [Day 24]
03:24
166
Module Introduction [Day 24]
04:38
167
Three Things to Keep in Mind [Day 24]
03:45
168
Introducing the Module Project [Day 24]
06:03
169
Sizing & Spacing [Day 24]
06:39
170
Choosing the Right Font [Day 24]
09:10
171
Understanding The Importance of Grey, Primary & Accent Colors [Day 24]
05:40
172
Introducing CSS Variables / CSS Custom Properties [Day 25]
08:23
173
CSS Variables in Action [Day 25]
16:29
174
Comparing "root" vs "html" vs "*" Selectors [Day 25]
03:59
175
Understanding CSS Transformations [Day 25]
06:42
176
Adding CSS Transitions [Day 25]
14:36
177
Working with SVGs [Day 25]
06:03
178
Module Introduction [Day 26]
02:16
179
What & Why [Day 26]
03:33
180
Important Form HTML Elements [Day 26]
02:51
181
Our First Input Element [Day 26]
06:36
182
Adding a Button [Day 26]
04:24
183
The Form Element, Form Submission & Different Types of Requests [Day 26]
18:07
184
Styling the Form Element [Day 27]
03:40
185
Adding Labels [Day 27]
04:23
186
More Detailed Forms Styling [Day 27]
12:46
187
Understanding Different Input Types [Day 27]
05:12
188
Understanding Email, Numbers, Password & Date Types [Day 27]
08:08
189
Working with Radio Buttons [Day 27]
11:06
190
Using Checkboxes [Day 28]
04:56
191
The Textarea Element For Longer Text [Day 28]
04:13
192
Adding a Dropdown [Day 28]
04:30
193
Forms & Semantics (Structuring Forms) [Day 28]
10:26
194
More on Form Buttons [Day 28]
04:44
195
Validation Attributes [Day 28]
09:58
196
More Input & Form Attributes [Day 28]
05:15
197
Your Challenge! [Day 29]
02:09
198
Challenge: Base Page Structure & Styling [Day 29]
06:26
199
Challenge: First Set of Input Elements [Day 29]
07:20
200
Challenge: Adding Remaining Elements [Day 29]
05:04
201
Challenge: Submission & Validation [Day 29]
03:44
202
Challenge: Styling [Day 29]
12:19
203
Module Introduction [Day 29]
01:13
204
What is JavaScript & Why would we use it? [Day 29]
07:36
205
What You Will Learn In this Module [Day 29]
02:37
206
Introducing Values & Variables [Day 29]
04:28
207
Adding the "script" HTML Element [Day 30]
02:53
208
Working with Values & Basic JavaScript Commands [Day 30]
05:44
209
Introducing Variables ("Data Containers") [Day 30]
08:16
210
A Closer Look At The JavaScript Syntax [Day 30]
03:11
211
A Second Variable & Practice Time! [Day 30]
04:25
212
Outsourcing JavaScript Code Into External Files [Day 30]
07:12
213
Introducing Arrays (Managing Lists Of Data) [Day 30]
06:53
214
Introducing Objects (Grouping Related Data) [Day 30]
06:42
215
Splitting Code Across Multiple Lines [Day 31]
04:33
216
Accessing Object Properties [Day 31]
02:08
217
Performing Operations [Day 31]
07:13
218
Onwards To Custom Commands! [Day 31]
04:08
219
Introducing Functions [Day 31]
07:15
220
Functions & Variables [Day 31]
04:30
221
Returning Values In Functions [Day 31]
06:22
222
Passing Data Into Functions With Parameters [Day 31]
05:41
223
Functions - A Summary [Day 31]
01:47
224
Time To Practice: The Problem [Day 32]
04:40
225
Time To Practice: The Solution [Day 32]
19:17
226
Introducing Methods [Day 32]
05:48
227
Making Our Developer Life Easier (Logging with console.log()) [Day 32]
06:22
228
Math Operations & Working With Different Kinds Of Values [Day 32]
03:12
229
The Modulus Operator [Day 32]
01:59
230
Math Operations & Math Rules [Day 32]
06:07
231
Performing String (Text) Operations [Day 32]
03:04
232
String Operations & String Methods [Day 32]
04:09
233
Basic Array Operations [Day 33]
02:18
234
Module Summary [Day 33]
02:46
235
Module Introduction [Day 33]
01:51
236
Our Starting Setup [Day 33]
01:10
237
The Global "window" & "document" Objects [Day 33]
06:19
238
What Is "The DOM"? [Day 33]
04:10
239
Exploring The DOM [Day 33]
07:33
240
Drilling Into The DOM To Select & Change HTML Elements [Day 33]
07:50
241
Loading Our Script Correctly [Day 33]
03:50
242
The DOM Tree & DOM Traversal [Day 33]
06:57
243
Drilling Into The DOM & Exploring Text Nodes [Day 34]
06:57
244
DOM Drilling Limitations [Day 34]
03:06
245
Searching The DOM For Elements [Day 34]
04:06
246
Querying Elements [Day 34]
05:16
247
Time to Practice: The Problem [Day 34]
04:53
248
Time to Practice: The Solution [Day 34]
14:12
249
Next Steps [Day 34]
01:19
250
Inserting New HTML Elements via JavaScript [Day 34]
08:36
251
Deleting DOM Elements [Day 35]
03:15
252
Moving Existing Elements Around [Day 35]
02:44
253
Working with "innerHTML" [Day 35]
07:22
254
Introducing Events [Day 35]
02:17
255
Adding a First "click" Event Listener [Day 35]
10:42
256
Listening To User Input Events [Day 35]
05:17
257
The "event" Object [Day 35]
07:41
258
A More Realistic Demo & Example [Day 36]
18:45
259
Introducing "Constant Variables" ("Constants") [Day 36]
12:26
260
Changing Element Styles With JavaScript [Day 36]
08:12
261
Managing CSS Classes With JavaScript [Day 36]
09:02
262
Module Summary [Day 36]
05:55
263
Time to Practice: The Problem [Day 37]
06:18
264
Time to Practice: The Solution [Day 37]
18:42
265
Module Introduction [Day 37]
01:06
266
Getting Started with "Control Structures" [Day 37]
04:49
267
Introducing Boolean Values ("Booleans") & Comparison Operators [Day 37]
08:20
268
Booleans & Comparison Operators In Action [Day 37]
08:44
269
Using Booleans In "if" Statements (Conditional Code Execution) [Day 37]
01:27
270
A Real Example [Day 38]
03:06
271
Alternatives with "else" and "else if" [Day 38]
10:13
272
More on Boolean Values [Day 38]
05:04
273
"Truthy" & "Falsy" Values [Day 38]
04:23
274
Introducing Loops (Repeated Code Execution) [Day 38]
06:02
275
The Regular "for" Loop [Day 38]
06:23
276
The "for-of" Loop (for Arrays) [Day 38]
02:55
277
The "for-in" Loop (for Objects) [Day 38]
04:40
278
The "while" Loop [Day 38]
03:15
279
Practice Time: Setup & The "for" Loop [Day 39]
13:55
280
Practice Time: The "for-of" Loop [Day 39]
05:49
281
Practice Time: The "for-in" Loop [Day 39]
08:57
282
Practice Time: The "while" Loop [Day 39]
17:35
283
Module Summary [Day 39]
03:13
284
Module Introduction [Day 40]
04:48
285
Planning The Project [Day 40]
03:31
286
Creating The HTML Structure [Day 40]
21:23
287
Adding Base Page Styles [Day 40]
14:50
288
Adding Styling For The Game Configuration Area [Day 41]
20:40
289
Styling The Game Board [Day 41]
12:11
290
Adding JavaScript, Script Files & First Event Listeners [Day 41]
10:49
291
Showing & Hiding The Configuration Modal (Overlay) [Day 41]
07:48
292
Handling Form Submission With JavaScript [Day 42]
15:09
293
Validating User Input With JavaScript [Day 42]
17:11
294
Storing & Managing Submitted Data [Day 42]
21:12
295
Adding Logic For Starting A Game [Day 43]
08:09
296
Managing Game Rounds (Turns) & Field Selection [Day 43]
18:59
297
Tracking Selected Fields On The Game Board [Day 43]
12:17
298
Checking For A Winner Or Draw [Day 44]
24:12
299
Ending The Game & Adding Restart Logic [Day 44]
19:48
300
Module Summary [Day 44]
03:54
301
Module Introduction [Day 45]
03:14
302
What & Why? [Day 45]
06:32
303
Third-Party Code vs Custom Code ("Your Own Code") [Day 45]
01:59
304
First Example: Adding Bootstrap For Some Default Styling [Day 45]
03:19
305
Adding & Using the Bootstrap CSS Package [Day 45]
04:22
306
Adding a JavaScript Package [Day 45]
03:00
307
Adding an Image Carousel / Gallery with a Third-Party Package [Day 45]
04:20
308
Combining Third-Party Packages With Custom Code [Day 45]
06:23
309
More Bootstrap Examples [Day 45]
04:53
310
Exercise Solution & First Summary [Day 45]
04:54
311
Another Example: Preparing a Parallax Page [Day 45]
08:30
312
Adding A Parallax Effect Package [Day 46]
09:11
313
Viewing Third-Party Source Code & Module Summary [Day 46]
02:33
314
Module Introduction [Day 46]
01:33
315
What is "The Backend" & Why Do We Need Server-side Code? [Day 46]
09:27
316
Frontend vs Backend vs Fullstack Development [Day 46]
06:03
317
Choosing a Backend (Server-side) Programming Language [Day 46]
07:52
318
Module Introduction [Day 47]
01:18
319
Installing NodeJS [Day 47]
06:01
320
Executing NodeJS Code [Day 47]
09:21
321
Creating a Custom NodeJS Server [Day 47]
12:37
322
Handling Requests & Creating Custom Responses [Day 47]
13:26
323
Doing More Server-side Work [Day 47]
07:01
324
Summary [Day 47]
02:13
325
Module Introduction [Day 48]
03:31
326
Installing Express with "npm" [Day 48]
12:58
327
Creating a Server with Express & Handling Requests + Responses [Day 48]
10:57
328
Parsing User Data With Express [Day 48]
17:48
329
Storing Data in (Server-side) Files [Day 48]
13:45
330
Reading File Data & Returning Dynamic Responses (Dynamic HTML Code) [Day 49]
06:26
331
Enhancing the Developer Workflow with "nodemon" [Day 49]
08:35
332
Summary [Day 49]
03:01
333
Module Introduction [Day 49]
02:30
334
Creating a Starting Project & What Needs To Change [Day 49]
07:31
335
Setting Up A Basic Express App (incl. Practice) [Day 49]
04:51
336
Serving HTML Files With Node & Express [Day 49]
12:58
337
Serving Static Files (CSS & JavaScript) [Day 50]
08:05
338
Parsing Form Data & Redirecting Requests [Day 50]
11:52
339
Adding the EJS Template Engine [Day 50]
09:46
340
Rendering Dynamic Content With Templates [Day 50]
06:29
341
Outputting Repeated Content With EJS & Loops [Day 50]
07:04
342
Rendering Conditional Content [Day 50]
03:16
343
Including Partial Content [Day 51]
14:54
344
EJS & IDE Support [Day 51]
02:18
345
Module Summary [Day 51]
03:57
346
Module Introduction [Day 51]
01:25
347
Introducing Dynamic Routes [Day 51]
16:51
348
Managing Data with Unique IDs [Day 51]
10:33
349
Loading & Displaying Detail Data [Day 52]
07:13
350
Showing a 404 Page For "Not Found" Cases [Day 52]
06:41
351
More 404 Page Usage (Non-Existent Routes) [Day 52]
05:50
352
Handling Server-Side Errors (500 Status Code) [Day 52]
08:35
353
Working With Status Codes [Day 52]
07:37
354
Code Refactoring & Adding More Functions [Day 52]
10:24
355
Importing & Exporting Code In NodeJS [Day 53]
12:46
356
Using The Express Router To Split The Route Configuration [Day 53]
13:44
357
Introducing Query Parameters (& Hidden Form Fields) [Day 53]
20:29
358
Module Summary [Day 53]
02:35
359
Module Introduction [Day 54]
05:19
360
Functions & Default Parameters [Day 54]
06:36
361
Rest Parameters & The Spread Operator [Day 54]
11:58
362
Functions Are Objects! [Day 54]
06:04
363
Working with Template Literals [Day 54]
03:57
364
Primitive vs Reference Values [Day 54]
17:42
365
Custom Error Handling With try / catch [Day 55]
10:13
366
Variable Scoping & Shadowing [Day 55]
08:17
367
Introducing Classes As Object Blueprints [Day 55]
11:54
368
Classes & Methods (and "this") [Day 55]
05:24
369
Destructuring Objects & Arrays [Day 55]
08:22
370
Diving Into Asynchronous Code & Callback Functions [Day 56]
13:23
371
Introducing Promises [Day 56]
07:20
372
Asynchronous Code & Error Handling [Day 56]
02:40
373
Improving Code With async / await [Day 56]
06:53
374
Module Summary [Day 56]
05:26
375
Module Introduction [Day 56]
01:32
376
Why Databases? And What Are Databases In The First Place? [Day 56]
08:20
377
A Quick Introduction To SQL Databases (RDBMS) [Day 57]
06:46
378
A Quick Introduction To NoSQL Databases [Day 57]
04:19
379
SQL vs NoSQL Databases [Day 57]
05:00
380
Module Introduction [Day 57]
02:46
381
What & Why? [Day 57]
05:54
382
RDBMS Options [Day 57]
02:57
383
Installing MySQL & Setup Steps [Day 57]
13:04
384
Database Server vs Databases vs Tables [Day 57]
03:26
385
Writing Our First SQL Code & Creating a Database [Day 57]
07:13
386
Creating a Table & Table Structure [Day 58]
13:36
387
Inserting Data Into A Table [Day 58]
04:10
388
Reading Data From A Table (incl. Filtering) [Day 58]
09:18
389
Updating & Deleting Data [Day 58]
05:49
390
Designing A More Complex Database [Day 58]
05:26
391
Adding A New Table [Day 58]
08:08
392
Implementing A More Complex Design With Relations [Day 59]
15:14
393
Inserting Related Data [Day 59]
07:54
394
Practice: Inserting Related Data [Day 59]
05:25
395
Querying & Joining Related Data [Day 59]
08:49
396
Practice: Joining Data [Day 59]
04:58
397
Module Summary & More On Relationships [Day 59]
04:35
398
Module Introduction [Day 60]
01:50
399
Why Should Database-Accessing Code Run On The Backend? [Day 60]
03:30
400
What We'll Build In This Section [Day 60]
03:59
401
Planning Our Database Structure [Day 60]
05:00
402
Database Initialization [Day 60]
09:51
403
Project Setup [Day 60]
07:03
404
Creating Our First Routes [Day 60]
08:20
405
Connecting To The Database & Querying Data [Day 61]
16:41
406
Inserting Data With Placeholders (Injecting Dynamic Data) [Day 61]
14:02
407
Fetching & Displaying a List Of Blog Posts [Day 61]
13:12
408
Fetching & Displaying a Single Blog Post [Day 62]
16:46
409
Formatting & Transforming Fetched Data [Day 62]
08:08
410
Preparing The "Update Post" Page [Day 62]
08:43
411
Updating Posts [Day 62]
06:28
412
Deleting Posts [Day 62]
04:25
413
Module Summary [Day 62]
02:18
414
Module Introduction [Day 63]
01:34
415
The Idea Behind NoSQL Database Systems [Day 63]
09:23
416
Introducing MongoDB [Day 63]
01:36
417
General Setup Instructions & Installing MongoDB on macOS [Day 63]
17:42
418
Installing MongoDB on Windows [Day 63]
08:58
419
Installing the MongoDB Shell [Day 63]
05:18
420
Inserting Data with MongoDB [Day 63]
10:18
421
Reading & Filtering Data [Day 64]
06:00
422
Updating Documents In A MongoDB Database [Day 64]
06:02
423
Deleting Documents With MongoDB [Day 64]
02:27
424
Planning a Complete Database Design / Layout [Day 64]
08:48
425
Implementing the Planned Design & Layout [Day 64]
13:03
426
Practice Time & More Filtering Operators [Day 64]
07:59
427
Module Introduction [Day 65]
02:39
428
Planning the Database Structure & Layout [Day 65]
09:49
429
Project & Database Initialization [Day 65]
06:48
430
Connecting to MongoDB (from inside NodeJS) [Day 65]
13:07
431
Fetching & Displaying A List Of Authors [Day 65]
08:45
432
Inserting Documents (New Posts) [Day 65]
14:43
433
Fetching & Displaying Documents [Day 66]
10:28
434
Fetching a Single Document [Day 66]
09:45
435
Transforming & Preparing Data [Day 66]
05:11
436
Updating Documents [Day 66]
11:59
437
Deleting Documents [Day 66]
04:17
438
ExpressJS & Handling Asynchronous Code Errors [Day 67]
06:55
439
Module Introduction [Day 67]
02:01
440
The Two Sides Of Uploading Files & Setting Up A Starting Project [Day 67]
03:41
441
Adding A File Picker To A Form [Day 67]
08:06
442
Parsing Incoming File Uploads With The "multer" Package [Day 67]
09:31
443
How To Store Files On A Backend [Day 67]
07:22
444
Configuring Multer In-Depth [Day 67]
07:47
445
Storing File Data In A Database (And What NOT To Store) [Day 68]
03:26
446
Serving Uploaded Files To Website Visitors [Day 68]
09:05
447
Adding An Image Preview Feature [Day 68]
10:24
448
Module Summary [Day 68]
02:49
449
Module Introduction [Day 68]
01:44
450
What Is Ajax? And Why Would We Need It? [Day 68]
09:27
451
What is "Ajax"? [Day 68]
10:59
452
The Starting Project & A Problem [Day 69]
05:23
453
Sending & Handling a GET Ajax Request [Day 69]
19:10
454
Updating The DOM Based On The Response [Day 69]
08:44
455
Preparing The POST Request Data [Day 69]
07:58
456
Sending & Handling a POST Ajax Request [Day 69]
15:29
457
Improving The User Experience (UX) [Day 70]
05:58
458
Handling Errors (Server-side & Technical) [Day 70]
08:01
459
We Now Have More HTTP Methods! [Day 70]
08:20
460
Module Summary [Day 70]
04:26
461
Module Introduction [Day 70]
02:41
462
What is "Authentication" & Why Would You Want To Add It To A Website? [Day 70]
04:00
463
Our Starting Project [Day 70]
04:48
464
Adding a Basic Signup Functionality [Day 70]
08:21
465
Must-Do: Hashing Passwords [Day 71]
07:00
466
Adding User Login Functionality [Day 71]
08:48
467
Validating Signup Information [Day 71]
05:38
468
Introducing Sessions & Cookies - The Stars Of Authentication [Day 71]
12:23
469
Adding Sessions Support To Our Website [Day 71]
12:11
470
Storing Authentication Data In Sessions [Day 72]
07:23
471
Using Sessions & Cookies For Controlling Access [Day 72]
11:40
472
Adding The Logout Functionality [Day 72]
04:37
473
A Closer Look At Cookies [Day 72]
07:01
474
Diving Deeper Into Sessions (Beyond Authentication) [Day 72]
19:04
475
Authorization vs Authentication [Day 73]
12:14
476
Practicing Sessions & Working With Sessions [Day 73]
06:27
477
Writing Custom Middlewares & Using "res.locals" [Day 73]
13:41
478
Module Summary [Day 73]
02:21
479
Module Introduction [Day 74]
02:12
480
Authentication vs Website Security [Day 74]
03:04
481
Understanding CSRF Attacks [Day 74]
14:04
482
Partial CSRF Protection With "Same-Site" Cookies [Day 74]
05:18
483
Implementing A Better CSRF Protection [Day 74]
08:21
484
Understanding XSS Attacks [Day 74]
09:51
485
Protecting Against XSS Attacks [Day 74]
12:24
486
Understanding SQL Injection Attacks [Day 75]
08:58
487
Protecting Against SQL Injection Attacks [Day 75]
05:23
488
A Word About NoSQL Injection [Day 75]
01:20
489
Module Summary [Day 75]
02:06
490
Avoid Exposing Your Server-side Code or Data Accidentally! [Day 75]
05:06
491
Module Introduction [Day 75]
02:33
492
Our Starting Project (Deep Dive) [Day 75]
18:34
493
What's Wrong With Our Code? [Day 75]
05:00
494
Splitting Our Routes [Day 76]
05:32
495
Extracting Configuration Settings [Day 76]
06:59
496
Extracting Custom Middleware [Day 76]
06:27
497
An Introduction To The MVC Pattern [Day 76]
04:46
498
Creating Our First Model [Day 76]
11:23
499
Adding Update & Delete Functionalities To The Model [Day 76]
09:39
500
Adding Fetch Functionalities To The Model [Day 76]
11:17
501
Adding A First Controller & Controller Actions [Day 77]
07:55
502
Refactoring The Sessions & Input Validation Errors Functionality [Day 77]
18:31
503
Refactoring The CSRF Token Handling [Day 77]
06:23
504
Migrating The "Authentication" Functionality To MVC [Day 77]
08:02
505
Improving Asynchronous Error Handling [Day 78]
05:14
506
Protecting Routes With Custom Middleware [Day 78]
14:40
507
Module Introduction [Day 78]
04:01
508
Planning The Project [Day 78]
07:36
509
Your Challenge! [Day 78]
01:53
510
Course Project Setup [Day 78]
07:22
511
Creating Folders, Files & A First Set Of Routes [Day 78]
15:43
512
Adding EJS & First Views [Day 79]
13:45
513
Populating & Rendering The First View [Day 79]
12:52
514
Adding Base CSS Files & Static File Serving [Day 79]
11:11
515
Adding CSS Variables & A Website Theme [Day 79]
09:25
516
More Base CSS Styles For The Website [Day 80]
13:29
517
Styling First Form Elements [Day 80]
09:55
518
Adding A MongoDB Database Server & Connection [Day 80]
13:57
519
Adding User Signup [Day 81]
21:45
520
Security Time: Adding CSRF Protection [Day 81]
09:27
521
Implementing Proper Error Handling With The Error Handling Middleware [Day 81]
08:00
522
Introducing Sessions & Configuring Sessions [Day 81]
10:16
523
Implementing Authentication & User Login [Day 82]
18:27
524
Finishing Authentication & Checking The Auth Status (Custom Middleware) [Day 82]
08:10
525
Adding Logout Functionality [Day 82]
06:02
526
Handling Errors In Asynchronous Code [Day 82]
04:48
527
Adding User Input Validation [Day 82]
16:37
528
Flashing Errors & Input Data Onto Sessions [Day 83]
14:38
529
Displaying Error Messages & Saving User Input [Day 83]
16:41
530
Admin Authorization & Protected Navigation [Day 83]
10:43
531
Setting Up Base Navigation Styles [Day 83]
14:20
532
Building a Responsive Website [Day 84]
19:16
533
Frontend JavaScript For Toggling The Mobile Menu [Day 84]
11:37
534
Adding Product Admin Pages & Forms [Day 84]
19:52
535
Adding The Image Upload Functionality [Day 85]
14:38
536
More Data: Adding a Product Model & Storing Products In The Database [Day 85]
14:20
537
Fetching & Outputting Product Items [Day 85]
19:22
538
Styling Product Items [Day 86]
11:44
539
Adding the "Product Details" (Single Product) Page [Day 86]
17:07
540
Updating Products (As Administrator) [Day 86]
18:37
541
Adding a "File Upload" Preview [Day 87]
14:33
542
Making Products Deletable [Day 87]
08:45
543
Using Ajax / Frontend JS Requests & Updating The DOM [Day 87]
19:49
544
Various Fixes & Proper Route Protection [Day 88]
14:15
545
Outputting Products For Customers [Day 88]
11:45
546
Outputting Product Details [Day 88]
11:15
547
Adding A Cart Model [Day 89]
19:36
548
Working On The Shopping Cart Logic [Day 89]
13:19
549
Adding Cart Items Via Ajax Requests [Day 89]
17:55
550
Adding A Cart Page [Day 90]
15:59
551
Styling The Cart Page [Day 90]
08:58
552
Updating Cart Items (Changing Quantities) [Day 90]
14:03
553
Updating Carts Via Ajax Requests (PATCH Requests) [Day 90]
10:44
554
Updating The DOM After Cart Item Updates [Day 91]
12:33
555
Adding The Order Controller & A Basic Order Model [Day 91]
14:35
556
Saving Orders In The Database [Day 91]
15:38
557
Displaying Orders (For Customers & Administrators) [Day 92]
11:03
558
Managing Orders As An Administrator [Day 92]
10:11
559
Keeping Cart Items Updated [Day 92]
13:41
560
Bugfixing & Polishing [Day 92]
06:26
561
Module Summary [Day 92]
03:01
562
Module Introduction [Day 93]
01:34
563
What Are "Services" & "APIs"? [Day 93]
12:02
564
Why Would You Use Services & APIs? [Day 93]
02:49
565
Introducing Stripe [Day 93]
04:26
566
Creating A Stripe Account [Day 93]
03:15
567
Setting Up A Stripe API Request [Day 93]
15:55
568
Configuring The Stripe Request & Handling Payments [Day 93]
09:41
569
Module Summary [Day 93]
01:15
570
Module Introduction [Day 94]
02:07
571
How Are Websites Made Available To The Public? [Day 94]
05:17
572
Static vs Dynamic Websites [Day 94]
04:01
573
Hosting Database Servers [Day 94]
03:54
574
Deployment (Preparation) Steps [Day 94]
03:07
575
The Example Projects [Day 94]
04:28
576
Testing & Code Preparation (incl. Environment Variables) [Day 94]
12:33
577
Evaluating Cross-Browser Support [Day 94]
05:25
578
Search Engine Optimization (SEO) [Day 94]
05:31
579
Improving Performance & Shrinking Assets (JS, Images) [Day 95]
03:22
580
Deployment Example: Static Websites (Refresher) [Day 95]
05:09
581
Deployment Example: Dynamic Website With Backend Code [Day 95]
10:43
582
Deploying A MongoDB Database With Atlas [Day 95]
07:15
583
Finishing Dynamic Website Deployment [Day 95]
08:13
584
Module Introduction [Day 95]
01:15
585
APIs & Services: What & Why? [Day 95]
04:31
586
JS Packages vs URL-based APIs: What We Will Build Here [Day 95]
04:03
587
APIs vs "Traditional Websites" [Day 95]
07:40
588
Introducing REST APIs [Day 96]
07:34
589
Building A First Basic REST API [Day 96]
08:31
590
Enhancing The API & Making It More Realistic [Day 96]
20:01
591
A More Complex REST API: First Steps [Day 96]
17:57
592
Finishing The First API Endpoints [Day 97]
03:27
593
Testing APIs With Postman [Day 97]
06:59
594
Adding PATCH & DELETE Routes / Endpoints [Day 97]
07:45
595
Adding A Decoupled Frontend Website (SPA) [Day 97]
16:22
596
Why Would You Use A Decoupled Frontend / SPA? [Day 97]
03:24
597
Understanding CORS Errors [Day 97]
05:41
598
Fixing CORS Errors & Connecting The Frontend SPA To The REST API [Day 97]
06:35
599
Module Introduction [Day 98]
04:28
600
Why Would You Use Frontend JavaScript UI Frameworks? [Day 98]
06:53
601
React vs Vue vs Angular: Which Framework Should You Use? [Day 98]
02:46
602
Getting Started With Vue.js ("Vue") [Day 98]
13:41
603
Listening To Events & Updating Data + the DOM [Day 98]
07:31
604
Introducing "Two-Way-Binding" [Day 98]
05:05
605
Outputting Lists Of Data [Day 99]
08:30
606
Outputting Content Conditionally [Day 99]
03:22
607
Updating Data [Day 99]
11:20
608
Deleting Data [Day 99]
05:06
609
Sending a POST Http Request [Day 99]
06:56
610
Loading Data & Managing Loading States [Day 99]
09:43
611
Loading Vue Differently [Day 99]
02:11
612
Sending PATCH + DELETE Requests & Module Summary [Day 99]
06:22
613
Bonus: Possible Next Steps, Practice Opportunities & Project Ideas [Day 100]
05:12
Unlock unlimited learning

Get instant access to all 612 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to 100 Days Of Code: The Complete Web Development Bootcamp 2024?

More courses by Academind Pro (Maximilian Schwarzmüller)

Frequently asked questions

What are the prerequisites for enrolling in this web development course?
The course is designed for beginners and does not require any prior coding experience. You start with the basics, such as how the web works and key programming languages like HTML, CSS, and JavaScript. Advanced topics like REST APIs and NodeJS are also covered, allowing more experienced individuals to deepen their knowledge.
What projects will I build during the course?
Throughout the course, you will build multiple projects to solidify your learning. These include a browser game, a blog, a travel site, and an online shop. These projects are designed to teach you how to apply the skills you learn in real-world scenarios, providing practical experience in web development.
How does this course compare to other web development courses in terms of depth and scope?
This course offers a comprehensive journey through web development, starting from fundamental concepts to more advanced topics such as website security and REST APIs. With 613 lessons, it provides extensive coverage compared to many other courses, making it suitable for complete beginners and those looking to deepen their understanding.
What is not covered in this course?
While the course covers a broad range of web development topics, it does not delve into mobile app development or advanced database management techniques. The primary focus is on web technologies, so learners interested in areas outside of web development may need additional resources.
What is the expected time commitment for completing this course?
The course is structured around a 100-day plan, recommending one hour of coding per day. However, it is flexible, allowing you to progress at your own pace. You can choose to follow this plan or move faster or slower, depending on your schedule and learning preferences.
Can the skills learned in this course be applied to other areas or careers?
Yes, the skills acquired from this course are highly transferable. Web development skills are applicable in various fields, including building mobile app backends, online platforms, and even game development. This versatility makes the skills valuable for careers in technology and self-driven projects.
Which specific tools or platforms will I learn to use in this course?
The course covers setting up a development environment using Visual Studio Code, which is recommended for its features and ease of use. You will also learn to use browser developer tools to test and debug your code, and explore additional resources like Google Fonts for enhancing web design.