100 Days Of Code - 2023 Web Development Bootcamp

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

What you'll learn
How the web works and how to get started as a web developer
Learn web development in 100 days (optional - you can also pick a different pace)
Build websites, web apps and web services (and understand what these "things" are)
Build frontend user interfaces with HTML, CSS & JavaScript
Build backend processes with NodeJS, Express & SQL + NoSQL databases
Add advanced features like user authentication, file upload or database queries to websites
Requirements
NO prior web development or programming knowledge is required! We'll start from scratch!
You only need a computer or Mac to get started!
Description
Join the most comprehensive web development bootcamp on Udemy!This course 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 ChallengeWe 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-FreeThis 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 LearnThis 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 worksCore technologies: HTML, CSS & JavaScriptUnderstand how HTML documents are structured and how HTML elements are used correctlyLearn core CSS concepts like the box model, flexbox, positioning, units and much moreExplore advanced CSS concepts like building responsive websites, layouts, custom CSS properties, CSS grid & moreLearn browser-side JavaScript from the ground upUnderstand what the "DOM" is and how you can manipulate it via JavaScriptExplore browser / user events and how to handle them with JavaScriptBuild tons of projects (e.g. a Tic-Tac-Toe browser game) to practice and fully understand all these technologiesDive into backend development with NodeJS & ExpressJSLearn what NodeJS is and how it worksBuild basic backend-driven websites with advanced concepts like dynamic routing or dynamic templatesLearn how to work with databases - SQL & NoSQL (and what that is)Practice how to use SQL / NoSQL with NodeJS & ExpressDive 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 wellLearn how to use third-party packages and services (e.g. Stripe for payments) in your websitesMove on to more specialized, advanced concepts like building REST APIsExplore frontend JavaScript frameworks like Vue.js to build even more powerful web user interfacesAnd so much more - simply check out the full curriculum to get a complete list!We'd love to start this journey with you, so let's get started!Max & Manuel

Overview

Section 1: Introduction [Day 1]

Lecture 1 Welcome to This Course! [Day 1]

Lecture 2 What Is "Web Development" & How Does The Web Work? [Day 1]

Lecture 3 The Three Key Programming Languages [Day 1]

Lecture 4 How The Web Works: A Deep Dive [Day 1]

Lecture 5 What About The "www"? [Day 1]

Lecture 6 The 100 Days of Code Challenge! [Day 1]

Lecture 7 How To Get The Most Out Of This Course [Day 1]

Lecture 8 Stuck in the Course? We Got you Covered! [Day 1]

Lecture 9 Join Our Learning Community!

Lecture 10 How To Use The Attached Code [Day 1]

Section 2: Building a First Website: HTML & CSS Basics [Days 1 - 5]

Lecture 11 Module Introduction [Day 1]

Lecture 12 How to Create a Website [Day 1]

Lecture 13 Creating our First HTML Page [Day 1]

Lecture 14 Setting Up a Development Environment [Day 2]

Lecture 15 Why Visual Studio Code? [Day 2]

Lecture 16 Understanding HTML Elements [Day 2]

Lecture 17 Which HTML Elements Exist? [Day 2]

Lecture 18 Adding Another HTML Element [Day 2]

Lecture 19 Exploring HTML Attributes [Day 2]

Lecture 20 Getting Started with CSS (Day 2)

Lecture 21 More CSS Styling [Day 2]

Lecture 22 Working with Colors [Day 3]

Lecture 23 Formatting our Code [Day 3]

Lecture 24 Working with the Browser Developer Tools [Day 3]

Lecture 25 Adding a Link [Day 3]

Lecture 26 You can Nest HTML Elements! [Day 3]

Lecture 27 Using Global CSS Styles [Day 3]

Lecture 28 CSS Code Formatting [Day 3]

Lecture 29 The HTML Document Skeleton & Metadata [Day 3]

Lecture 30 Visual Studio Code Shortcuts & Tricks [Day 3]

Lecture 31 Code Comments [Day 3]

Lecture 32 First Summary [Day 3]

Lecture 33 Styling the Anchor Element Also with Pseudo Hover [Day 4]

Lecture 34 Why it's Called Cascading Style Sheets [Day 4]

Lecture 35 Storing CSS Code in External Files [Day 4]

Lecture 36 The Void Element Syntax [Day 4]

Lecture 37 Multiple Files & Requests [Day 4]

Lecture 38 Selecting Single Elements with the ID Selector [Day 4]

Lecture 39 Working with "font-size" and "px" [Day 4]

Lecture 40 Using Other Fonts from Google Fonts [Day 4]

Lecture 41 Understanding How HTML & CSS Handle Text & Whitespace [Day 5]

Lecture 42 Adding an Image [Day 5]

Lecture 43 Styling the Image & Using the Body Tag [Day 5]

Lecture 44 Styling the Overall Page Background [Day 5]

Lecture 45 Adding a Second HTML File [Day 5]

Lecture 46 A Word About File Name Conventions [Day 5]

Lecture 47 Using a Shared CSS File [Day 5]

Lecture 48 Organizing Source Files in Folders [Day 5]

Lecture 49 Summary [Day 5]

Section 3: Diving Deeper Into HTML & CSS [Days 6 - 8]

Lecture 50 Module Introduction [Day 6]

Lecture 51 Using the Live Server Extension [Day 6]

Lecture 52 The Development Server & The Local Website Address [Day 6]

Lecture 53 Understanding Lists [Day 6]

Lecture 54 Creating Lists [Day 6]

Lecture 55 Understanding Parents, Children, Containers & More [Day 6]

Lecture 56 Understanding Cascading, Inheritance & Specificity [Day 6]

Lecture 57 Styling the Full Week Page [Day 6]

Lecture 58 Introducing the CSS Box Model [Day 7]

Lecture 59 Using the CSS Box Model [Day 7]

Lecture 60 Creating HTML Layouts [Day 7]

Lecture 61 Theory: Selectors & Combinators [Day 7]

