Introduction [Day 1]

What Is "Web Development" & How Does The Web Work? [Day 1]
The Three Key Programming Languages [Day 1]
How The Web Works: A Deep Dive [Day 1]
What About The "www" [Day 1]
The 100 Days of Code Challenge! [Day 1]
How To Get The Most Out Of This Course [Day 1]
Stuck in the Course? We Got you Covered! [Day 1]
Join Our Learning Community!
How To Use The Attached Code [Day 1]

Building A First Website: HTML & CSS Basics [Day1-5]

Module Introduction [Day 1]
How to Create a Website [Day 1]
Creating our First HTML Page [Day 1]
Setting Up a Development Environment [Day 2]
Why Visual Studio Code? [Day 2]
Understanding HTML Elements [Day 2]
Which HTML Elements Exist? [Day 2]
Adding Another HTML Element [Day 2]
Exploring HTML Attributes [Day 2]
Learning Check: HTML Basics [Day 2]
Getting Started with CSS (Day 2)
More CSS Styling [Day 2]
Working with Colors [Day 3]
Formatting our Code [Day 3]
Working with the Browser Developer Tools [Day 3]
Adding a Link [Day 3]
You can Nest HTML Elements! [Day 3]
Using Global CSS Styles [Day 3]
CSS Code Formatting [Day 3]
The HTML Document Skeleton & Metadata [Day 3]
Visual Studio Code Shortcuts & Tricks [Day 3]
Code Comments [Day 3]
First Summary [Day 3]
Learning Check: HTML & CSS Basics [Day 3]
Styling the Anchor Element Also with Pseudo Hover [Day 4]
Why it's Called Cascading Style Sheets [Day 4]
Storing CSS Code in External Files [Day 4]
The Void Element Syntax [Day 4]
Multiple Files & Requests [Day 4]
Selecting Single Elements with the ID Selector [Day 4]
Working with "font-size" and "px" [Day 4]
Using Other Fonts from Google Fonts [Day 4]
Understanding How HTML & CSS Handle Text & Whitespace [Day 5]
Adding an Image [Day 5]
Styling the Image & Using the Body Tag [Day 5]
Styling the Overall Page Background [Day 5]
Adding a Second HTML File [Day 5]
A Word About File Name Conventions [Day 5]
Learning Check: More HTML & CSS Features [Day 5]
Time to Practice - Your First Challenge! [Day 5]
Using a Shared CSS File [Day 5]
Organizing Source Files in Folders [Day 5]
Summary [Day 5]

Diving Deeper Into Html & CSS [Days 6-8]

Module Introduction [Day 6]
Using the Live Server Extension [Day 6]
The Development Server & The Local Website Address [Day 6]
Understanding Lists [Day 6]
Creating Lists [Day 6]
Understanding Parents, Children, Containers & More [Day 6]
Understanding Cascading, Inheritance & Specificity [Day 6]
Styling the Full Week Page [Day 6]
Introducing the CSS Box Model [Day 7]
Using the CSS Box Model [Day 7]
Creating HTML Layouts [Day 7]
Theory: Selectors & Combinators [Day 7]
Using Selectors & Combinators [Day 7]
Understanding Classes [Day 7]
Block vs Inline Elements [Day 7]
Styling Differences Between Block & Inline Elements [Day 8]
Understanding Margin Collapsing [Day 8]
The "box-shadow" Property [Day 8]
Your Challenge! [Day 8]
Creating the HTML Layout [Day 8]
Styling the Main Section [Day 8]
Styling Images & Working with Negative Margins [Day 8]
Finishing Touches [Day 8]
Module Summary [Day 8]
A List Of All CSS Selectors [Day 8]

HTML & CSS - Practice & Summary [Days 9-10]

Module Introduction [Day 9]
Your Task! [Day 9]
Creating the Core Structure [Day 9]
Adding the Header Content [Day 9]
Adding Header Styling [Day 9]
Spacing & the CSS Box Model [Day 9]
Adding the Main Content [Day 9]
Styling the Main Content [Day 10]
Styling List Items & Links [Day 10]
Adding the Footer [Day 10]
Introducing New HTML Elements [Day 10]
Organizing our Files [Day 10]
Module Summary [Day 10]

Serving a Website (Hosting & Deployment) [Day 11]

Module Introduction [Day 11]
What is "Hosting" & "Deployment"? [Day 11]
Hosting a First Static Website (Example Deployment on Netlify) [Day 11]
More Information On Netlify & HTTPS [Day 11]
Adding a Favicon [Day 11]
Relative vs Absolute Paths [Day 11]
Share Your Website! [Day 11]

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

