100 Days Of Code: The Complete Web Development Bootcamp 2024

78h 51m 55s
English
Paid
June 24, 2024

Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!

More

You Want To Become A Web Developer?

THIS COURSE IS FOR BEGINNERS & ADVANCED DEVELOPERS

It will teach you web development and turn you into a web developer in 100 days - or allow you to refresh key essentials and expand your existing knowledge!

Becoming a web developer is a great choice because web development opens up many career paths and web development skills are required in pretty much every business that exists today - and of course this will only increase in the future!

It's not just about websites - it's also about "behind the scenes" services used by mobile apps like Uber or AirBnB. It's about rich web apps like Google Docs as well as browser games. And of course also about regular websites like Facebook, online blogs, online shops like Amazon and much, much more!

Hence it's no wonder, that web developers are in high demand! And, besides great job perspectives, as a web developer, you can of course also easily build your own digital business!

This Course Is For You!

This course will teach you web development from the ground up and thanks to the "100 Days Of Code Challenge" which is incorporated into this course (though it's optional to commit to it!), you can become a web developer in 100 days with help of this course!

No prior web development knowledge is required at all to get started with this course. We will explore all important basics, all fundamentals and all key concepts together, step by step.

But this course is also for advanced students who already do have web development knowledge! It's a deep-dive course and hence you will be able to expand your existing knowledge by diving deeper into key fundamentals like HTML, CSS or NodeJS and also by exploring advanced concepts like handling payments, building REST APIs or website security.

Since it's a huge course, the course is built in a modular way. This means, that you can take it step by step, lecture by lecture but you can also jump right into the course sections that are most interesting to you. Of course, we recommend the "step-by-step" approach for beginners - simply because all the lectures and sections build up on each other. But as a more experienced developer, you can of course skip basics that aren't interesting to you!

The 100 Days Of Code Challenge

We built this course with the "100 Days Of Code Challenge" in mind - a challenge (not invented by us) that aims to keep you motivated to code for at least 1 hour per day for 100 days.

Since this is a huge course (with around 80 hours of content!) it can be very overwhelming. And we know that many students never finish a course.

That's a pitty, because this course is packed with content, exercises, quizzes, assignments and demo projects! We build a browser-game, a blog, a travel website, an online shop and much, much more.

Therefore, we provide clear guidance on how you can take this course from A to Z within 100 days by spending 1 to 2 hours per day watching videos and learning. As part of the course, you get access to a companion website that provides a clear structure and you also find annotations right in the course curriculum.

Of course taking this "100 Days" challenge is totally optional though! You can take the course at your own pace as well and skip any content you're not interested in!

Try It Risk-Free

This course comes with a 30 day money-back guarantee. If you find out that it's not for you, you can get your money back, no questions asked!

What You Will Learn

This is a huge course, packed with content and it's the web development bootcamp we would have loved to have when we learned web development.

Here's a summary of the key concepts we'll explore as part of this course:

  • How the web works
  • Core technologies: HTML, CSS & JavaScript
  • Understand how HTML documents are structured and how HTML elements are used correctly
  • Learn core CSS concepts like the box model, flexbox, positioning, units and much more
  • Explore advanced CSS concepts like building responsive websites, layouts, custom CSS properties, CSS grid & more
  • Learn browser-side JavaScript from the ground up
  • Understand what the "DOM" is and how you can manipulate it via JavaScript
  • Explore browser / user events and how to handle them with JavaScript
  • Build tons of projects (e.g. a Tic-Tac-Toe browser game) to practice and fully understand all these technologies
  • Dive into backend development with NodeJS & ExpressJS
  • Learn what NodeJS is and how it works
  • Build basic backend-driven websites with advanced concepts like dynamic routing or dynamic templates
  • Learn how to work with databases - SQL & NoSQL (and what that is)
  • Practice how to use SQL / NoSQL with NodeJS & Express
  • Dive into advanced concepts like authentication, website security, coding patterns, file uploads, user input validation and so much more!
  • Again: Build plenty of projects (e.g. a complete online shop, from the ground up!) to practice all advanced concepts as well
  • Learn how to use third-party packages and services (e.g. Stripe for payments) in your websites
  • Move on to more specialized, advanced concepts like building REST APIs
  • Explore frontend JavaScript frameworks like Vue.js to build even more powerful web user interfaces
  • And so much more - simply check out the full curriculum to get a complete list!

Watch Online 100 Days Of Code: The Complete Web Development Bootcamp 2024

Join premium to watch
Go to premium
# Title Duration
1 Welcome to This Course! [Day 1] 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

Similar courses to 100 Days Of Code: The Complete Web Development Bootcamp 2024

Vue.js + Laravel: CRUD with SPA

Vue.js + Laravel: CRUD with SPAlaraveldaily.com

Duration 1 hour 50 minutes 29 seconds
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)
20 Web Projects With Vanilla JavaScript

20 Web Projects With Vanilla JavaScriptudemyBrad Traversy

Duration 16 hours 8 minutes 55 seconds
Build a Server Rendered Vue.js App with Nuxt and Vuex
Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
MERN Stack - React Node from Scratch Building Social Network
The HTML & CSS Bootcamp 2023 Edition

The HTML & CSS Bootcamp 2023 Editionudemy

Duration 37 hours 18 minutes 8 seconds
Object-oriented Programming in JavaScript
The Creative Javascript Course

The Creative Javascript Coursedevelopedbyed.com

Duration 17 hours 46 minutes 20 seconds