Lecture 62 Using Selectors & Combinators [Day 7]

Lecture 63 Understanding Classes [Day 7]

Lecture 64 Block vs Inline Elements [Day 7]

Lecture 65 Styling Differences Between Block & Inline Elements [Day 8]

Lecture 66 Understanding Margin Collapsing [Day 8]

Lecture 67 The "box-shadow" Property [Day 8]

Lecture 68 Your Challenge! [Day 8]

Lecture 69 Creating the HTML Layout [Day 8]

Lecture 70 Styling the Main Section [Day 8]

Lecture 71 Styling Images & Working with Negative Margins [Day 8]

Lecture 72 Finishing Touches [Day 8]

Lecture 73 Module Summary [Day 8]

Lecture 74 A List Of All CSS Selectors [Day 8]

Section 4: HTML & CSS - Practice & Summary [Days 9 - 10]

Lecture 75 Module Introduction [Day 9]

Lecture 76 Your Task! [Day 9]

Lecture 77 Creating the Core Structure [Day 9]

Lecture 78 Adding the Header Content [Day 9]

Lecture 79 Adding Header Styling [Day 9]

Lecture 80 Spacing & the CSS Box Model [Day 9]

Lecture 81 Adding the Main Content [Day 9]

Lecture 82 Styling the Main Content [Day 10]

Lecture 83 Styling List Items & Links [Day 10]

Lecture 84 Adding the Footer [Day 10]

Lecture 85 Introducing New HTML Elements [Day 10]

Lecture 86 Organizing our Files [Day 10]

Lecture 87 Module Summary [Day 10]

Section 5: Serving A Website (Hosting & Deployment) [Day 11]

Lecture 88 Module Introduction [Day 11]

Lecture 89 What is "Hosting" & "Deployment"? [Day 11]

Lecture 90 Hosting a First Static Website (Example Deployment on Netlify) [Day 11]

Lecture 91 More Information On Netlify & HTTPS [Day 11]

Lecture 92 Adding a Favicon [Day 11]

Lecture 93 Relative vs Absolute Paths [Day 11]

Lecture 94 Share Your Website! [Day 11]

Section 6: Introducing Version Control with Git & GitHub [Days 11 - 14]

Lecture 95 Module Introduction [Day 11]

Lecture 96 What are Git & GitHub? [Day 11]

Lecture 97 Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]

Lecture 98 Optional: MacOS Terminal (z Shell) Crash Course [Day 11]

Lecture 99 Optional: Windows Command Prompt (cmd) Crash Course [Day 12]

Lecture 100 Git: MacOS Installation [Day 12]

Lecture 101 Git: Windows Installation [Day 12]

Lecture 102 Understanding the Git Basics [Day 12]

Lecture 103 Initializing the Repository & Creating our First Commit [Day 12]

Lecture 104 Activating the "Code Lense" in Visual Studio Code [Day 13]

Lecture 105 Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]

Lecture 106 Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]

Lecture 107 Onwards to GitHub - What & Why? [Day 13]

Lecture 108 Creating a GitHub Account & a Remote Repository [Day 13]

Lecture 109 Please Read: Windows Users Only

Lecture 110 Understanding the Personal Access Token & "git clone" [Day 14]

Lecture 111 Collaborating on Projects - Collaborators & Organizations [Day 14]

Lecture 112 Contributing to Projects - Forks & Pull Requests [Day 14]

Lecture 113 Wrap Up [Day 14]

Section 7: Understanding HTML & CSS Layouts & Positioning [Days 15 - 20]

Lecture 114 Module Introduction [Day 15]

Lecture 115 Project Overview - What we Will Build [Day 15]

Lecture 116 Project Setup [Day 15]

Lecture 117 Creating the Landing Page Structure [Day 15]

Lecture 118 Adding the Page Logo [Day 15]

Lecture 119 Adding the Page Navigation [Day 15]

Lecture 120 Introducing CSS Flexbox [Day 15]

Lecture 121 Aligning Flex Items [Day 15]

Lecture 122 Your Flexbox Challenge! [Day 16]

Lecture 123 Adding Flexbox to our Project [Day 16]

Lecture 124 Adding a Background Image [Day 16]

Lecture 125 Creating a Container for the Hero-Content [Day 16]

Lecture 126 Positioning Elements [Day 16]

Lecture 127 Styling the Hero Content [Day 16]

Lecture 128 Understanding Fixed & Absolute Positioning [Day 16]

Lecture 129 Working with % Units & Creating a Top Navigation Bar [Day 17]

Lecture 130 Finishing the Header [Day 17]

Lecture 131 Introducing the "Highlights" Section [Day 17]

Lecture 132 Creating the HTML Code [Day 17]

Lecture 133 Building the Flex Container [Day 17]

Lecture 134 Flex Item Layout [Day 17]

Lecture 135 Styling Images with "object-fit" [Day 17]

Lecture 136 Styling Text [Day 17]

Lecture 137 Please Read: Adding "justify-content" [Day 17]

Lecture 138 Understanding Parent - Child Margin Collapsing [Day 18]

Lecture 139 Working with CSS Functions - Linear Gradients [Day 18]

Lecture 140 The Next Step [Day 18]

Lecture 141 Creating a Footer Section [Day 18]

Lecture 142 Styling the Footer [Day 18]

Lecture 143 Places Page - Overview & Preparations [Day 18]

Lecture 144 Creating the Card Content [Day 18]

Lecture 145 Using "position: static" [Day 18]

Lecture 146 Creating the Card Look [Day 19]

Lecture 147 Understanding "overflow" & Your Challenge! [Day 19]

Lecture 148 Solving the Challenge [Day 19]

Lecture 149 Creating all Cards [Day 19]

Lecture 150 The CSS Grid - Theory [Day 19]

Lecture 151 Understanding the "nth-type" Selector & "grid-template-columns" [Day 19]

Lecture 152 Your Grid Challenge [Day 20]