Module Introduction [Day 11]
What are Git & GitHub? [Day 11]
Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]
Optional: MacOS Terminal (z Shell) Crash Course [Day 11]
Optional: Windows Command Prompt (cmd) Crash Course [Day 12]
Git: MacOS Installation [Day 12]
Git: Windows Installation [Day 12]
Understanding the Git Basics [Day 12]
Initializing the Repository & Creating our First Commit [Day 12]
Activating the "Code Lense" in Visual Studio Code [Day 13]
Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]
Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]
Onwards to GitHub - What & Why? [Day 13]
Creating a GitHub Account & a Remote Repository [Day 13]
Please Read: Windows Users Only
Understanding the Personal Access Token & "git clone" [Day 14]
Collaborating on Projects - Collaborators & Organizations [Day 14]
Contributing to Projects - Forks & Pull Requests [Day 14]
Wrap Up [Day 14]

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

Module Introduction [Day 15]
Project Overview - What we Will Build [Day 15]
Project Setup [Day 15]
Creating the Landing Page Structure [Day 15]
Adding the Page Logo [Day 15]
Adding the Page Navigation [Day 15]
Introducing CSS Flexbox [Day 15]
Aligning Flex Items [Day 15]
Your Flexbox Challenge! [Day 16]
Adding Flexbox to our Project [Day 16]
Adding a Background Image [Day 16]
Creating a Container for the Hero-Content [Day 16]
Positioning Elements [Day 16]
Styling the Hero Content [Day 16]
Understanding Fixed & Absolute Positioning [Day 16]
Working with % Units & Creating a Top Navigation Bar [Day 17]
Finishing the Header [Day 17]
Introducing the "Highlights" Section [Day 17]
Creating the HTML Code [Day 17]
Building the Flex Container [Day 17]
Flex Item Layout [Day 17]
Styling Images with "object-fit" [Day 17]
Styling Text [Day 17]
Please Read: Adding "justify-content" [Day 17]
Understanding Parent - Child Margin Collapsing [Day 18]
Working with CSS Functions - Linear Gradients [Day 18]
The Next Step [Day 18]
Creating a Footer Section [Day 18]
Styling the Footer [Day 18]
Places Page - Overview & Preparations [Day 18]
Creating the Card Content [Day 18]
Using "position: static" [Day 18]
Creating the Card Look [Day 19]
Understanding "overflow" & Your Challenge! [Day 19]
Solving the Challenge [Day 19]
Creating all Cards [Day 19]
The CSS Grid - Theory [Day 19]
Understanding the "nth-type" Selector & "grid-template-columns" [Day 19]
Your Grid Challenge [Day 20]
Working with Unicode UTF-8 [Day 20]
Finishing Touches [Day 20]
Module Summary [Day 20]
Optional: Diving Deeper Into "position", Flexbox & the Grid [Day 20]

Understanding Responsive Web Design [Days 20-24]

Module Introduction [Day 20]
Project Overview [Day 20]
Please Read: Optional Lectures [Day 20]
Optional: Your Challenge - Creating the HTML Structure [Day 20]
Optional: Challenge Solution - The HTML Structure [Day 20]
Optional: Styling the Header [Day 21]
Optional: Styling the "main" Section [Day 21]
What is Responsive Design? [Day 21]
The Problem with Pixels [Day 21]
Introducing "em" & "rem" [Day 21]
Applying "em" & "rem" for the Font Size [Day 22]
Deep Dive: "em" vs "rem" vs "%" [Day 22]
Updating the Project Units [Day 22]
Comparing Desktop & Mobile First Design [Day 22]
Understanding Media Queries [Day 22]
Adding Media Queries to the Project [Day 23]
Your Media Queries Challenge! [Day 23]
Side Drawer & Hamburger Icon - Theory [Day 23]
Creating the Hamburger Button [Day 23]
Creating the Side Drawer [Day 23]
Understanding HTML Fragments [Day 23]
Understanding the Target Selector [Day 24]
Finishing the Side Drawer [Day 24]
Introducing the "z-index" Property [Day 24]
Module Summary [Day 24]

Creating Beautiful Websites [Days 24-25]

