100 Days Of Code – 2026 Web Development Bootcamp
-
Introduction [Day 1]Welcome to This Course! [Day 1]0sWhat Is “Web Development” & How Does The Web Work? [Day 1]7m 50sThe Three Key Programming Languages [Day 1]0sHow The Web Works: A Deep Dive [Day 1]0sWhat About The “www”? [Day 1]The 100 Days of Code Challenge! [Day 1]0sHow To Get The Most Out Of This Course [Day 1]0sStuck in the Course? We Got you Covered! [Day 1]0sHow To Use The Attached Code [Day 1]Course Setup
-
Building a First Website: HTML & CSS Basics [Days 1 – 5]Module Introduction [Day 1]0sHow to Create a Website [Day 1]0sCreating our First HTML Page [Day 1]0sSetting Up a Development Environment [Day 2]0sWhy Visual Studio Code? [Day 2]0sUnderstanding HTML Elements [Day 2]0sWhich HTML Elements Exist? [Day 2]0sAdding Another HTML Element [Day 2]0sExploring HTML Attributes [Day 2]0sLearning Check: HTML Basics [Day 2]Getting Started with CSS (Day 2)0sMore CSS Styling [Day 2]0sWorking with Colors [Day 3]0sFormatting our Code [Day 3]0sWorking with the Browser Developer Tools [Day 3]0sAdding a Link [Day 3]0sYou can Nest HTML Elements! [Day 3]0sUsing Global CSS Styles [Day 3]0sCSS Code Formatting [Day 3]The HTML Document Skeleton & Metadata [Day 3]0sVisual Studio Code Shortcuts & Tricks [Day 3]0sFirst Summary [Day 3]0sLearning Check: HTML & CSS Basics [Day 3]Styling the Anchor Element Also with Pseudo Hover [Day 4]0sWhy it’s Called Cascading Style Sheets [Day 4]0sStoring CSS Code in External Files [Day 4]0sThe Void Element Syntax [Day 4]0sMultiple Files & Requests [Day 4]0sSelecting Single Elements with the ID Selector [Day 4]0sWorking with “font-size” and “px” [Day 4]0sUsing Other Fonts from Google Fonts [Day 4]0sUnderstanding How HTML & CSS Handle Text & Whitespace [Day 5]Adding an Image [Day 5]0sStyling the Image & Using the Body Tag [Day 5]0sStyling the Overall Page Background [Day 5]0sAdding a Second HTML File [Day 5]0sA Word About File Name Conventions [Day 5]Learning Check: More HTML & CSS Features [Day 5]Using a Shared CSS File [Day 5]0sOrganizing Source Files in Folders [Day 5]0sSummary [Day 5]0s
-
Diving Deeper Into HTML & CSS [Day 6 – 8]Module Introduction [Day 6]0sUsing the Live Server Extension [Day 6]0sThe Development Server & The Local Website Address [Day 6]Understanding Lists [Day 6]0sCreating Lists [Day 6]0sUnderstanding Parents, Children, Containers & More [Day 6]0sUnderstanding Cascading, Inheritance & Specificity [Day 6]0sStyling the Full Week Page [Day 6]0sIntroducing the CSS Box Model [Day 7]0sUsing the CSS Box Model [Day 7]0sCreating HTML Layouts [Day 7]0sTheory: Selectors & Combinators [Day 7]0sUsing Selectors & Combinators [Day 7]0sUnderstanding Classes [Day 7]0sBlock vs Inline Elements [Day 7]0sStyling Differences Between Block & Inline Elements [Day 8]0sUnderstanding Margin Collapsing [Day 8]0sThe “box-shadow” Property [Day 8]0sYour Challenge! [Day 8]0sCreating the HTML Layout [Day 8]0sStyling the Main Section [Day 8]0sStyling Images & Working with Negative Margins [Day 8]0sFinishing Touches [Day 8]0sModule Summary [Day 8]0sA List Of All CSS Selectors [Day 8]
-
HTML & CSS – Practice & Summary [Days 9 – 10]Module Introduction [Day 9]0sYour Task! [Day 9]0sCreating the Core Structure [Day 9]0sAdding the Header Content [Day 9]0sAdding Header Styling [Day 9]0sSpacing & the CSS Box Model [Day 9]0sAdding the Main Content [Day 9]0sStyling the Main Content [Day 10]0sStyling List Items & Links [Day 10]0sAdding the Footer [Day 10]0sIntroducing New HTML Elements [Day 10]0sOrganizing our Files [Day 10]0sModule Summary [Day 10]0s
-
Serving A Website (Hosting & Deployment) [Day 11]
-
Introduction Version Control with Git & GitHub [Days 11 – 14]Module Introduction [Day 11]0sWhat are Git & GitHub? [Day 11]0sCommand Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]0sOptional: MacOS Terminal (z Shell) Crash Course [Day 11]0sOptional: Windows Command Prompt (cmd) Crash Course [Day 12]0sGit: MacOS Installation [Day 12]0sGit: Windows Installation [Day 12]0sUnderstanding the Git Basics [Day 12]0sInitializing the Repository & Creating our First Commit [Day 12]0sActivating the “Code Lense” in Visual Studio Code [Day 13]Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]0sDeleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]0sOnwards to GitHub – What & Why? [Day 13]0sCreating a GitHub Account & a Remote Repository [Day 13]0sPlease Read: Windows Users OnlyUnderstanding the Personal Access Token & “git clone” [Day 14]0sCollaborating on Projects – Collaborators & Organizations [Day 14]0sContributing to Projects – Forks & Pull Requests [Day 14]0sWrap Up [Day 14]0s
-
Understanding HTML & CSS Layouts & Positioning [Days 15 – 20]Module Introduction [Day 15]0sProject Overview – What we Will Build [Day 15]0sProject Setup [Day 15]0sCreating the Landing Page Structure [Day 15]0sAdding the Page Logo [Day 15]0sAdding the Page Navigation [Day 15]0sIntroducing CSS Flexbox [Day 15]0sAligning Flex Items [Day 15]0sYour Flexbox Challenge! [Day 16]0sAdding Flexbox to our Project [Day 16]0sAdding a Background Image [Day 16]0sCreating a Container for the Hero-Content [Day 16]0sPositioning Elements [Day 16]0sStyling the Hero Content [Day 16]0sUnderstanding Fixed & Absolute Positioning [Day 16]0sWorking with % Units & Creating a Top Navigation Bar [Day 17]0sFinishing the Header [Day 17]0sIntroducing the “Highlights” Section [Day 17]0sCreating the HTML Code [Day 17]0sBuilding the Flex Container [Day 17]0sFlex Item Layout [Day 17]0sStyling Images with “object-fit” [Day 17]0sStyling Text [Day 17]0sPlease Read: Adding “justify-content” [Day 17]Understanding Parent – Child Margin Collapsing [Day 18]0sWorking with CSS Functions – Linear Gradients [Day 18]0sThe Next Step [Day 18]0sCreating a Footer Section [Day 18]0sStyling the Footer [Day 18]0sPlaces Page – Overview & Preparations [Day 18]0sCreating the Card Content [Day 18]0sUsing “position: static” [Day 18]0sCreating the Card Look [Day 19]0sUnderstanding “overflow” & Your Challenge! [Day 19]0sSolving the Challenge [Day 19]0sCreating all Cards [Day 19]0sThe CSS Grid – Theory [Day 19]0sUnderstanding the “nth-type” Selector & “grid-template-columns” [Day 19]0sYour Grid Challenge [Day 20]0sWorking with Unicode UTF-8 [Day 20]0sFinishing Touches [Day 20]0sModule Summary [Day 20]0sOptional: Diving Deeper Into “position”, Flexbox & the Grid [Day 20]
-
Understanding Responsive Web Design [Days 20 – 24]Module Introduction [Day 20]0sProject Overview [Day 20]0sPlease Read: Optional Lectures [Day 20]Optional: Your Challenge – Creating the HTML Structure [Day 20]0sOptional: Challenge Solution – The HTML Structure [Day 20]0sOptional: Styling the Header [Day 21]0sOptional: Styling the “main” Section [Day 21]0sWhat is Responsive Design? [Day 21]0sThe Problem with Pixels [Day 21]0sIntroducing “em” & “rem” [Day 21]0sApplying “em” & “rem” for the Font Size [Day 22]0sDeep Dive: “em” vs “rem” vs “%” [Day 22]0sUpdating the Project Units [Day 22]0sComparing Desktop & Mobile First Design [Day 22]0sUnderstanding Media Queries [Day 22]0sAdding Media Queries to the Project [Day 23]0sYour Media Queries Challenge! [Day 23]0sSide Drawer & Hamburger Icon – Theory [Day 23]0sCreating the Hamburger Button [Day 23]0sCreating the Side Drawer [Day 23]0sUnderstanding HTML Fragments [Day 23]0sUnderstanding the Target Selector [Day 24]0sFinishing the Side Drawer [Day 24]0sIntroducing the “z-index” Property [Day 24]Module Summary [Day 24]0s
-
Creating Beautiful Websites [Days 24 – 25]Module Introduction [Day 24]0sThree Things to Keep in Mind [Day 24]0sIntroducing the Module Project [Day 24]0sSizing & Spacing [Day 24]0sChoosing the Right Font [Day 24]0sUnderstanding The Importance of Grey, Primary & Accent Colors [Day 24]0sIntroducing CSS Variables / CSS Custom Properties [Day 25]0sCSS Variables in Action [Day 25]0sComparing “root” vs “html” vs “*” Selectors [Day 25]0sUnderstanding CSS Transformations [Day 25]0sAdding CSS Transitions [Day 25]0sWorking with SVGs [Day 25]0s
-
Adding Forms To Websites [ Days 26 – 29]Module Introduction [Day 26]0sWhat & Why [Day 26]0sImportant Form HTML Elements [Day 26]0sOur First Input Element [Day 26]0sAdding a Button [Day 26]0sThe Form Element, Form Submission & Different Types of Requests [Day 26]0sStyling the Form Element [Day 27]0sAdding Labels [Day 27]0sMore Detailed Forms Styling [Day 27]0sUnderstanding Different Input Types [Day 27]0sUnderstanding Email, Numbers, Password & Date Types [Day 27]0sWorking with Radio Buttons [Day 27]0sUsing Checkboxes [Day 28]0sThe Textarea Element For Longer Text [Day 28]0sAdding a Dropdown [Day 28]0sForms & Semantics (Structuring Forms) [Day 28]0sMore on Form Buttons [Day 28]0sValidation Attributes [Day 28]0sMore Input & Form Attributes [Day 28]0sYour Challenge! [Day 29]0sChallenge: Base Page Structure & Styling [Day 29]0sLearning Check: Web Forms [Day 29]Challenge: First Set of Input Elements [Day 29]0sChallenge: Adding Remaining Elements [Day 29]0sChallenge: Submission & Validation [Day 29]0sChallenge: Styling [Day 29]0s
-
Understanding the JavaScript Basics [Days 29 – 33]Module Introduction [Day 29]0sWhat is JavaScript & Why would we use it? [Day 29]0sWhat You Will Learn In this Module [Day 29]0sIntroducing Values & Variables [Day 29]0sAdding the “script” HTML Element [Day 30]0sWorking with Values & Basic JavaScript Commands [Day 30]0sIntroducing Variables (“Data Containers”) [Day 30]0sA Closer Look At The JavaScript Syntax [Day 30]0sA Second Variable & Practice Time! [Day 30]0sOutsourcing JavaScript Code Into External Files [Day 30]0sIntroducing Arrays (Managing Lists Of Data) [Day 30]0sIntroducing Objects (Grouping Related Data) [Day 30]0sSplitting Code Across Multiple Lines [Day 31]0sAccessing Object Properties [Day 31]0sPerforming Operations [Day 31]0sOnwards To Custom Commands! [Day 31]0sIntroducing Functions [Day 31]0sFunctions & Variables [Day 31]0sReturning Values In Functions [Day 31]0sPassing Data Into Functions With Parameters [Day 31]0sFunctions – A Summary [Day 31]0sTime To Practice: The Problem [Day 32]0sTime To Practice: The Solution [Day 32]0sIntroducing Methods [Day 32]0sMaking Our Developer Life Easier (Logging with console.log()) [Day 32]0sMath Operations & Working With Different Kinds Of Values [Day 32]0sThe Modulus Operator [Day 32]0sMath Operations & Math Rules [Day 32]0sPerforming String (Text) Operations [Day 32]0sJavaScript Operators, Shorthand Operators & Value Types [Day 32]String Operations & String Methods [Day 32]0sBasic Array Operations [Day 33]0sSplitting JavaScript Code Across Multiple Files [Day 33]Module Summary [Day 33]0sLearning Check: JavaScript Basics [Day 33]
-
Advanced JavaScript: Working with the DOM [Days 33 – 37]Module Introduction [Day 33]0sOur Starting Setup [Day 33]0sThe Global “window” & “document” Objects [Day 33]0sWhat Is “The DOM”? [Day 33]0sExploring The DOM [Day 33]0sDrilling Into The DOM To Select & Change HTML Elements [Day 33]0sLoading Our Script Correctly [Day 33]0sThe DOM Tree & DOM Traversal [Day 33]0sDrilling Into The DOM & Exploring Text Nodes [Day 34]0sDOM Drilling Limitations [Day 34]0sSearching The DOM For Elements [Day 34]0sQuerying Elements [Day 34]0sCommon Query Methods [Day 34]Time to Practice: The Problem [Day 34]0sTime to Practice: The Solution [Day 34]0sNext Steps [Day 34]0sInserting New HTML Elements via JavaScript [Day 34]0sDeleting DOM Elements [Day 35]0sMoving Existing Elements Around [Day 35]0sWorking with “innerHTML” [Day 35]0sLearning Check: JavaScript & The DOM [Day 35]Introducing Events [Day 35]0sAdding a First “click” Event Listener [Day 35]0sListening To User Input Events [Day 35]0sThe “event” Object [Day 35]0sLearning Check: JavaScript & DOM Events [Day 35]A More Realistic Demo & Example [Day 36]0sIntroducing “Constant Variables” (“Constants”) [Day 36]0sChanging Element Styles With JavaScript [Day 36]0sManaging CSS Classes With JavaScript [Day 36]0sModule Summary [Day 36]0sTime to Practice: The Problem [Day 37]0sTime to Practice: The Solution [Day 37]0s
-
Advanced JavaScript: Control Structures [Days 37 – 39]Module Introduction [Day 37]0sGetting Started with “Control Structures” [Day 37]0sIntroducing Boolean Values (“Booleans”) & Comparison Operators [Day 37]0sBooleans & Comparison Operators In Action [Day 37]0sUsing Booleans In “if” Statements (Conditional Code Execution) [Day 37]0sA Real Example [Day 38]0sAlternatives with “else” and “else if” [Day 38]0sMore on Boolean Values [Day 38]0s“Truthy” & “Falsy” Values [Day 38]0sLearning Check: “if” Statements [Day 38]Introducing Loops (Repeated Code Execution) [Day 38]0sThe Regular “for” Loop [Day 38]0sThe “for-of” Loop (for Arrays) [Day 38]0sUsing the Regular “for” Loop with Arrays [Day 38]The “for-in” Loop (for Objects) [Day 38]0sThe “while” Loop [Day 38]0sPractice Time: Setup & The “for” Loop [Day 39]0sPractice Time: The “for-of” Loop [Day 39]0sPractice Time: The “for-in” Loop [Day 39]0sPractice Time: The “while” Loop [Day 39]0sModule Summary [Day 39]0sLearning Checks: Loops [Day 39]
-
Milestone Project: Building a Tic-Tac-Toe Game [Days 40 – 44]Module Introduction [Day 40]0sPlanning The Project [Day 40]0sCreating The HTML Structure [Day 40]0sAdding Base Page Styles [Day 40]0sAdding Styling For The Game Configuration Area [Day 41]0sStyling The Game Board [Day 41]0sAdding JavaScript, Script Files & First Event Listeners [Day 41]0sShowing & Hiding The Configuration Modal (Overlay) [Day 41]0sHandling Form Submission With JavaScript [Day 42]0sValidating User Input With JavaScript [Day 42]0sStoring & Managing Submitted Data [Day 42]0sAdding Logic For Starting A Game [Day 43]0sManaging Game Rounds (Turns) & Field Selection [Day 43]0sTracking Selected Fields On The Game Board [Day 43]0sChecking For A Winner Or Draw [Day 44]0sEnding The Game & Adding Restart Logic [Day 44]0sModule Summary [Day 44]0s
-
Working with Third-Party Packages [Days 45 – 46]Module Introduction [Day 45]0sWhat & Why? [Day 45]0sThird-Party Code vs Custom Code (“Your Own Code”) [Day 45]0sFirst Example: Adding Bootstrap For Some Default Styling [Day 45]0sAdding & Using the Bootstrap CSS Package [Day 45]0sAdding a JavaScript Package [Day 45]0sAdding an Image Carousel / Gallery with a Third-Party Package [Day 45]0sCombining Third-Party Packages With Custom Code [Day 45]0sMore Bootstrap Examples [Day 45]0sExercise Solution & First Summary [Day 45]0sAnother Example: Preparing a Parallax Page [Day 45]0sAdding A Parallax Effect Package [Day 46]0sViewing Third-Party Source Code & Module Summary [Day 46]0s
-
Onwards To Backend Development [Day 46]Module Introduction [Day 46]0sWhat is “The Backend” & Why Do We Need Server-side Code? [Day 46]0sDynamic Websites vs Static Websites [Day 46]Frontend vs Backend vs Fullstack Development [Day 46]0sChoosing a Backend (Server-side) Programming Language [Day 46]0sLearning Check: Frontend vs Backend [Day 46]
-
NodeJS Introduction – Getting Started With Backend Development [Day 47]
-
Enhancing NodeJS with ExpressJS [Days 48 – 49]Module Introduction [Day 48]0sInstalling Express with “npm” [Day 48]0sCreating a Server with Express & Handling Requests + Responses [Day 48]0sParsing User Data With Express [Day 48]0sStoring Data in (Server-side) Files [Day 48]0sMore About The “JSON” Format [Day 49]Reading File Data & Returning Dynamic Responses (Dynamic HTML Code) [Day 49]0sEnhancing the Developer Workflow with “nodemon” [Day 49]0sSummary [Day 49]0sLearning Check: ExpressJS Basics [Day 49]
-
More Express: Static & Dynamic Content with Templates (EJS) [Days 49 – 51]Module Introduction [Day 49]0sCreating a Starting Project & What Needs To Change [Day 49]0sSetting Up A Basic Express App (incl. Practice) [Day 49]0sServing HTML Files With Node & Express [Day 49]0sServing Static Files (CSS & JavaScript) [Day 50]0sParsing Form Data & Redirecting Requests [Day 50]0sAdding the EJS Template Engine [Day 50]0sRendering Dynamic Content With Templates [Day 50]0sOutputting Repeated Content With EJS & Loops [Day 50]0sRendering Conditional Content [Day 50]0sIncluding Partial Content [Day 51]0sEJS & IDE Support [Day 51]0sModule Summary [Day 51]0sLearning Check: Static & Dynamic Content [Day 51]
-
Handling Dynamic Routes (URLs), Errors & Manag. Bigger Express Projects [51 – 53]Module Introduction [Day 51]0sIntroducing Dynamic Routes [Day 51]0sManaging Data with Unique IDs [Day 51]0sLoading & Displaying Detail Data [Day 52]0sShowing a 404 Page For “Not Found” Cases [Day 52]0sMore 404 Page Usage (Non-Existent Routes) [Day 52]0sHandling Server-Side Errors (500 Status Code) [Day 52]0sWorking With Status Codes [Day 52]0sCode Refactoring & Adding More Functions [Day 52]0sImporting & Exporting Code In NodeJS [Day 53]0sUsing The Express Router To Split The Route Configuration [Day 53]0sIntroducing Query Parameters (& Hidden Form Fields) [Day 53]0sQuery Parameters vs Route Parameters [Day 53]Module Summary [Day 53]0sLearning Check: Advanced Express Features [Day 53]
-
Exploring More Advanced JavaScript Concepts [Days 54 – 56]Module Introduction [Day 54]0sFunctions & Default Parameters [Day 54]0sRest Parameters & The Spread Operator [Day 54]0sFunctions Are Objects! [Day 54]0sWorking with Template Literals [Day 54]0sPrimitive vs Reference Values [Day 54]0sCustom Error Handling With try / catch [Day 55]0sError Data & Throwing Custom Errors [Day 55]Variable Scoping & Shadowing [Day 55]0sLearning Check: More Advanced JavaScript Concepts [Day 55]Introducing Classes As Object Blueprints [Day 55]0sClasses & Methods (and “this”) [Day 55]0sDestructuring Objects & Arrays [Day 55]0sLearning Check: More on Objects [Day 55]Diving Into Asynchronous Code & Callback Functions [Day 56]0sIntroducing Promises [Day 56]0sAsynchronous Code & Error Handling [Day 56]0sImproving Code With async / await [Day 56]0sLearning Check: Asynchronous Code [Day 56]Module Summary [Day 56]0s
-
Onwards To Databases [Days 56 – 57]
-
SQL Databases – Introduction & Core Concepts [Days 57 – 59]Module Introduction [Day 57]0sWhat & Why? [Day 57]0sRDBMS Options [Day 57]0sInstalling MySQL & Setup Steps [Day 57]0sDatabase Server vs Databases vs Tables [Day 57]0sWriting Our First SQL Code & Creating a Database [Day 57]0sCreating a Table & Table Structure [Day 58]0sInserting Data Into A Table [Day 58]0sReading Data From A Table (incl. Filtering) [Day 58]0sUpdating & Deleting Data [Day 58]0sDesigning A More Complex Database [Day 58]0sAdding A New Table [Day 58]0sImplementing A More Complex Design With Relations [Day 59]0sInserting Related Data [Day 59]0sPractice: Inserting Related Data [Day 59]0sQuerying & Joining Related Data [Day 59]0sPractice: Joining Data [Day 59]0sModule Summary & More On Relationships [Day 59]0sLearning Check: SQL Introduction [Day 59]
-
Using MySQL In NodeJS & Express Websites [Days 60 – 62]Module Introduction [Day 60]0sWhy Should Database-Accessing Code Run On The Backend? [Day 60]0sWhat We’ll Build In This Section [Day 60]0sPlanning Our Database Structure [Day 60]0sDatabase Initialization [Day 60]0sProject Setup [Day 60]0sCreating Our First Routes [Day 60]0sConnecting To The Database & Querying Data [Day 61]0sInserting Data With Placeholders (Injecting Dynamic Data) [Day 61]0sFetching & Displaying a List Of Blog Posts [Day 61]0sFetching & Displaying a Single Blog Post [Day 62]0sFormatting & Transforming Fetched Data [Day 62]0sPreparing The “Update Post” Page [Day 62]0sUpdating Posts [Day 62]0sDeleting Posts [Day 62]0sModule Summary [Day 62]0s
-
NoSQL & MongoDB – An Introduction [Days 63 – 64]Module Introduction [Day 63]0sThe Idea Behind NoSQL Database Systems [Day 63]0sIntroducing MongoDB [Day 63]0sGeneral Setup Instructions & Installing MongoDB on macOS [Day 63]0sInstalling MongoDB on Windows [Day 63]0sInstalling the MongoDB Shell [Day 63]0sInserting Data with MongoDB [Day 63]0sReading & Filtering Data [Day 64]0sUpdating Documents In A MongoDB Database [Day 64]0sDeleting Documents With MongoDB [Day 64]0sPlanning a Complete Database Design / Layout [Day 64]0sImplementing the Planned Design & Layout [Day 64]0sPractice Time & More Filtering Operators [Day 64]0s
-
NodeJS & MongoDB (NoSQL) [Days 65 – 67]Module Introduction [Day 65]0sPlanning the Database Structure & Layout [Day 65]0sProject & Database Initialization [Day 65]0sConnecting to MongoDB – Potential ErrorConnecting to MongoDB (from inside NodeJS) [Day 65]0sFetching & Displaying A List Of Authors [Day 65]0sInserting Documents (New Posts) [Day 65]0sFetching & Displaying Documents [Day 66]0sMongoDB Projection & NodeJSFetching a Single Document [Day 66]0sTransforming & Preparing Data [Day 66]0sUpdating Documents [Day 66]0sDeleting Documents [Day 66]0sExpressJS & Handling Asynchronous Code Errors [Day 67]0s
-
Adding File Upload To A Website [Days 67 – 68]Module Introduction [Day 67]0sThe Two Sides Of Uploading Files & Setting Up A Starting Project [Day 67]0sAdding A File Picker To A Form [Day 67]0sParsing Incoming File Uploads With The “multer” Package [Day 67]0sHow To Store Files On A Backend [Day 67]0sConfiguring Multer In-Depth [Day 67]0sStoring File Data In A Database (And What NOT To Store) [Day 68]0sServing Uploaded Files To Website Visitors [Day 68]0sAdding An Image Preview Feature [Day 68]0sModule Summary [Day 68]0sLearning Check: File Uploads [Day 68]
-
Ajax & Asynchronous JS-driven Http Requests [Days 68 – 70]Module Introduction [Day 68]0sWhat Is Ajax? And Why Would We Need It? [Day 68]0sWhat is “Ajax”? [Day 68]0sThe Starting Project & A Problem [Day 69]0sSending & Handling a GET Ajax Request [Day 69]0sUpdating The DOM Based On The Response [Day 69]0sPreparing The POST Request Data [Day 69]0sSending & Handling a POST Ajax Request [Day 69]0sImproving The User Experience (UX) [Day 70]0sHandling Errors (Server-side & Technical) [Day 70]0sWe Now Have More HTTP Methods! [Day 70]0sModule Summary [Day 70]0sLearning Check: Ajax / JS-driven Http Requests [Day 70]
-
User Authentication & Working With Sessions [Days 70 – 73]Module Introduction [Day 70]0sWhat is “Authentication” & Why Would You Want To Add It To A Website? [Day 70]0sOur Starting Project [Day 70]0sAdding a Basic Signup Functionality [Day 70]0sMust-Do: Hashing Passwords [Day 71]0sAdding User Login Functionality [Day 71]0sValidating Signup Information [Day 71]0sIntroducing Sessions & Cookies – The Stars Of Authentication [Day 71]0sAdding Sessions Support To Our Website [Day 71]0sStoring Authentication Data In Sessions [Day 72]0sImportant: Code Adjustment Needed For Next LectureUsing Sessions & Cookies For Controlling Access [Day 72]0sAdding The Logout Functionality [Day 72]0sA Closer Look At Cookies [Day 72]0sDiving Deeper Into Sessions (Beyond Authentication) [Day 72]0sImportant: Code Adjustment Needed For Next LectureAuthorization vs Authentication [Day 73]0sPracticing Sessions & Working With Sessions [Day 73]0sWriting Custom Middlewares & Using “res.locals” [Day 73]0sModule Summary [Day 73]0sLearning Check: Authentication [Day 73]
-
Security [Days 74 – 75]Module Introduction [Day 74]0sAuthentication vs Website Security [Day 74]0sUnderstanding CSRF Attacks [Day 74]0sPartial CSRF Protection With “Same-Site” Cookies [Day 74]0sImplementing A Better CSRF Protection [Day 74]0scsurf() AlternativeUnderstanding XSS Attacks [Day 74]0sProtecting Against XSS Attacks [Day 74]0sUnderstanding SQL Injection Attacks [Day 75]0sProtecting Against SQL Injection Attacks [Day 75]0sA Word About NoSQL Injection [Day 75]0sModule Summary [Day 75]0sAvoid Exposing Your Server-side Code or Data Accidentally! [Day 75]0sLearning Check: Security [Day 75]
-
Writing Good Code, Refactoring & The MVC Pattern [Days 75 – 78]Module Introduction [Day 75]0sOur Starting Project (Deep Dive) [Day 75]0sWhat’s Wrong With Our Code? [Day 75]0sSplitting Our Routes [Day 76]0sExtracting Configuration Settings [Day 76]0sExtracting Custom Middleware [Day 76]0sAn Introduction To The MVC Pattern [Day 76]0sCreating Our First Model [Day 76]0sAdding Update & Delete Functionalities To The Model [Day 76]0sAdding Fetch Functionalities To The Model [Day 76]0sAdding A First Controller & Controller Actions [Day 77]0sRefactoring The Sessions & Input Validation Errors Functionality [Day 77]0sRefactoring The CSRF Token Handling [Day 77]0sMigrating The “Authentication” Functionality To MVC [Day 77]0sImproving Asynchronous Error Handling [Day 78]0sProtecting Routes With Custom Middleware [Day 78]0sLearning Check: Refactoring & MVC [Day 78]
-
Milestone Project: A Complete Online Shop (From A to Z!) [Days 78 – 92]Module Introduction [Day 78]0sPlanning The Project [Day 78]0sYour Challenge! [Day 78]0sCourse Project Setup [Day 78]0sCreating Folders, Files & A First Set Of Routes [Day 78]0sAdding EJS & First Views [Day 79]0sPopulating & Rendering The First View [Day 79]0sAdding Base CSS Files & Static File Serving [Day 79]0sAdding CSS Variables & A Website Theme [Day 79]0sMore Base CSS Styles For The Website [Day 80]0sStyling First Form Elements [Day 80]0sAdding A MongoDB Database Server & Connection [Day 80]0sAdding User Signup [Day 81]0sSecurity Time: Adding CSRF Protection [Day 81]0sImplementing Proper Error Handling With The Error Handling Middleware [Day 81]0sIntroducing Sessions & Configuring Sessions [Day 81]0sImplementing Authentication & User Login [Day 82]0sFinishing Authentication & Checking The Auth Status (Custom Middleware) [Day 82]0sAdding Logout Functionality [Day 82]0sHandling Errors In Asynchronous Code [Day 82]0sAdding User Input Validation [Day 82]0sFlashing Errors & Input Data Onto Sessions [Day 83]0sDisplaying Error Messages & Saving User Input [Day 83]0sAdmin Authorization & Protected Navigation [Day 83]0sSetting Up Base Navigation Styles [Day 83]0sBuilding a Responsive Website [Day 84]0sFrontend JavaScript For Toggling The Mobile Menu [Day 84]0sAdding Product Admin Pages & Forms [Day 84]0sAdding The Image Upload Functionality [Day 85]0sMore Data: Adding a Product Model & Storing Products In The Database [Day 85]0sFetching & Outputting Product Items [Day 85]0sStyling Product Items [Day 86]0sAdding the “Product Details” (Single Product) Page [Day 86]0sUpdating Products (As Administrator) [Day 86]0sAdding a “File Upload” Preview [Day 87]0sMaking Products Deletable [Day 87]0sUsing Ajax / Frontend JS Requests & Updating The DOM [Day 87]0sVarious Fixes & Proper Route Protection [Day 88]0sOutputting Products For Customers [Day 88]0sOutputting Product Details [Day 88]0sAdding A Cart Model [Day 89]0sWorking On The Shopping Cart Logic [Day 89]0sAdding Cart Items Via Ajax Requests [Day 89]0sAdding A Cart Page [Day 90]0sStyling The Cart Page [Day 90]0sUpdating Cart Items (Changing Quantities) [Day 90]0sUpdating Carts Via Ajax Requests (PATCH Requests) [Day 90]0sUpdating The DOM After Cart Item Updates [Day 91]0sJavaScript & Floating Point Arithmetic [Day 91]Adding The Order Controller & A Basic Order Model [Day 91]0sSaving Orders In The Database [Day 91]0sDisplaying Orders (For Customers & Administrators) [Day 92]0sManaging Orders As An Administrator [Day 92]0sKeeping Cart Items Updated [Day 92]0sBugfixing & Polishing [Day 92]0sModule Summary [Day 92]0s
-
Working With Services & APIs (e.g. Adding Stripe Payments) [Day 93]Module Introduction [Day 93]0sWhat Are “Services” & “APIs”? [Day 93]0sWhy Would You Use Services & APIs? [Day 93]0sIntroducing Stripe [Day 93]0sCreating A Stripe Account [Day 93]0sSetting Up A Stripe API Request [Day 93]0sConfiguring The Stripe Request & Handling Payments [Day 93]0sModule Summary [Day 93]0sMore Services: Social Login (Google, Facebook), Google Analytics & More [Day 93]
-
Deploying (Publishing) Websites [Days 94 – 95]Module Introduction [Day 94]0sHow Are Websites Made Available To The Public? [Day 94]0sStatic vs Dynamic Websites [Day 94]0sHosting Database Servers [Day 94]0sDeployment (Preparation) Steps [Day 94]0sThe Example Projects [Day 94]0sTesting & Code Preparation (incl. Environment Variables) [Day 94]0sEvaluating Cross-Browser Support [Day 94]0sSearch Engine Optimization (SEO) [Day 94]0sAdding a Favicon [Day 94]Improving Performance & Shrinking Assets (JS, Images) [Day 95]0sDeployment Example: Static Websites (Refresher) [Day 95]0sDeployment Example: Dynamic Website With Backend Code [Day 95]0sDeploying A MongoDB Database With Atlas [Day 95]0sFinishing Dynamic Website Deployment [Day 95]0s
-
Web Services & Building Custom (REST) APIs [Days 95 – 97]Module Introduction [Day 95]0sAPIs & Services: What & Why? [Day 95]0sJS Packages vs URL-based APIs: What We Will Build Here [Day 95]0sAPIs vs “Traditional Websites” [Day 95]0sIntroducing REST APIs [Day 96]0sBuilding A First Basic REST API [Day 96]0sEnhancing The API & Making It More Realistic [Day 96]0sA More Complex REST API: First Steps [Day 96]0sFinishing The First API Endpoints [Day 97]0sTesting APIs With Postman [Day 97]0sAdding PATCH & DELETE Routes / Endpoints [Day 97]0sAdding A Decoupled Frontend Website (SPA) [Day 97]0sWhy Would You Use A Decoupled Frontend / SPA? [Day 97]0sUnderstanding CORS Errors [Day 97]0sFixing CORS Errors & Connecting The Frontend SPA To The REST API [Day 97]0sLearning Check: Custom (REST) APIs [Day 97]
-
Working With Frontend JavaScript Frameworks & Introducing Vue.js [Days 98 – 99]Module Introduction [Day 98]0sWhy Would You Use Frontend JavaScript UI Frameworks? [Day 98]0sReact vs Vue vs Angular: Which Framework Should You Use? [Day 98]0sGetting Started With Vue.js (“Vue”) [Day 98]0sListening To Events & Updating Data + the DOM [Day 98]0sIntroducing “Two-Way-Binding” [Day 98]0sOutputting Lists Of Data [Day 99]0sOutputting Content Conditionally [Day 99]0sUpdating Data [Day 99]0sDeleting Data [Day 99]0sSending a POST Http Request [Day 99]0sLoading Data & Managing Loading States [Day 99]0sLoading Vue Differently [Day 99]0sSending PATCH + DELETE Requests & Module Summary [Day 99]0sLearning Check: JavaScript Frameworks & Vue.js [Day 99]
-
Course Summary & Where To Go Next [Day 100]
This course teaches you web development and turns 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 demand will 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!
We’d love to start this journey with you, so let’s get started!
Max & Manuel
What's included
- 79 hours on-demand video
- Assignments
- 33 articles
- 18 downloadable resources
- Access on mobile and TV
- Full lifetime access
- Closed captions
- Certificate of completion