Lecture 153 Working with Unicode UTF-8 [Day 20]

Lecture 154 Finishing Touches [Day 20]

Lecture 155 Module Summary [Day 20]

Lecture 156 Optional: Diving Deeper Into "position", Flexbox & the Grid [Day 20]

Section 8: Understanding Responsive Web Design [Days 20 - 24]

Lecture 157 Module Introduction [Day 20]

Lecture 158 Project Overview [Day 20]

Lecture 159 Please Read: Optional Lectures [Day 20]

Lecture 160 Optional: Your Challenge - Creating the HTML Structure [Day 20]

Lecture 161 Optional: Challenge Solution - The HTML Structure [Day 20]

Lecture 162 Optional: Styling the Header [Day 21]

Lecture 163 Optional: Styling the "main" Section [Day 21]

Lecture 164 What is Responsive Design? [Day 21]

Lecture 165 The Problem with Pixels [Day 21]

Lecture 166 Introducing "em" & "rem" [Day 21]

Lecture 167 Applying "em" & "rem" for the Font Size [Day 22]

Lecture 168 Deep Dive: "em" vs "rem" vs "%" [Day 22]

Lecture 169 Updating the Project Units [Day 22]

Lecture 170 Comparing Desktop & Mobile First Design [Day 22]

Lecture 171 Understanding Media Queries [Day 22]

Lecture 172 Adding Media Queries to the Project [Day 23]

Lecture 173 Your Media Queries Challenge! [Day 23]

Lecture 174 Side Drawer & Hamburger Icon - Theory [Day 23]

Lecture 175 Creating the Hamburger Button [Day 23]

Lecture 176 Creating the Side Drawer [Day 23]

Lecture 177 Understanding HTML Fragments [Day 23]

Lecture 178 Understanding the Target Selector [Day 24]

Lecture 179 Finishing the Side Drawer [Day 24]

Lecture 180 Introducing the "z-index" Property [Day 24]

Lecture 181 Module Summary [Day 24]

Section 9: Creating Beautiful Websites [Days 24 - 25]

Lecture 182 Module Introduction [Day 24]

Lecture 183 Three Things to Keep in Mind [Day 24]

Lecture 184 Introducing the Module Project [Day 24]

Lecture 185 Sizing & Spacing [Day 24]

Lecture 186 Choosing the Right Font [Day 24]

Lecture 187 Understanding The Importance of Grey, Primary & Accent Colors [Day 24]

Lecture 188 Introducing CSS Variables / CSS Custom Properties [Day 25]

Lecture 189 CSS Variables in Action [Day 25]

Lecture 190 Comparing "root" vs "html" vs "*" Selectors [Day 25]

Lecture 191 Understanding CSS Transformations [Day 25]

Lecture 192 Adding CSS Transitions [Day 25]

Lecture 193 Working with SVGs [Day 25]

Section 10: Adding Forms To Websites [Days 26 - 29]

Lecture 194 Module Introduction [Day 26]

Lecture 195 What & Why [Day 26]

Lecture 196 Important Form HTML Elements [Day 26]

Lecture 197 Our First Input Element [Day 26]

Lecture 198 Adding a Button [Day 26]

Lecture 199 The Form Element, Form Submission & Different Types of Requests [Day 26]

Lecture 200 Styling the Form Element [Day 27]

Lecture 201 Adding Labels [Day 27]

Lecture 202 More Detailed Forms Styling [Day 27]

Lecture 203 Understanding Different Input Types [Day 27]

Lecture 204 Understanding Email, Numbers, Password & Date Types [Day 27]

Lecture 205 Working with Radio Buttons [Day 27]

Lecture 206 Using Checkboxes [Day 28]

Lecture 207 The Textarea Element For Longer Text [Day 28]

Lecture 208 Adding a Dropdown [Day 28]

Lecture 209 Forms & Semantics (Structuring Forms) [Day 28]

Lecture 210 More on Form Buttons [Day 28]

Lecture 211 Validation Attributes [Day 28]

Lecture 212 More Input & Form Attributes [Day 28]

Lecture 213 Your Challenge! [Day 29]

Lecture 214 Challenge: Base Page Structure & Styling [Day 29]

Lecture 215 Challenge: First Set of Input Elements [Day 29]

Lecture 216 Challenge: Adding Remaining Elements [Day 29]

Lecture 217 Challenge: Submission & Validation [Day 29]

Lecture 218 Challenge: Styling [Day 29]

Section 11: Understanding the JavaScript Basics [Days 29 - 33]

Lecture 219 Module Introduction [Day 29]

Lecture 220 What is JavaScript & Why would we use it? [Day 29]

Lecture 221 What You Will Learn In this Module [Day 29]

Lecture 222 Introducing Values & Variables [Day 29]

Lecture 223 Adding the "script" HTML Element [Day 30]

Lecture 224 Working with Values & Basic JavaScript Commands [Day 30]

Lecture 225 Introducing Variables ("Data Containers") [Day 30]

Lecture 226 A Closer Look At The JavaScript Syntax [Day 30]

Lecture 227 A Second Variable & Practice Time! [Day 30]

Lecture 228 Outsourcing JavaScript Code Into External Files [Day 30]

Lecture 229 Introducing Arrays (Managing Lists Of Data) [Day 30]

Lecture 230 Introducing Objects (Grouping Related Data) [Day 30]

Lecture 231 Splitting Code Across Multiple Lines [Day 31]

Lecture 232 Accessing Object Properties [Day 31]

Lecture 233 Performing Operations [Day 31]

Lecture 234 Onwards To Custom Commands! [Day 31]

Lecture 235 Introducing Functions [Day 31]

Lecture 236 Functions & Variables [Day 31]

Lecture 237 Returning Values In Functions [Day 31]

Lecture 238 Passing Data Into Functions With Parameters [Day 31]

Lecture 239 Functions - A Summary [Day 31]

Lecture 240 Time To Practice: The Problem [Day 32]