Module Introduction [Day 24]
Three Things to Keep in Mind [Day 24]
Introducing the Module Project [Day 24]
Sizing & Spacing [Day 24]
Choosing the Right Font [Day 24]
Understanding The Importance of Grey, Primary & Accent Colors [Day 24]
Introducing CSS Variables / CSS Custom Properties [Day 25]
CSS Variables in Action [Day 25]
Comparing "root" vs "html" vs "*" Selectors [Day 25]
Understanding CSS Transformations [Day 25]
Adding CSS Transitions [Day 25]
Working with SVGs [Day 25]

Adding Forms To Website [Days 26-29]

Module Introduction [Day 26]
What & Why [Day 26]
Important Form HTML Elements [Day 26]
Our First Input Element [Day 26]
Adding a Button [Day 26]
The Form Element, Form Submission & Different Types of Requests [Day 26]
Styling the Form Element [Day 27]
Adding Labels [Day 27]
More Detailed Forms Styling [Day 27]
Understanding Different Input Types [Day 27]
Understanding Email, Numbers, Password & Date Types [Day 27]
Working with Radio Buttons [Day 27]
Using Checkboxes [Day 28]
The Textarea Element For Longer Text [Day 28]
Adding a Dropdown [Day 28]
Forms & Semantics (Structuring Forms) [Day 28]
More on Form Buttons [Day 28]
Validation Attributes [Day 28]
More Input & Form Attributes [Day 28]
Your Challenge! [Day 29]
Challenge: Base Page Structure & Styling [Day 29]
Learning Check: Web Forms [Day 29]
Challenge: First Set of Input Elements [Day 29]
Challenge: Adding Remaining Elements [Day 29]
Challenge: Submission & Validation [Day 29]
Challenge: Styling [Day 29]

Understanding The JavaScript Basics [Day 29-33]

Module Introduction [Day 29]
What is JavaScript & Why would we use it? [Day 29]
What You Will Learn In this Module [Day 29]
Introducing Values & Variables [Day 29]
Adding the "script" HTML Element [Day 30]
Working with Values & Basic JavaScript Commands [Day 30]
Introducing Variables ("Data Containers") [Day 30]
A Closer Look At The JavaScript Syntax [Day 30]
A Second Variable & Practice Time! [Day 30]
Outsourcing JavaScript Code Into External Files [Day 30]
Introducing Arrays (Managing Lists Of Data) [Day 30]
Introducing Objects (Grouping Related Data) [Day 30]
Splitting Code Across Multiple Lines [Day 31]
Accessing Object Properties [Day 31]
Performing Operations [Day 31]
Onwards To Custom Commands! [Day 31]
Introducing Functions [Day 31]
Functions & Variables [Day 31]
Returning Values In Functions [Day 31]
Passing Data Into Functions With Parameters [Day 31]
Functions - A Summary [Day 31]
Time To Practice: The Problem [Day 32]
Time To Practice: The Solution [Day 32]
Introducing Methods [Day 32]
Making Our Developer Life Easier (Logging with console.log()) [Day 32]
Math Operations & Working With Different Kinds Of Values [Day 32]
The Modulus Operator [Day 32]
Math Operations & Math Rules [Day 32]
Performing String (Text) Operations [Day 32]
JavaScript Operators, Shorthand Operators & Value Types [Day 32]
String Operations & String Methods [Day 32]
Basic Array Operations [Day 33]
Splitting JavaScript Code Across Multiple Files [Day 33]
Module Summary [Day 33]
Learning Check: JavaScript Basics [Day 33]

Advanced JavaScript: Working with the DOM [Day 33- 37]

Module Introduction [Day 33]
Our Starting Setup [Day 33]
The Global "window" & "document" Objects [Day 33]
What Is "The DOM"? [Day 33]
Exploring The DOM [Day 33]
Drilling Into The DOM To Select & Change HTML Elements [Day 33]
Loading Our Script Correctly [Day 33]
The DOM Tree & DOM Traversal [Day 33]
Drilling Into The DOM & Exploring Text Nodes [Day 34]
DOM Drilling Limitations [Day 34]
Searching The DOM For Elements [Day 34]
Querying Elements [Day 34]
Common Query Methods [Day 34]
Time to Practice: The Problem [Day 34]
Time to Practice: The Solution [Day 34]
Next Steps [Day 34]
Inserting New HTML Elements via JavaScript [Day 34]
Deleting DOM Elements [Day 35]
Moving Existing Elements Around [Day 35]
Working with "innerHTML" [Day 35]
Learning Check: JavaScript & The DOM [Day 35]
Introducing Events [Day 35]
Adding a First "click" Event Listener [Day 35]
Listening To User Input Events [Day 35]
The "event" Object [Day 35]
Learning Check: JavaScript & DOM Events [Day 35]
A More Realistic Demo & Example [Day 36]
Introducing "Constant Variables" ("Constants") [Day 36]
Changing Element Styles With JavaScript [Day 36]
Managing CSS Classes With JavaScript [Day 36]
Module Summary [Day 36]
Time to Practice: The Problem [Day 37]
Time to Practice: The Solution [Day 37]

Advanced JavaScript: Control Structure [Day 37- 39]

Module Introduction [Day 37]
Getting Started with "Control Structures" [Day 37]
Introducing Boolean Values ("Booleans") & Comparison Operators [Day 37]
Booleans & Comparison Operators In Action [Day 37]
Using Booleans In "if" Statements (Conditional Code Execution) [Day 37]
A Real Example [Day 38]
Alternatives with "else" and "else if" [Day 38]
More on Boolean Values [Day 38]
"Truthy" & "Falsy" Values [Day 38]
Learning Check: "if" Statements [Day 38]
Introducing Loops (Repeated Code Execution) [Day 38]
The Regular "for" Loop [Day 38]
The "for-of" Loop (for Arrays) [Day 38]
Using the Regular "for" Loop with Arrays [Day 38]
The "for-in" Loop (for Objects) [Day 38]
The "while" Loop [Day 38]
Practice Time: Setup & The "for" Loop [Day 39]
Practice Time: The "for-of" Loop [Day 39]
Practice Time: The "for-in" Loop [Day 39]
Practice Time: The "while" Loop [Day 39]
Module Summary [Day 39]
Learning Checks: Loops [Day 39]

Milestone Project: Building a Tic-Tac-Toe Game [Day 40- 44]

Module Introduction [Day 40]
Planning The Project [Day 40]
Creating The HTML Structure [Day 40]
Adding Base Page Styles [Day 40]
Adding Styling For The Game Configuration Area [Day 41]
Styling The Game Board [Day 41]
Adding JavaScript, Script Files & First Event Listeners [Day 41]
Showing & Hiding The Configuration Modal (Overlay) [Day 41]
Handling Form Submission With JavaScript [Day 42]
Validating User Input With JavaScript [Day 42]
Storing & Managing Submitted Data [Day 42]
Adding Logic For Starting A Game [Day 43]
Managing Game Rounds (Turns) & Field Selection [Day 43]
Tracking Selected Fields On The Game Board [Day 43]
Checking For A Winner Or Draw [Day 44]
Ending The Game & Adding Restart Logic [Day 44]
Module Summary [Day 44]

Working with Third Party Packages [Day 45- 46]

Module Introduction [Day 45]
What & Why? [Day 45]
Third-Party Code vs Custom Code ("Your Own Code") [Day 45]
First Example: Adding Bootstrap For Some Default Styling [Day 45]
Adding & Using the Bootstrap CSS Package [Day 45]
Adding a JavaScript Package [Day 45]
Adding an Image Carousel / Gallery with a Third-Party Package [Day 45]
Combining Third-Party Packages With Custom Code [Day 45]
More Bootstrap Examples [Day 45]
Exercise Solution & First Summary [Day 45]
Another Example: Preparing a Parallax Page [Day 45]
Adding A Parallax Effect Package [Day 46]
Viewing Third-Party Source Code & Module Summary [Day 46]

Onwards to Backend Development [Day 46]

Module Introduction [Day 46]
What is "The Backend" & Why Do We Need Server-side Code? [Day 46]
Dynamic Websites vs Static Websites [Day 46]
Frontend vs Backend vs Fullstack Development [Day 46]
Choosing a Backend (Server-side) Programming Language [Day 46]
Learning Check: Frontend vs Backend [Day 46]

NodeJS Introduction - Getting Started with Backend Development [Day 47]

Module Introduction [Day 47]
Installing NodeJS [Day 47]
Executing NodeJS Code [Day 47]
Creating a Custom NodeJS Server [Day 47]
Handling Requests & Creating Custom Responses [Day 47]
Doing More Server-side Work [Day 47]
Learning Check: NodeJS Basics [Day 47]
Summary [Day 47]

Enhancing NodeJS with ExpressJS [Day 48-49]

Module Introduction [Day 48]
Installing Express with "npm" [Day 48]
Creating a Server with Express & Handling Requests + Responses [Day 48]
Parsing User Data With Express [Day 48]
Storing Data in (Server-side) Files [Day 48]
More About The "JSON" Format [Day 49]
Reading File Data & Returning Dynamic Responses (Dynamic HTML Code) [Day 49]
Enhancing the Developer Workflow with "nodemon" [Day 49]
Summary [Day 49]
Learning Check: ExpressJS Basics [Day 49]

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