Lecture 241 Time To Practice: The Solution [Day 32]

Lecture 242 Introducing Methods [Day 32]

Lecture 243 Making Our Developer Life Easier (Logging with console.log()) [Day 32]

Lecture 244 Math Operations & Working With Different Kinds Of Values [Day 32]

Lecture 245 The Modulus Operator [Day 32]

Lecture 246 Math Operations & Math Rules [Day 32]

Lecture 247 Performing String (Text) Operations [Day 32]

Lecture 248 JavaScript Operators, Shorthand Operators & Value Types [Day 32]

Lecture 249 String Operations & String Methods [Day 32]

Lecture 250 Basic Array Operations [Day 33]

Lecture 251 Splitting JavaScript Code Across Multiple Files [Day 33]

Lecture 252 Module Summary [Day 33]

Section 12: Advanced JavaScript: Working with the DOM [Days 33 - 37]

Lecture 253 Module Introduction [Day 33]

Lecture 254 Our Starting Setup [Day 33]

Lecture 255 The Global "window" & "document" Objects [Day 33]

Lecture 256 What Is "The DOM"? [Day 33]

Lecture 257 Exploring The DOM [Day 33]

Lecture 258 Drilling Into The DOM To Select & Change HTML Elements [Day 33]

Lecture 259 Loading Our Script Correctly [Day 33]

Lecture 260 The DOM Tree & DOM Traversal [Day 33]

Lecture 261 Drilling Into The DOM & Exploring Text Nodes [Day 34]

Lecture 262 DOM Drilling Limitations [Day 34]

Lecture 263 Searching The DOM For Elements [Day 34]

Lecture 264 Querying Elements [Day 34]

Lecture 265 Common Query Methods [Day 34]

Lecture 266 Time to Practice: The Problem [Day 34]

Lecture 267 Time to Practice: The Solution [Day 34]

Lecture 268 Next Steps [Day 34]

Lecture 269 Inserting New HTML Elements via JavaScript [Day 34]

Lecture 270 Deleting DOM Elements [Day 35]

Lecture 271 Moving Existing Elements Around [Day 35]

Lecture 272 Working with "innerHTML" [Day 35]

Lecture 273 Introducing Events [Day 35]

Lecture 274 Adding a First "click" Event Listener [Day 35]

Lecture 275 Listening To User Input Events [Day 35]

Lecture 276 The "event" Object [Day 35]

Lecture 277 A More Realistic Demo & Example [Day 36]

Lecture 278 Introducing "Constant Variables" ("Constants") [Day 36]

Lecture 279 Changing Element Styles With JavaScript [Day 36]

Lecture 280 Managing CSS Classes With JavaScript [Day 36]

Lecture 281 Module Summary [Day 36]

Lecture 282 Time to Practice: The Problem [Day 37]

Lecture 283 Time to Practice: The Solution [Day 37]

Section 13: Advanced JavaScript: Control Structures [Days 37 - 39]

Lecture 284 Module Introduction [Day 37]

Lecture 285 Getting Started with "Control Structures" [Day 37]

Lecture 286 Introducing Boolean Values ("Booleans") & Comparison Operators [Day 37]

Lecture 287 Booleans & Comparison Operators In Action [Day 37]

Lecture 288 Using Booleans In "if" Statements (Conditional Code Execution) [Day 37]

Lecture 289 A Real Example [Day 38]

Lecture 290 Alternatives with "else" and "else if" [Day 38]

Lecture 291 More on Boolean Values [Day 38]

Lecture 292 "Truthy" & "Falsy" Values [Day 38]

Lecture 293 Introducing Loops (Repeated Code Execution) [Day 38]

Lecture 294 The Regular "for" Loop [Day 38]

Lecture 295 The "for-of" Loop (for Arrays) [Day 38]

Lecture 296 Using the Regular "for" Loop with Arrays [Day 38]

Lecture 297 The "for-in" Loop (for Objects) [Day 38]

Lecture 298 The "while" Loop [Day 38]

Lecture 299 Practice Time: Setup & The "for" Loop [Day 39]

Lecture 300 Practice Time: The "for-of" Loop [Day 39]

Lecture 301 Practice Time: The "for-in" Loop [Day 39]

Lecture 302 Practice Time: The "while" Loop [Day 39]

Lecture 303 Module Summary [Day 39]

Section 14: Milestone Project: Building a Tic-Tac-Toe Game [Days 40 - 44]

Lecture 304 Module Introduction [Day 40]

Lecture 305 Planning The Project [Day 40]

Lecture 306 Creating The HTML Structure [Day 40]

Lecture 307 Adding Base Page Styles [Day 40]

Lecture 308 Adding Styling For The Game Configuration Area [Day 41]

Lecture 309 Styling The Game Board [Day 41]

Lecture 310 Adding JavaScript, Script Files & First Event Listeners [Day 41]

Lecture 311 Showing & Hiding The Configuration Modal (Overlay) [Day 41]

Lecture 312 Handling Form Submission With JavaScript [Day 42]

Lecture 313 Validating User Input With JavaScript [Day 42]

Lecture 314 Storing & Managing Submitted Data [Day 42]

Lecture 315 Adding Logic For Starting A Game [Day 43]

Lecture 316 Managing Game Rounds (Turns) & Field Selection [Day 43]

Lecture 317 Tracking Selected Fields On The Game Board [Day 43]

Lecture 318 Checking For A Winner Or Draw [Day 44]

Lecture 319 Ending The Game & Adding Restart Logic [Day 44]

Lecture 320 Module Summary [Day 44]

Section 15: Working with Third-Party Packages [Days 45 - 46]

Lecture 321 Module Introduction [Day 45]

Lecture 322 What & Why? [Day 45]

Lecture 323 Third-Party Code vs Custom Code ("Your Own Code") [Day 45]

Lecture 324 First Example: Adding Bootstrap For Some Default Styling [Day 45]

Lecture 325 Adding & Using the Bootstrap CSS Package [Day 45]

Lecture 326 Adding a JavaScript Package [Day 45]

Lecture 327 Adding an Image Carousel / Gallery with a Third-Party Package [Day 45]

Lecture 328 Combining Third-Party Packages With Custom Code [Day 45]

Lecture 329 More Bootstrap Examples [Day 45]

Lecture 330 Exercise Solution & First Summary [Day 45]

Lecture 331 Another Example: Preparing a Parallax Page [Day 45]

Lecture 332 Adding A Parallax Effect Package [Day 46]

Lecture 333 Viewing Third-Party Source Code & Module Summary [Day 46]

Section 16: Onwards To Backend Development [Day 46]

Lecture 334 Module Introduction [Day 46]

Lecture 335 What is "The Backend" & Why Do We Need Server-side Code? [Day 46]

Lecture 336 Dynamic Websites vs Static Websites [Day 46]

Lecture 337 Frontend vs Backend vs Fullstack Development [Day 46]

Lecture 338 Choosing a Backend (Server-side) Programming Language [Day 46]

Section 17: NodeJS Introduction - Getting Started With Backend Development [Day 47]

Lecture 339 Module Introduction [Day 47]

Lecture 340 Installing NodeJS [Day 47]

Lecture 341 Executing NodeJS Code [Day 47]

Lecture 342 Creating a Custom NodeJS Server [Day 47]

Lecture 343 Handling Requests & Creating Custom Responses [Day 47]

Lecture 344 Doing More Server-side Work [Day 47]

Lecture 345 Summary [Day 47]

Section 18: Enhancing NodeJS with ExpressJS [Days 48 - 49]

Lecture 346 Module Introduction [Day 48]

Lecture 347 Installing Express with "npm" [Day 48]

Lecture 348 Creating a Server with Express & Handling Requests + Responses [Day 48]

Lecture 349 Parsing User Data With Express [Day 48]

Lecture 350 Storing Data in (Server-side) Files [Day 48]

Lecture 351 More About The "JSON" Format [Day 49]

Lecture 352 Reading File Data & Returning Dynamic Responses (Dynamic HTML Code) [Day 49]

Lecture 353 Enhancing the Developer Workflow with "nodemon" [Day 49]

Lecture 354 Summary [Day 49]

Section 19: More Express: Static & Dynamic Content with Templates (EJS) [Days 49 - 51]

Lecture 355 Module Introduction [Day 49]

Lecture 356 Creating a Starting Project & What Needs To Change [Day 49]

Lecture 357 Setting Up A Basic Express App (incl. Practice) [Day 49]

Lecture 358 Serving HTML Files With Node & Express [Day 49]

Lecture 359 Serving Static Files (CSS & JavaScript) [Day 50]

Lecture 360 Parsing Form Data & Redirecting Requests [Day 50]

Lecture 361 Adding the EJS Template Engine [Day 50]

Lecture 362 Rendering Dynamic Content With Templates [Day 50]

Lecture 363 Outputting Repeated Content With EJS & Loops [Day 50]

Lecture 364 Rendering Conditional Content [Day 50]

Lecture 365 Including Partial Content [Day 51]

Lecture 366 EJS & IDE Support [Day 51]

Lecture 367 Module Summary [Day 51]

Section 20: Handling Dynamic Routes (URLs), Errors & Manag. Bigger Express Projects [51-53]

Lecture 368 Module Introduction [Day 51]

Lecture 369 Introducing Dynamic Routes [Day 51]

Lecture 370 Managing Data with Unique IDs [Day 51]

Lecture 371 Loading & Displaying Detail Data [Day 52]

Lecture 372 Showing a 404 Page For "Not Found" Cases [Day 52]

Lecture 373 More 404 Page Usage (Non-Existent Routes) [Day 52]

Lecture 374 Handling Server-Side Errors (500 Status Code) [Day 52]

Lecture 375 Working With Status Codes [Day 52]

Lecture 376 Code Refactoring & Adding More Functions [Day 52]

Lecture 377 Importing & Exporting Code In NodeJS [Day 53]

Lecture 378 Using The Express Router To Split The Route Configuration [Day 53]

Lecture 379 Introducing Query Parameters (& Hidden Form Fields) [Day 53]

Lecture 380 Query Parameters vs Route Parameters [Day 53]

Lecture 381 Module Summary [Day 53]

Section 21: Exploring More Advanced JavaScript Concepts [Days 54 - 56]

Lecture 382 Module Introduction [Day 54]

Lecture 383 Functions & Default Parameters [Day 54]

Lecture 384 Rest Parameters & The Spread Operator [Day 54]

Lecture 385 Functions Are Objects! [Day 54]

Lecture 386 Working with Template Literals [Day 54]

Lecture 387 Primitive vs Reference Values [Day 54]

Lecture 388 Custom Error Handling With try / catch [Day 55]

Lecture 389 Error Data & Throwing Custom Errors [Day 55]

Lecture 390 Variable Scoping & Shadowing [Day 55]

Lecture 391 Introducing Classes As Object Blueprints [Day 55]

Lecture 392 Classes & Methods (and "this") [Day 55]

Lecture 393 Destructuring Objects & Arrays [Day 55]

Lecture 394 Diving Into Asynchronous Code & Callback Functions [Day 56]

Lecture 395 Introducing Promises [Day 56]

Lecture 396 Asynchronous Code & Error Handling [Day 56]

Lecture 397 Improving Code With async / await [Day 56]

Lecture 398 Module Summary [Day 56]

Section 22: Onwards To Databases [Days 56 - 57]

Lecture 399 Module Introduction [Day 56]

Lecture 400 Why Databases? And What Are Databases In The First Place? [Day 56]

Lecture 401 A Quick Introduction To SQL Databases (RDBMS) [Day 57]

Lecture 402 A Quick Introduction To NoSQL Databases [Day 57]

Lecture 403 SQL vs NoSQL Databases [Day 57]