Module Introduction [Day 49]
Creating a Starting Project & What Needs To Change [Day 49]
Setting Up A Basic Express App (incl. Practice) [Day 49]
Serving HTML Files With Node & Express [Day 49]
Serving Static Files (CSS & JavaScript) [Day 50]
Parsing Form Data & Redirecting Requests [Day 50]
Adding the EJS Template Engine [Day 50]
Rendering Dynamic Content With Templates [Day 50]
Outputting Repeated Content With EJS & Loops [Day 50]
Rendering Conditional Content [Day 50]
Including Partial Content [Day 51]
EJS & IDE Support [Day 51]
Module Summary [Day 51]
Learning Check: Static & Dynamic Content [Day 51]

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

Module Introduction [Day 51]
Introducing Dynamic Routes [Day 51]
Managing Data with Unique IDs [Day 51]
Loading & Displaying Detail Data [Day 52]
Showing a 404 Page For "Not Found" Cases [Day 52]
More 404 Page Usage (Non-Existent Routes) [Day 52]
Handling Server-Side Errors (500 Status Code) [Day 52]
Working With Status Codes [Day 52]
Code Refactoring & Adding More Functions [Day 52]
Importing & Exporting Code In NodeJS [Day 53]
Using The Express Router To Split The Route Configuration [Day 53]
Introducing Query Parameters (& Hidden Form Fields) [Day 53]
Query Parameters vs Route Parameters [Day 53]
Module Summary [Day 53]
Learning Check: Advanced Express Features [Day 53]

Exploring More Advanced JavaScript Concepts [Days 54-56]

Module Introduction [Day 54]
Functions & Default Parameters [Day 54]
Rest Parameters & The Spread Operator [Day 54]
Functions Are Objects! [Day 54]
Working with Template Literals [Day 54]
Primitive vs Reference Values [Day 54]
Custom Error Handling With try / catch [Day 55]
Error Data & Throwing Custom Errors [Day 55]
Variable Scoping & Shadowing [Day 55]
Learning Check: More Advanced JavaScript Concepts [Day 55]
Introducing Classes As Object Blueprints [Day 55]
Classes & Methods (and "this") [Day 55]
Destructuring Objects & Arrays [Day 55]
Learning Check: More on Objects [Day 55]
Diving Into Asynchronous Code & Callback Functions [Day 56]
Introducing Promises [Day 56]
Asynchronous Code & Error Handling [Day 56]
Improving Code With async / await [Day 56]
Learning Check: Asynchronous Code [Day 56]
Module Summary [Day 56]

Onwards To Databases [Days 56- 57]

Module Introduction [Day 56]
Why Databases? And What Are Databases In The First Place? [Day 56]
A Quick Introduction To SQL Databases (RDBMS) [Day 57]
A Quick Introduction To NoSQL Databases [Day 57]
SQL vs NoSQL Databases [Day 57]
Learning Check: Databases Introduction [Day 57]

SQL Databses - Introduction & Core Concepts [Day 57-59]

Module Introduction [Day 57]
What & Why? [Day 57]
RDBMS Options [Day 57]
Installing MySQL & Setup Steps [Day 57]
Database Server vs Databases vs Tables [Day 57]
Writing Our First SQL Code & Creating a Database [Day 57]
Creating a Table & Table Structure [Day 58]
Inserting Data Into A Table [Day 58]
Reading Data From A Table (incl. Filtering) [Day 58]
Updating & Deleting Data [Day 58]
Designing A More Complex Database [Day 58]
Adding A New Table [Day 58]
Implementing A More Complex Design With Relations [Day 59]
Inserting Related Data [Day 59]
Practice: Inserting Related Data [Day 59]
Querying & Joining Related Data [Day 59]
Practice: Joining Data [Day 59]
Module Summary & More On Relationships [Day 59]
Learning Check: SQL Introduction [Day 59]

Using MySQL in NodeJS & Express Website [Day 60-62]

Module Introduction [Day 60]
Why Should Database-Accessing Code Run On The Backend? [Day 60]
What We'll Build In This Section [Day 60]
Planning Our Database Structure [Day 60]
Database Initialization [Day 60]
Project Setup [Day 60]
Creating Our First Routes [Day 60]
Connecting To The Database & Querying Data [Day 61]
Inserting Data With Placeholders (Injecting Dynamic Data) [Day 61]
Fetching & Displaying a List Of Blog Posts [Day 61]
Fetching & Displaying a Single Blog Post [Day 62]
Formatting & Transforming Fetched Data [Day 62]
Preparing The "Update Post" Page [Day 62]
Updating Posts [Day 62]
Deleting Posts [Day 62]
Module Summary [Day 62]