Section 23: SQL Databases - Introduction & Core Concepts [Days 57 - 59]

Lecture 404 Module Introduction [Day 57]

Lecture 405 What & Why? [Day 57]

Lecture 406 RDBMS Options [Day 57]

Lecture 407 Installing MySQL & Setup Steps [Day 57]

Lecture 408 Database Server vs Databases vs Tables [Day 57]

Lecture 409 Writing Our First SQL Code & Creating a Database [Day 57]

Lecture 410 Creating a Table & Table Structure [Day 58]

Lecture 411 Inserting Data Into A Table [Day 58]

Lecture 412 Reading Data From A Table (incl. Filtering) [Day 58]

Lecture 413 Updating & Deleting Data [Day 58]

Lecture 414 Designing A More Complex Database [Day 58]

Lecture 415 Adding A New Table [Day 58]

Lecture 416 Implementing A More Complex Design With Relations [Day 59]

Lecture 417 Inserting Related Data [Day 59]

Lecture 418 Practice: Inserting Related Data [Day 59]

Lecture 419 Querying & Joining Related Data [Day 59]

Lecture 420 Practice: Joining Data [Day 59]

Lecture 421 Module Summary & More On Relationships [Day 59]

Section 24: Using MySQL In NodeJS & Express Websites [Days 60 - 62]

Lecture 422 Module Introduction [Day 60]

Lecture 423 Why Should Database-Accessing Code Run On The Backend? [Day 60]

Lecture 424 What We'll Build In This Section [Day 60]

Lecture 425 Planning Our Database Structure [Day 60]

Lecture 426 Database Initialization [Day 60]

Lecture 427 Project Setup [Day 60]

Lecture 428 Creating Our First Routes [Day 60]

Lecture 429 Connecting To The Database & Querying Data [Day 61]

Lecture 430 Inserting Data With Placeholders (Injecting Dynamic Data) [Day 61]

Lecture 431 Fetching & Displaying a List Of Blog Posts [Day 61]

Lecture 432 Fetching & Displaying a Single Blog Post [Day 62]

Lecture 433 Formatting & Transforming Fetched Data [Day 62]

Lecture 434 Preparing The "Update Post" Page [Day 62]

Lecture 435 Updating Posts [Day 62]

Lecture 436 Deleting Posts [Day 62]

Lecture 437 Module Summary [Day 62]

Section 25: NoSQL & MongoDB - An Introduction [Days 63 - 64]

Lecture 438 Module Introduction [Day 63]

Lecture 439 The Idea Behind NoSQL Database Systems [Day 63]

Lecture 440 Introducing MongoDB [Day 63]

Lecture 441 General Setup Instructions & Installing MongoDB on macOS [Day 63]

Lecture 442 Installing MongoDB on Windows [Day 63]

Lecture 443 Installing the MongoDB Shell [Day 63]

Lecture 444 Inserting Data with MongoDB [Day 63]

Lecture 445 Reading & Filtering Data [Day 64]

Lecture 446 Updating Documents In A MongoDB Database [Day 64]

Lecture 447 Deleting Documents With MongoDB [Day 64]

Lecture 448 Planning a Complete Database Design / Layout [Day 64]

Lecture 449 Implementing the Planned Design & Layout [Day 64]

Lecture 450 Practice Time & More Filtering Operators [Day 64]

Section 26: NodeJS & MongoDB (NoSQL) [Days 65 - 67]

Lecture 451 Module Introduction [Day 65]

Lecture 452 Planning the Database Structure & Layout [Day 65]

Lecture 453 Project & Database Initialization [Day 65]

Lecture 454 Connecting to MongoDB - Potential Error

Lecture 455 Connecting to MongoDB (from inside NodeJS) [Day 65]

Lecture 456 Fetching & Displaying A List Of Authors [Day 65]

Lecture 457 Inserting Documents (New Posts) [Day 65]

Lecture 458 Fetching & Displaying Documents [Day 66]

Lecture 459 MongoDB Projection & NodeJS

Lecture 460 Fetching a Single Document [Day 66]

Lecture 461 Transforming & Preparing Data [Day 66]

Lecture 462 Updating Documents [Day 66]

Lecture 463 Deleting Documents [Day 66]

Lecture 464 ExpressJS & Handling Asynchronous Code Errors [Day 67]

Section 27: Adding File Upload To A Website [Days 67 - 68]

Lecture 465 Module Introduction [Day 67]

Lecture 466 The Two Sides Of Uploading Files & Setting Up A Starting Project [Day 67]

Lecture 467 Adding A File Picker To A Form [Day 67]

Lecture 468 Parsing Incoming File Uploads With The "multer" Package [Day 67]

Lecture 469 How To Store Files On A Backend [Day 67]

Lecture 470 Configuring Multer In-Depth [Day 67]

Lecture 471 Storing File Data In A Database (And What NOT To Store) [Day 68]

Lecture 472 Serving Uploaded Files To Website Visitors [Day 68]

Lecture 473 Adding An Image Preview Feature [Day 68]

Lecture 474 Module Summary [Day 68]

Section 28: Ajax & Asynchronous JS-driven Http Requests [Days 68 - 70]

Lecture 475 Module Introduction [Day 68]

Lecture 476 What Is Ajax? And Why Would We Need It? [Day 68]

Lecture 477 What is "Ajax"? [Day 68]

Lecture 478 The Starting Project & A Problem [Day 69]

Lecture 479 Sending & Handling a GET Ajax Request [Day 69]

Lecture 480 Updating The DOM Based On The Response [Day 69]

Lecture 481 Preparing The POST Request Data [Day 69]

Lecture 482 Sending & Handling a POST Ajax Request [Day 69]

Lecture 483 Improving The User Experience (UX) [Day 70]

Lecture 484 Handling Errors (Server-side & Technical) [Day 70]

Lecture 485 We Now Have More HTTP Methods! [Day 70]

Lecture 486 Module Summary [Day 70]

Section 29: User Authentication & Working With Sessions [Days 70 - 73]

Lecture 487 Module Introduction [Day 70]

Lecture 488 What is "Authentication" & Why Would You Want To Add It To A Website? [Day 70]

Lecture 489 Our Starting Project [Day 70]

Lecture 490 Adding a Basic Signup Functionality [Day 70]

Lecture 491 Must-Do: Hashing Passwords [Day 71]

Lecture 492 Adding User Login Functionality [Day 71]

Lecture 493 Validating Signup Information [Day 71]

Lecture 494 Introducing Sessions & Cookies - The Stars Of Authentication [Day 71]

Lecture 495 Adding Sessions Support To Our Website [Day 71]

Lecture 496 Storing Authentication Data In Sessions [Day 72]

Lecture 497 Using Sessions & Cookies For Controlling Access [Day 72]

Lecture 498 Adding The Logout Functionality [Day 72]

Lecture 499 A Closer Look At Cookies [Day 72]

Lecture 500 Diving Deeper Into Sessions (Beyond Authentication) [Day 72]

Lecture 501 Authorization vs Authentication [Day 73]

Lecture 502 Practicing Sessions & Working With Sessions [Day 73]

Lecture 503 Writing Custom Middlewares & Using "res.locals" [Day 73]

Lecture 504 Module Summary [Day 73]

Section 30: Security [Days 74 - 75]

Lecture 505 Module Introduction [Day 74]

Lecture 506 Authentication vs Website Security [Day 74]

Lecture 507 Understanding CSRF Attacks [Day 74]

Lecture 508 Partial CSRF Protection With "Same-Site" Cookies [Day 74]

Lecture 509 Implementing A Better CSRF Protection [Day 74]

Lecture 510 csurf() Alternative

Lecture 511 Understanding XSS Attacks [Day 74]

Lecture 512 Protecting Against XSS Attacks [Day 74]

Lecture 513 Understanding SQL Injection Attacks [Day 75]

Lecture 514 Protecting Against SQL Injection Attacks [Day 75]

Lecture 515 A Word About NoSQL Injection [Day 75]

Lecture 516 Module Summary [Day 75]

Lecture 517 Avoid Exposing Your Server-side Code or Data Accidentally! [Day 75]

Section 31: Writing Good Code, Refactoring & The MVC Pattern [Days 75 - 78]

Lecture 518 Module Introduction [Day 75]

Lecture 519 Our Starting Project (Deep Dive) [Day 75]

Lecture 520 What's Wrong With Our Code? [Day 75]

Lecture 521 Splitting Our Routes [Day 76]

Lecture 522 Extracting Configuration Settings [Day 76]

Lecture 523 Extracting Custom Middleware [Day 76]

Lecture 524 An Introduction To The MVC Pattern [Day 76]

Lecture 525 Creating Our First Model [Day 76]

Lecture 526 Adding Update & Delete Functionalities To The Model [Day 76]

Lecture 527 Adding Fetch Functionalities To The Model [Day 76]

Lecture 528 Adding A First Controller & Controller Actions [Day 77]

Lecture 529 Refactoring The Sessions & Input Validation Errors Functionality [Day 77]

Lecture 530 Refactoring The CSRF Token Handling [Day 77]

Lecture 531 Migrating The "Authentication" Functionality To MVC [Day 77]

Lecture 532 Improving Asynchronous Error Handling [Day 78]

Lecture 533 Protecting Routes With Custom Middleware [Day 78]

Section 32: Milestone Project: A Complete Online Shop (From A to Z!) [Days 78 - 92]

Lecture 534 Module Introduction [Day 78]

Lecture 535 Planning The Project [Day 78]

Lecture 536 Your Challenge! [Day 78]

Lecture 537 Course Project Setup [Day 78]

Lecture 538 Creating Folders, Files & A First Set Of Routes [Day 78]

Lecture 539 Adding EJS & First Views [Day 79]

Lecture 540 Populating & Rendering The First View [Day 79]

Lecture 541 Adding Base CSS Files & Static File Serving [Day 79]

Lecture 542 Adding CSS Variables & A Website Theme [Day 79]

Lecture 543 More Base CSS Styles For The Website [Day 80]

Lecture 544 Styling First Form Elements [Day 80]

Lecture 545 Adding A MongoDB Database Server & Connection [Day 80]

Lecture 546 Adding User Signup [Day 81]

Lecture 547 Security Time: Adding CSRF Protection [Day 81]

Lecture 548 Implementing Proper Error Handling With The Error Handling Middleware [Day 81]

Lecture 549 Introducing Sessions & Configuring Sessions [Day 81]

Lecture 550 Implementing Authentication & User Login [Day 82]

Lecture 551 Finishing Authentication & Checking The Auth Status (Custom Middleware) [Day 82]

Lecture 552 Adding Logout Functionality [Day 82]

Lecture 553 Handling Errors In Asynchronous Code [Day 82]

Lecture 554 Adding User Input Validation [Day 82]

Lecture 555 Flashing Errors & Input Data Onto Sessions [Day 83]

Lecture 556 Displaying Error Messages & Saving User Input [Day 83]

Lecture 557 Admin Authorization & Protected Navigation [Day 83]

Lecture 558 Setting Up Base Navigation Styles [Day 83]

Lecture 559 Building a Responsive Website [Day 84]

Lecture 560 Frontend JavaScript For Toggling The Mobile Menu [Day 84]

Lecture 561 Adding Product Admin Pages & Forms [Day 84]

Lecture 562 Adding The Image Upload Functionality [Day 85]

Lecture 563 More Data: Adding a Product Model & Storing Products In The Database [Day 85]

Lecture 564 Fetching & Outputting Product Items [Day 85]

Lecture 565 Styling Product Items [Day 86]

Lecture 566 Adding the "Product Details" (Single Product) Page [Day 86]

Lecture 567 Updating Products (As Administrator) [Day 86]

Lecture 568 Adding a "File Upload" Preview [Day 87]