NoSQL & MySQL - An Introduction [Days 63-64]

Module Introduction [Day 63]
The Idea Behind NoSQL Database Systems [Day 63]
Introducing MongoDB [Day 63]
General Setup Instructions & Installing MongoDB on macOS [Day 63]
Installing MongoDB on Windows [Day 63]
Installing the MongoDB Shell [Day 63]
Inserting Data with MongoDB [Day 63]
Reading & Filtering Data [Day 64]
Updating Documents In A MongoDB Database [Day 64]
Deleting Documents With MongoDB [Day 64]
Planning a Complete Database Design / Layout [Day 64]
Implementing the Planned Design & Layout [Day 64]
Practice Time & More Filtering Operators [Day 64]

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

Module Introduction [Day 65]
Planning the Database Structure & Layout [Day 65]
Project & Database Initialization [Day 65]
Connecting to MongoDB (from inside NodeJS) [Day 65]
Fetching & Displaying A List Of Authors [Day 65]
Inserting Documents (New Posts) [Day 65]
Fetching & Displaying Documents [Day 66]
MongoDB Projection & NodeJS
Fetching a Single Document [Day 66]
Transforming & Preparing Data [Day 66]
Updating Documents [Day 66]
Deleting Documents [Day 66]
ExpressJS & Handling Asynchronous Code Errors [Day 67]

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

Module Introduction [Day 67]
The Two Sides Of Uploading Files & Setting Up A Starting Project [Day 67]
Adding A File Picker To A Form [Day 67]
Parsing Incoming File Uploads With The "multer" Package [Day 67]
How To Store Files On A Backend [Day 67]
Configuring Multer In-Depth [Day 67]
Storing File Data In A Database (And What NOT To Store) [Day 68]
Serving Uploaded Files To Website Visitors [Day 68]
Adding An Image Preview Feature [Day 68]
Module Summary [Day 68]
Learning Check: File Uploads [Day 68]

Ajax & Asynchronous JS-driven HTTP Request [Days 68-70]

Module Introduction [Day 68]
What Is Ajax? And Why Would We Need It? [Day 68]
What is "Ajax"? [Day 68]
The Starting Project & A Problem [Day 69]
Sending & Handling a GET Ajax Request [Day 69]
Updating The DOM Based On The Response [Day 69]
Preparing The POST Request Data [Day 69]
Sending & Handling a POST Ajax Request [Day 69]
Improving The User Experience (UX) [Day 70]
Handling Errors (Server-side & Technical) [Day 70]
We Now Have More HTTP Methods! [Day 70]
Module Summary [Day 70]
Learning Check: Ajax / JS-driven Http Requests [Day 70]

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

Module Introduction [Day 70]
What is "Authentication" & Why Would You Want To Add It To A Website? [Day 70]
Our Starting Project [Day 70]
Adding a Basic Signup Functionality [Day 70]
Must-Do: Hashing Passwords [Day 71]
Adding User Login Functionality [Day 71]
Validating Signup Information [Day 71]
Introducing Sessions & Cookies - The Stars Of Authentication [Day 71]
Adding Sessions Support To Our Website [Day 71]
Storing Authentication Data In Sessions [Day 72]
Using Sessions & Cookies For Controlling Access [Day 72]
Adding The Logout Functionality [Day 72]
A Closer Look At Cookies [Day 72]
Diving Deeper Into Sessions (Beyond Authentication) [Day 72]
Authorization vs Authentication [Day 73]
Practicing Sessions & Working With Sessions [Day 73]
Writing Custom Middlewares & Using "res.locals" [Day 73]
Module Summary [Day 73]
Learning Check: Authentication [Day 73]

Security [Days 74-75]

Module Introduction [Day 74]
Authentication vs Website Security [Day 74]
Understanding CSRF Attacks [Day 74]
Partial CSRF Protection With "Same-Site" Cookies [Day 74]
Implementing A Better CSRF Protection [Day 74]
Understanding XSS Attacks [Day 74]
Protecting Against XSS Attacks [Day 74]
Understanding SQL Injection Attacks [Day 75]
Protecting Against SQL Injection Attacks [Day 75]
A Word About NoSQL Injection [Day 75]
Module Summary [Day 75]
Avoid Exposing Your Server-side Code or Data Accidentally! [Day 75]
Learning Check: Security [Day 75]

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

Module Introduction [Day 75]
Our Starting Project (Deep Dive) [Day 75]
What's Wrong With Our Code? [Day 75]
Splitting Our Routes [Day 76]
Extracting Configuration Settings [Day 76]
Extracting Custom Middleware [Day 76]
An Introduction To The MVC Pattern [Day 76]
Creating Our First Model [Day 76]
Adding Update & Delete Functionalities To The Model [Day 76]
Adding Fetch Functionalities To The Model [Day 76]
Adding A First Controller & Controller Actions [Day 77]
Refactoring The Sessions & Input Validation Errors Functionality [Day 77]
Refactoring The CSRF Token Handling [Day 77]
Migrating The "Authentication" Functionality To MVC [Day 77]
Improving Asynchronous Error Handling [Day 78]
Protecting Routes With Custom Middleware [Day 78]
Learning Check: Refactoring & MVC [Day 78]

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

Module Introduction [Day 78]
Planning The Project [Day 78]
Your Challenge! [Day 78]
Course Project Setup [Day 78]
Creating Folders, Files & A First Set Of Routes [Day 78]
Adding EJS & First Views [Day 79]
Populating & Rendering The First View [Day 79]
Adding Base CSS Files & Static File Serving [Day 79]
Adding CSS Variables & A Website Theme [Day 79]
More Base CSS Styles For The Website [Day 80]
Styling First Form Elements [Day 80]
Adding A MongoDB Database Server & Connection [Day 80]
Adding User Signup [Day 81]
Security Time: Adding CSRF Protection [Day 81]
Implementing Proper Error Handling With The Error Handling Middleware [Day 81]
Introducing Sessions & Configuring Sessions [Day 81]
Implementing Authentication & User Login [Day 82]
Finishing Authentication & Checking The Auth Status (Custom Middleware) [Day 82]
Adding Logout Functionality [Day 82]
Handling Errors In Asynchronous Code [Day 82]
Adding User Input Validation [Day 82]
Flashing Errors & Input Data Onto Sessions [Day 83]
Displaying Error Messages & Saving User Input [Day 83]
Admin Authorization & Protected Navigation [Day 83]
Setting Up Base Navigation Styles [Day 83]
Building a Responsive Website [Day 84]
Frontend JavaScript For Toggling The Mobile Menu [Day 84]
Adding Product Admin Pages & Forms [Day 84]
Adding The Image Upload Functionality [Day 85]
More Data: Adding a Product Model & Storing Products In The Database [Day 85]
Fetching & Outputting Product Items [Day 85]
Styling Product Items [Day 86]
Adding the "Product Details" (Single Product) Page [Day 86]
Updating Products (As Administrator) [Day 86]
Adding a "File Upload" Preview [Day 87]
Making Products Deletable [Day 87]
Using Ajax / Frontend JS Requests & Updating The DOM [Day 87]
Various Fixes & Proper Route Protection [Day 88]
Outputting Products For Customers [Day 88]
Outputting Product Details [Day 88]
Adding A Cart Model [Day 89]
Working On The Shopping Cart Logic [Day 89]
Adding Cart Items Via Ajax Requests [Day 89]
Adding A Cart Page [Day 90]
Styling The Cart Page [Day 90]
Updating Cart Items (Changing Quantities) [Day 90]
Updating Carts Via Ajax Requests (PATCH Requests) [Day 90]
Updating The DOM After Cart Item Updates [Day 91]
JavaScript & Floating Point Arithmetic [Day 91]
Adding The Order Controller & A Basic Order Model [Day 91]
Saving Orders In The Database [Day 91]
Displaying Orders (For Customers & Administrators) [Day 92]
Managing Orders As An Administrator [Day 92]
Keeping Cart Items Updated [Day 92]
Bugfixing & Polishing [Day 92]
Module Summary [Day 92]

Working with Services & APIs (e.g Adding Stripe Payments) [Day-93]

Module Introduction [Day 93]
What Are "Services" & "APIs"? [Day 93]
Why Would You Use Services & APIs? [Day 93]
Introducing Stripe [Day 93]
Creating A Stripe Account [Day 93]
Setting Up A Stripe API Request [Day 93]
Configuring The Stripe Request & Handling Payments [Day 93]
Module Summary [Day 93]
More Services: Social Login (Google, Facebook), Google Analytics & More [Day 93]