Lecture 569 Making Products Deletable [Day 87]

Lecture 570 Using Ajax / Frontend JS Requests & Updating The DOM [Day 87]

Lecture 571 Various Fixes & Proper Route Protection [Day 88]

Lecture 572 Outputting Products For Customers [Day 88]

Lecture 573 Outputting Product Details [Day 88]

Lecture 574 Adding A Cart Model [Day 89]

Lecture 575 Working On The Shopping Cart Logic [Day 89]

Lecture 576 Adding Cart Items Via Ajax Requests [Day 89]

Lecture 577 Adding A Cart Page [Day 90]

Lecture 578 Styling The Cart Page [Day 90]

Lecture 579 Updating Cart Items (Changing Quantities) [Day 90]

Lecture 580 Updating Carts Via Ajax Requests (PATCH Requests) [Day 90]

Lecture 581 Updating The DOM After Cart Item Updates [Day 91]

Lecture 582 JavaScript & Floating Point Arithmetic [Day 91]

Lecture 583 Adding The Order Controller & A Basic Order Model [Day 91]

Lecture 584 Saving Orders In The Database [Day 91]

Lecture 585 Displaying Orders (For Customers & Administrators) [Day 92]

Lecture 586 Managing Orders As An Administrator [Day 92]

Lecture 587 Keeping Cart Items Updated [Day 92]

Lecture 588 Bugfixing & Polishing [Day 92]

Lecture 589 Module Summary [Day 92]

Section 33: Working With Services & APIs (e.g. Adding Stripe Payments) [Day 93]

Lecture 590 Module Introduction [Day 93]

Lecture 591 What Are "Services" & "APIs"? [Day 93]

Lecture 592 Why Would You Use Services & APIs? [Day 93]

Lecture 593 Introducing Stripe [Day 93]

Lecture 594 Creating A Stripe Account [Day 93]

Lecture 595 Setting Up A Stripe API Request [Day 93]

Lecture 596 Configuring The Stripe Request & Handling Payments [Day 93]

Lecture 597 Module Summary [Day 93]

Lecture 598 More Services: Social Login (Google, Facebook), Google Analytics & More [Day 93]

Section 34: Deploying (Publishing) Websites [Days 94 - 95]

Lecture 599 Module Introduction [Day 94]

Lecture 600 How Are Websites Made Available To The Public? [Day 94]

Lecture 601 Static vs Dynamic Websites [Day 94]

Lecture 602 Hosting Database Servers [Day 94]

Lecture 603 Deployment (Preparation) Steps [Day 94]

Lecture 604 The Example Projects [Day 94]

Lecture 605 Testing & Code Preparation (incl. Environment Variables) [Day 94]

Lecture 606 Evaluating Cross-Browser Support [Day 94]

Lecture 607 Search Engine Optimization (SEO) [Day 94]

Lecture 608 Adding a Favicon [Day 94]

Lecture 609 Improving Performance & Shrinking Assets (JS, Images) [Day 95]

Lecture 610 Deployment Example: Static Websites (Refresher) [Day 95]

Lecture 611 Deployment Example: Dynamic Website With Backend Code [Day 95]

Lecture 612 Deploying A MongoDB Database With Atlas [Day 95]

Lecture 613 Finishing Dynamic Website Deployment [Day 95]

Section 35: Web Services & Building Custom (REST) APIs [Days 95 - 97]

Lecture 614 Module Introduction [Day 95]

Lecture 615 APIs & Services: What & Why? [Day 95]

Lecture 616 JS Packages vs URL-based APIs: What We Will Build Here [Day 95]

Lecture 617 APIs vs "Traditional Websites" [Day 95]

Lecture 618 Introducing REST APIs [Day 96]

Lecture 619 Building A First Basic REST API [Day 96]

Lecture 620 Enhancing The API & Making It More Realistic [Day 96]

Lecture 621 A More Complex REST API: First Steps [Day 96]

Lecture 622 Finishing The First API Endpoints [Day 97]

Lecture 623 Testing APIs With Postman [Day 97]

Lecture 624 Adding PATCH & DELETE Routes / Endpoints [Day 97]

Lecture 625 Adding A Decoupled Frontend Website (SPA) [Day 97]

Lecture 626 Why Would You Use A Decoupled Frontend / SPA? [Day 97]

Lecture 627 Understanding CORS Errors [Day 97]

Lecture 628 Fixing CORS Errors & Connecting The Frontend SPA To The REST API [Day 97]

Section 36: Working With Frontend JavaScript Frameworks & Introducing Vue.js [Days 98 - 99]

Lecture 629 Module Introduction [Day 98]

Lecture 630 Why Would You Use Frontend JavaScript UI Frameworks? [Day 98]

Lecture 631 React vs Vue vs Angular: Which Framework Should You Use? [Day 98]

Lecture 632 Getting Started With Vue.js ("Vue") [Day 98]

Lecture 633 Listening To Events & Updating Data + the DOM [Day 98]

Lecture 634 Introducing "Two-Way-Binding" [Day 98]

Lecture 635 Outputting Lists Of Data [Day 99]

Lecture 636 Outputting Content Conditionally [Day 99]

Lecture 637 Updating Data [Day 99]

Lecture 638 Deleting Data [Day 99]

Lecture 639 Sending a POST Http Request [Day 99]

Lecture 640 Loading Data & Managing Loading States [Day 99]

Lecture 641 Loading Vue Differently [Day 99]

Lecture 642 Sending PATCH + DELETE Requests & Module Summary [Day 99]

Section 37: Course Summary & Where To Go Next [Day 100]

Lecture 643 Bonus: Possible Next Steps, Practice Opportunities & Project Ideas [Day 100]

Beginner & advanced web development students,Students who have absolutely no web development experience and want to become web developers,Experienced web developers who need a comprehensive reference or want to dive into more advanced topics as well as refresh the basics,All students that are interested in exploring the many course examples and exercises