Deploying (Publiashing) Websites [Days 94-95]

Module Introduction [Day 94]
How Are Websites Made Available To The Public? [Day 94]
Static vs Dynamic Websites [Day 94]
Hosting Database Servers [Day 94]
Deployment (Preparation) Steps [Day 94]
The Example Projects [Day 94]
Testing & Code Preparation (incl. Environment Variables) [Day 94]
Evaluating Cross-Browser Support [Day 94]
Search Engine Optimization (SEO) [Day 94]
Adding a Favicon [Day 94]
Improving Performance & Shrinking Assets (JS, Images) [Day 95]
Deployment Example: Static Websites (Refresher) [Day 95]
Deployment Example: Dynamic Website With Backend Code [Day 95]
Deploying A MongoDB Database With Atlas [Day 95]
Finishing Dynamic Website Deployment [Day 95]

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

Module Introduction [Day 95]
APIs & Services: What & Why? [Day 95]
JS Packages vs URL-based APIs: What We Will Build Here [Day 95]
APIs vs "Traditional Websites" [Day 95]
Introducing REST APIs [Day 96]
Building A First Basic REST API [Day 96]
Enhancing The API & Making It More Realistic [Day 96]
A More Complex REST API: First Steps [Day 96]
Finishing The First API Endpoints [Day 97]
Testing APIs With Postman [Day 97]
Adding PATCH & DELETE Routes / Endpoints [Day 97]
Adding A Decoupled Frontend Website (SPA) [Day 97]
Why Would You Use A Decoupled Frontend / SPA? [Day 97]
Understanding CORS Errors [Day 97]
Fixing CORS Errors & Connecting The Frontend SPA To The REST API [Day 97]
Learning Check: Custom (REST) APIs [Day 97]

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

Module Introduction [Day 98]
Why Would You Use Frontend JavaScript UI Frameworks? [Day 98]
React vs Vue vs Angular: Which Framework Should You Use? [Day 98]
Getting Started With Vue.js ("Vue") [Day 98]
Listening To Events & Updating Data + the DOM [Day 98]
Introducing "Two-Way-Binding" [Day 98]
Outputting Lists Of Data [Day 99]
Outputting Content Conditionally [Day 99]
Updating Data [Day 99]
Deleting Data [Day 99]
Sending a POST Http Request [Day 99]
Loading Data & Managing Loading States [Day 99]
Loading Vue Differently [Day 99]
Sending PATCH + DELETE Requests & Module Summary [Day 99]
Learning Check: JavaScript Frameworks & Vue.js [Day 99]

Course Summary & Where To Go Next [Day-100]

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

Popular Searches

100 Days Of Code - 2024 Web Development Bootcamp

Beginner

Online

₹ 699 4999

Quick Facts

Course and certificate fees

Fees information

certificate availability

certificate providing authority

The syllabus

Introduction [Day 1]

Building A First Website: HTML & CSS Basics [Day1-5]

Diving Deeper Into Html & CSS [Days 6-8]

HTML & CSS - Practice & Summary [Days 9-10]

Serving a Website (Hosting & Deployment) [Day 11]

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

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

Understanding Responsive Web Design [Days 20-24]

Creating Beautiful Websites [Days 24-25]

Adding Forms To Website [Days 26-29]

Understanding The JavaScript Basics [Day 29-33]

Advanced JavaScript: Working with the DOM [Day 33- 37]

Advanced JavaScript: Control Structure [Day 37- 39]

Milestone Project: Building a Tic-Tac-Toe Game [Day 40- 44]

Working with Third Party Packages [Day 45- 46]

Onwards to Backend Development [Day 46]

NodeJS Introduction - Getting Started with Backend Development [Day 47]

Enhancing NodeJS with ExpressJS [Day 48-49]

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

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

Exploring More Advanced JavaScript Concepts [Days 54-56]

Onwards To Databases [Days 56- 57]

SQL Databses - Introduction & Core Concepts [Day 57-59]

Using MySQL in NodeJS & Express Website [Day 60-62]

NoSQL & MySQL - An Introduction [Days 63-64]

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

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

Ajax & Asynchronous JS-driven HTTP Request [Days 68-70]

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

Security [Days 74-75]

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

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

Working with Services & APIs (e.g Adding Stripe Payments) [Day-93]

Deploying (Publiashing) Websites [Days 94-95]

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

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

Course Summary & Where To Go Next [Day-100]

Instructors

Articles

Popular Articles

Latest Articles

Similar Courses

Courses of your Interest

More Courses by Udemy

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone