Autoplay
Autocomplete
Previous Lecture
Complete and Continue
100 Days Of Code: 2024 Web Development Bootcamp
Introduction [Day 1]
Welcome to This Course! [Day 1] (1:09)
What Is "Web Development" & How Does The Web Work? [Day 1] (7:50)
The Three Key Programming Languages [Day 1] (5:22)
How The Web Works: A Deep Dive [Day 1] (8:08)
What About The "www"? [Day 1]
The 100 Days of Code Challenge! [Day 1] (3:50)
How To Get The Most Out Of This Course [Day 1] (3:39)
Stuck in the Course? We Got you Covered! [Day 1] (3:23)
How To Use The Attached Code [Day 1]
The Academind Pro Referral Program
Building a First Website: HTML & CSS Basics [Days 1 - 5]
Module Introduction [Day 1] (2:23)
How to Create a Website [Day 1] (5:19)
Creating our First HTML Page [Day 1] (8:28)
Setting Up a Development Environment [Day 2] (11:22)
Why Visual Studio Code? [Day 2] (2:06)
Understanding HTML Elements [Day 2] (6:01)
Which HTML Elements Exist? [Day 2] (7:16)
Adding Another HTML Element [Day 2] (7:24)
Exploring HTML Attributes [Day 2] (4:32)
Quiz 1: Learning Check: HTML Basics [Day 2]
Getting Started with CSS [Day 2] (6:17)
More CSS Styling [Day 2] (2:38)
Working with Colors [Day 3] (8:11)
Formatting our Code [Day 3] (4:15)
Working with the Browser Developer Tools [Day 3] (6:13)
Adding a Link [Day 3] (6:40)
You can Nest HTML Elements! [Day 3] (2:18)
Using Global CSS Styles [Day 3] (7:49)
CSS Code Formatting [Day 3]
The HTML Document Skeleton & Metadata [Day 3] (7:35)
Visual Studio Code Shortcuts & Tricks [Day 3] (7:49)
Code Comments [Day 3]
First Summary [Day 3] (6:24)
Quiz 2: Learning Check: HTML & CSS Basics [Day 3]
Styling the Anchor Element Also with Pseudo Hover [Day 4] (4:49)
Why it's Called Cascading Style Sheets [Day 4] (2:25)
Storing CSS Code in External Files [Day 4] (6:23)
The Void Element Syntax [Day 4] (1:22)
Multiple Files & Requests [Day 4] (6:06)
Selecting Single Elements with the ID Selector [Day 4] (5:39)
Working with "font-size" and "px" [Day 4] (5:14)
Using Other Fonts from Google Fonts [Day 4] (8:12)
Understanding How HTML & CSS Handle Text & Whitespace [Day 5]
Adding an Image [Day 5] (4:48)
Styling the Image & Using the Body Tag [Day 5] (7:48)
Styling the Overall Page Background [Day 5] (1:58)
Adding a Second HTML File [Day 5] (5:34)
A Word About File Name Conventions [Day 5]
Quiz 3: Learning Check: More HTML & CSS Features [Day 5]
A Challenge for You! [Day 5] (2:31)
Challenge Solution [Day 5] (7:04)
Using a Shared CSS File [Day 5] (4:44)
Organizing Source Files in Folders [Day 5] (3:10)
Summary [Day 5] (3:54)
Diving Deeper Into HTML & CSS [Days 6 - 8]
Module Introduction [Day 6] (1:56)
Using the Live Server Extension [Day 6] (3:38)
The Development Server & The Local Website Address [Day 6]
Understanding Lists [Day 6] (5:02)
Creating Lists [Day 6] (8:01)
Understanding Parents, Children, Containers & More [Day 6] (8:44)
Understanding Cascading, Inheritance & Specificity [Day 6] (8:01)
Styling the Full Week Page [Day 6] (6:20)
Introducing the CSS Box Model [Day 7] (7:02)
Using the CSS Box Model [Day 7] (8:50)
Creating HTML Layouts [Day 7] (7:22)
Theory: Selectors & Combinators [Day 7] (4:08)
Using Selectors & Combinators [Day 7] (10:44)
Understanding Classes [Day 7] (6:22)
Block vs Inline Elements [Day 7] (8:18)
Styling Differences Between Block & Inline Elements [Day 8] (9:15)
Understanding Margin Collapsing [Day 8] (4:42)
The "box-shadow" Property [Day 8] (6:24)
Your Challenge! [Day 8] (1:43)
Creating the HTML Layout [Day 8] (4:28)
Styling the Main Section [Day 8] (5:38)
Styling Images & Working with Negative Margins [Day 8] (5:15)
Finishing Touches [Day 8] (4:08)
Module Summary [Day 8] (5:39)
A List Of All CSS Selectors [Day 8]
HTML & CSS - Practice & Summary [Days 9 - 10]
Module Introduction [Day 9] (2:43)
Your Task! [Day 9] (2:16)
Creating the Core Structure [Day 9] (11:21)
Adding the Header Content [Day 9] (3:34)
Adding Header Styling [Day 9] (12:08)
Spacing & the CSS Box Model [Day 9] (5:12)
Adding the Main Content [Day 9] (11:11)
Styling the Main Content [Day 10] (6:56)
Styling List Items & Links [Day 10] (16:57)
Adding the Footer [Day 10] (12:56)
Introducing New HTML Elements [Day 10] (5:37)
Organizing our Files [Day 10] (1:58)
Module Summary [Day 10] (1:22)
Serving a Website (Hosting & Deployment) [Day 11]
Module Introduction [Day 11] (2:29)
What is "Hosting" & "Deployment"? [Day 11] (3:15)
Hosting a First Static Website (Example Deployment on Netlify) [Day 11] (2:23)
More Information On Netlify & HTTPS [Day 11] (1:57)
Adding a Favicon [Day 11] (6:16)
Relative vs Absolute Paths [Day 11] (5:36)
Share Your Website! [Day 11]
Introducing Version Control with Git & GitHub [Days 11- 14]
Module Introduction [Day 11] (2:19)
What are Git & GitHub? [Day 11] (6:01)
Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11] (5:24)
Optional: MacOS Terminal (z Shell) Crash Course [Day 11] (17:59)
Optional: Windows Command Prompt (cmd) Crash Course [Day 12] (13:09)
Git: MacOS Installation [Day 12] (4:24)
Git: Windows Installation [Day 12] (9:20)
Understanding the Git Basics [Day 12] (4:34)
Initializing the Repository & Creating our First Commit [Day 12] (18:51)
Understanding Branches, Merging & Fixing Merge Conflicts [Day 13] (13:10)
Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13] (13:52)
Onwards to GitHub - What & Why? [Day 13] (4:35)
Creating a GitHub Account & a Remote Repository [Day 13] (12:25)
Understanding the Personal Access Token & "git clone" [Day 14] (14:49)
Collaborating on Projects - Collaborators & Organizations [Day 14] (20:15)
Contributing to Projects - Forks & Pull Requests [Day 14] (13:32)
Wrap Up [Day 14] (5:11)
Understanding HTML & CSS Layouts & Positioning [Days 15 - 20]
Module Introduction [Day 15] (1:22)
Project Overview - What we Will Build [Day 15] (2:04)
Project Setup [Day 15] (3:45)
Creating the Landing Page Structure [Day 15] (5:00)
Adding the Page Logo [Day 15] (8:21)
Adding the Page Navigation [Day 15] (4:19)
Introducing CSS Flexbox [Day 15] (8:45)
Aligning Flex Items [Day 15] (4:13)
Your Flexbox Challenge! [Day 16] (3:06)
Adding Flexbox to our Project [Day 16] (5:37)
Adding a Background Image [Day 16] (8:44)
Creating a Container for the Hero-Content [Day 16] (5:20)
Positioning Elements [Day 16] (6:05)
Styling the Hero Content [Day 16] (8:39)
Understanding Fixed & Absolute Positioning [Day 16] (7:55)
Working with % Units & Creating a Top Navigation Bar [Day 17] (6:58)
Finishing the Header [Day 17] (8:20)
Introducing the "Highlights" Section [Day 17] (2:15)
Creating the HTML Code [Day 17] (10:36)
Building the Flex Container [Day 17] (6:31)
Flex Item Layout [Day 17] (5:26)
Styling Images with "object-fit" [Day 17] (6:07)
Styling Text [Day 17] (6:24)
Understanding Parent - Child Margin Collapsing [Day 18] (3:33)
Working with CSS Functions - Linear Gradients [Day 18] (5:39)
The Next Step [Day 18] (1:56)
Creating a Footer Section [Day 18] (3:42)
Styling the Footer [Day 18] (7:35)
Places Page - Overview & Preparations [Day 18] (5:12)
Creating the Card Content [Day 18] (7:03)
Using "position: static" [Day 18] (7:39)
Creating the Card Look [Day 19] (3:53)
Understanding "overflow" & Your Challenge! [Day 19] (6:31)
Solving the Challenge [Day 19] (11:32)
Creating all Cards [Day 19] (9:06)
The CSS Grid - Theory [Day 19] (10:20)
Understanding the "nth-type" Selector & "grid-template-columns" [Day 19] (6:50)
Your Grid Challenge [Day 20] (7:13)
Working with Unicode UTF-8 [Day 20] (4:31)
Finishing Touches [Day 20] (6:35)
Module Summary [Day 20] (4:52)
Optional: Diving Deeper Into "position", Flexbox & the Grid [Day 20]
Understanding Responsive Design [Days 20 - 24]
Module Introduction [Day 20] (2:01)
Project Overview [Day 20] (4:39)
Please Read: Optional Lectures [Day 20]
Optional: Your Challenge - Creating the HTML Structure [Day 20] (6:55)
Optional: Challenge Solution - The HTML Structure [Day 20] (12:57)
Optional: Styling the Header [Day 21] (14:56)
Optional: Styling the "main" Section [Day 21] (16:39)
What is Responsive Design? [Day 21] (5:48)
The Problem with Pixels [Day 21] (5:45)
Introducing "em" & "rem" [Day 21] (3:52)
Applying "em" & "rem" for the Font Size [Day 22] (13:07)
Deep Dive: "em" vs "rem" vs "%" [Day 22] (9:04)
Updating the Project Units [Day 22] (10:03)
Comparing Desktop & Mobile First Design [Day 22] (5:16)
Understanding Media Queries [Day 22] (8:53)
Adding Media Queries to the Project [Day 23] (9:20)
Your Media Queries Challenge! [Day 23] (8:04)
Side Drawer & Hamburger Icon - Theory [Day 23] (4:16)
Creating the Hamburger Button [Day 23] (9:54)
Creating the Side Drawer [Day 23] (12:04)
Understanding HTML Fragments [Day 23] (5:52)
Understanding the Target Selector [Day 24] (4:29)
Finishing the Side Drawer [Day 24] (6:42)
Introducing the "z-index" Property [Day 24]
Module Summary [Day 24] (3:23)
Creating Beautiful Websites [Days 24 - 25]
Module Introduction [Day 24] (4:37)
Three Things to Keep in Mind [Day 24] (3:44)
Introducing the Module Project [Day 24] (6:01)
Sizing & Spacing [Day 24] (6:38)
Choosing the Right Font [Day 24] (9:09)
Understanding The Importance of Grey, Primary & Accent Colors [Day 24] (5:39)
Introducing CSS Variables / CSS Custom Properties [Day 25] (8:22)
CSS Variables in Action [Day 25] (16:28)
Comparing "root" vs "html" vs "*" Selectors [Day 25] (3:58)
Understanding CSS Transformations [Day 25] (6:41)
Adding CSS Transitions [Day 25] (14:34)
Working with SVGs [Day 25] (6:02)
Adding Forms to Websites [Days 26 - 29]
Module Introduction [Day 26] (2:14)
What & Why [Day 26] (3:32)
Important Form HTML Elements [Day 26] (2:50)
Our First Input Element [Day 26] (6:35)
Adding a Button [Day 26] (4:23)
The Form Element, Form Submission & Different Types of Requests [Day 26] (18:06)
Styling the Form Element [Day 27] (3:39)
Adding Labels [Day 27] (4:22)
More Detailed Forms Styling [Day 27] (12:45)
Understanding Different Input Types [Day 27] (5:11)
Understanding Email, Numbers, Password & Date Types [Day 27] (8:07)
Working with Radio Buttons [Day 27] (11:05)
Using Checkboxes [Day 28] (4:55)
The Textarea Element For Longer Text [Day 28] (4:12)
Adding a Dropdown [Day 28] (4:29)
Forms & Semantics (Structuring Forms) [Day 28] (10:25)
More on Form Buttons [Day 28] (4:43)
Validation Attributes [Day 28] (9:56)
More Input & Form Attributes [Day 28] (5:14)
Your Challenge! [Day 29] (2:08)
Challenge: Base Page Structure & Styling [Day 29] (6:25)
Quiz 4: Learning Check: Web Forms [Day 29]
Challenge: First Set of Input Elements [Day 29] (7:19)
Challenge: Adding Remaining Elements [Day 29] (5:03)
Challenge: Submission & Validation [Day 29] (3:43)
Challenge: Styling [Day 29] (12:18)
Understanding the JavaScript Basics [Days 29 - 33]
Module Introduction [Day 29] (1:12)
What is JavaScript & Why would we use it? [Day 29] (7:35)
What You Will Learn In this Module [Day 29] (2:36)
Introducing Values & Variables [Day 29] (4:27)
Adding the "script" HTML Element [Day 30] (2:52)
Working with Values & Basic JavaScript Commands [Day 30] (5:43)
Introducing Variables ("Data Containers") [Day 30] (8:15)
A Closer Look At The JavaScript Syntax [Day 30] (3:10)
A Second Variable & Practice Time! [Day 30] (4:24)
Outsourcing JavaScript Code Into External Files [Day 30] (7:11)
Introducing Arrays (Managing Lists Of Data) [Day 30] (6:52)
Introducing Objects (Grouping Related Data) [Day 30] (6:41)
Splitting Code Across Multiple Lines [Day 31] (4:32)
Accessing Object Properties [Day 31] (2:07)
Performing Operations [Day 31] (7:12)
Onwards To Custom Commands! [Day 31] (4:07)
Introducing Functions [Day 31] (7:14)
Functions & Variables [Day 31] (4:29)
Returning Values In Functions [Day 31] (6:21)
Passing Data Into Functions With Parameters [Day 31] (5:40)
Functions - A Summary [Day 31] (1:46)
Time To Practice: The Problem [Day 32] (4:39)
Time To Practice: The Solution [Day 32] (19:16)
Introducing Methods [Day 32] (5:47)
Making Our Developer Life Easier (Logging with console.log()) [Day 32] (6:21)
Math Operations & Working With Different Kinds Of Values [Day 32] (3:11)
The Modulus Operator [Day 32] (1:58)
Math Operations & Math Rules [Day 32] (6:06)
Performing String (Text) Operations [Day 32] (3:03)
JavaScript Operators, Shorthand Operators & Value Types [Day 32]
String Operations & String Methods [Day 32] (4:08)
Basic Array Operations [Day 33] (2:17)
Splitting JavaScript Code Across Multiple Files [Day 33]
Module Summary [Day 33] (2:45)
Quiz 5: Learning Check: JavaScript Basics [Day 33]
Advanced JavaScript: Working with the DOM [Days 33 - 37]
Module Introduction [Day 33] (1:50)
Our Starting Setup [Day 33] (1:09)
The Global "window" & "document" Objects [Day 33] (6:18)
What Is "The DOM"? [Day 33] (4:09)
Exploring The DOM [Day 33] (7:32)
Drilling Into The DOM To Select & Change HTML Elements [Day 33] (7:49)
Loading Our Script Correctly [Day 33] (3:49)
The DOM Tree & DOM Traversal [Day 33] (6:56)
Drilling Into The DOM & Exploring Text Nodes [Day 34] (6:56)
DOM Drilling Limitations [Day 34] (3:05)
Searching The DOM For Elements [Day 34] (4:05)
Querying Elements [Day 34] (5:15)
Common Query Methods [Day 34]
Time to Practice: The Problem [Day 34] (4:52)
Time to Practice: The Solution [Day 34] (14:11)
Next Steps [Day 34] (1:18)
Inserting New HTML Elements via JavaScript [Day 34] (8:35)
Deleting DOM Elements [Day 35] (3:13)
Moving Existing Elements Around [Day 35] (2:43)
Working with "innerHTML" [Day 35] (7:21)
Quiz 6: Learning Check: JavaScript & The DOM [Day 35]
Introducing Events [Day 35] (2:16)
Adding a First "click" Event Listener [Day 35] (10:41)
Listening To User Input Events [Day 35] (5:16)
The "event" Object [Day 35] (7:39)
Quiz 7: Learning Check: JavaScript & DOM Events [Day 35]
A More Realistic Demo & Example [Day 36] (18:44)
Introducing "Constant Variables" ("Constants") [Day 36] (12:25)
Changing Element Styles With JavaScript [Day 36] (8:11)
Managing CSS Classes With JavaScript [Day 36] (9:01)
Module Summary [Day 36] (5:54)
Time to Practice: The Problem [Day 37] (6:16)
Time to Practice: The Solution [Day 37] (18:41)
Advanced JavaScript: Control Structures [Days 37 - 39]
Module Introduction [Day 37] (1:05)
Getting Started with "Control Structures" [Day 37] (4:48)
Introducing Boolean Values ("Booleans") & Comparison Operators [Day 37] (8:19)
Booleans & Comparison Operators In Action [Day 37] (8:43)
Using Booleans In "if" Statements (Conditional Code Execution) [Day 37] (1:26)
A Real Example [Day 38] (3:05)
Alternatives with "else" and "else if" [Day 38] (10:12)
More on Boolean Values [Day 38] (5:02)
"Truthy" & "Falsy" Values [Day 38] (4:22)
Quiz 8: Learning Check: "if" Statements [Day 38]
Introducing Loops (Repeated Code Execution) [Day 38] (6:01)
The Regular "for" Loop [Day 38] (6:22)
The "for-of" Loop (for Arrays) [Day 38] (2:54)
Using the Regular "for" Loop with Arrays [Day 38]
The "for-in" Loop (for Objects) [Day 38] (4:39)
The "while" Loop [Day 38] (3:14)
Practice Time: Setup & The "for" Loop [Day 39] (13:54)
Practice Time: The "for-of" Loop [Day 39] (5:48)
Practice Time: The "for-in" Loop [Day 39] (8:55)
Practice Time: The "while" Loop [Day 39] (17:34)
Module Summary [Day 39] (3:12)
Quiz 9: Learning Checks: Loops [Day 39]
Milestone Project: Building a Tic-Tac-Toe Game [Days 40 - 44]
Module Introduction [Day 40] (4:47)
Planning The Project [Day 40] (3:30)
Creating The HTML Structure [Day 40] (21:22)
Adding Base Page Styles [Day 40] (14:49)
Adding Styling For The Game Configuration Area [Day 41] (20:39)
Styling The Game Board [Day 41] (12:10)
Adding JavaScript, Script Files & First Event Listeners [Day 41] (10:48)
Showing & Hiding The Configuration Modal (Overlay) [Day 41] (7:47)
Handling Form Submission With JavaScript [Day 42] (15:07)
Validating User Input With JavaScript [Day 42] (17:09)
Storing & Managing Submitted Data [Day 42] (21:10)
Adding Logic For Starting A Game [Day 43] (8:08)
Managing Game Rounds (Turns) & Field Selection [Day 43] (18:58)
Tracking Selected Fields On The Game Board [Day 43] (12:16)
Checking For A Winner Or Draw [Day 44] (24:11)
Ending The Game & Adding Restart Logic [Day 44] (19:47)
Module Summary [Day 44] (3:52)
Working with Third-Party Packages [Days 45 - 46]
Module Introduction [Day 45] (3:13)
What & Why? [Day 45] (6:31)
Third-Party Code vs Custom Code ("Your Own Code") [Day 45] (1:58)
First Example: Adding Bootstrap For Some Default Styling [Day 45] (3:18)
Adding & Using the Bootstrap CSS Package [Day 45] (4:21)
Adding a JavaScript Package [Day 45] (2:59)
Adding an Image Carousel / Gallery with a Third-Party Package [Day 45] (4:19)
Combining Third-Party Packages With Custom Code [Day 45] (6:22)
More Bootstrap Examples [Day 45] (4:52)
Exercise Solution & First Summary [Day 45] (4:53)
Another Example: Preparing a Parallax Page [Day 45] (8:29)
Adding A Parallax Effect Package [Day 46] (9:09)
Viewing Third-Party Source Code & Module Summary [Day 46] (2:32)
Onwards to Backend Development [Day 46]
Module Introduction [Day 46] (1:31)
What is "The Backend" & Why Do We Need Server-side Code? [Day 46] (9:26)
Dynamic Websites vs Static Websites [Day 46]
Frontend vs Backend vs Fullstack Development [Day 46] (6:02)
Choosing a Backend (Server-side) Programming Language [Day 46] (7:51)
Quiz 10: Learning Check: Frontend vs Backend [Day 46]
NodeJS Introduction - Getting Started With Backend Development [Day 47]
Module Introduction [Day 47] (1:17)
Installing NodeJS [Day 47] (6:00)
Executing NodeJS Code [Day 47] (9:20)
Creating a Custom NodeJS Server [Day 47] (12:36)
Handling Requests & Creating Custom Responses [Day 47] (13:25)
Doing More Server-side Work [Day 47] (7:00)
Quiz 11: Learning Check: NodeJS Basics [Day 47]
Summary [Day 47] (2:12)
Enhancing NodeJS with ExpressJS [Days 48 - 49]
Module Introduction [Day 48] (3:30)
Installing Express with "npm" [Day 48] (12:57)
Creating a Server with Express & Handling Requests + Responses [Day 48] (10:56)
Parsing User Data With Express [Day 48] (17:47)
Storing Data in (Server-side) Files [Day 48] (13:44)
More About The "JSON" Format [Day 49]
Reading File Data & Returning Dynamic Responses (Dynamic HTML Code) [Day 49] (6:25)
Enhancing the Developer Workflow with "nodemon" [Day 49] (8:33)
Summary [Day 49] (2:59)
Quiz 12: Learning Check: ExpressJS Basics [Day 49]
More Express: Static & Dynamic Content with Templates (EJS) [Day 49 - 51]
Module Introduction [Day 49] (2:29)
Creating a Starting Project & What Needs To Change [Day 49] (7:30)
Setting Up A Basic Express App (incl. Practice) [Day 49] (4:50)
Serving HTML Files With Node & Express [Day 49] (12:57)
Serving Static Files (CSS & JavaScript) [Day 50] (8:03)
Parsing Form Data & Redirecting Requests [Day 50] (11:51)
Adding the EJS Template Engine [Day 50] (9:45)
Rendering Dynamic Content With Templates [Day 50] (6:28)
Outputting Repeated Content With EJS & [Day 50] (7:02)
Rendering Conditional Content [Day 50] (3:15)
Including Partial Content [Day 51] (14:53)
EJS & IDE Support [Day 51] (2:17)
Module Summary [Day 51] (3:55)
Quiz 13: Learning Check: Static & Dynamic Content [Day 51]
Handling Dynamic Routes (URLs), Errors & Managing Bigger Express Projects [Days 51 - 53]
Module Introduction [Day 51] (1:24)
Introducing Dynamic Routes [Day 51] (16:50)
Managing Data with Unique IDs [Day 51] (10:32)
Loading & Displaying Detail Data [Day 52] (7:12)
Showing a 404 Page For "Not Found" Cases [Day 52] (6:40)
More 404 Page Usage (Non-Existent Routes) [Day 52] (5:49)
Handling Server-Side Errors (500 Status Code) [Day 52] (8:34)
Working With Status Codes [Day 52] (7:36)
Code Refactoring & Adding More Functions [Day 52] (10:23)
Importing & Exporting Code In NodeJS [Day 53] (12:45)
Using The Express Router To Split The Route Configuration [Day 53] (13:43)
Introducing Query Parameters (& Hidden Form Fields) [Day 53] (20:28)
Module Summary [Day 53] (2:34)
Quiz 14: Learning Check: Advanced Express Features [Day 53]
Exploring More Advanced JavaScript Concepts [Days 54 - 56]
Module Introduction [Day 54] (5:18)
Functions & Default Parameters [Day 54] (6:35)
Rest Parameters & The Spread Operator [Day 54] (11:57)
Functions Are Objects! [Day 54] (6:03)
Working with Template Literals [Day 54] (3:55)
Primitive vs Reference Values [Day 54] (17:40)
Custom Error Handling With try / catch [Day 55] (10:12)
Error Data & Throwing Custom Errors [Day 55]
Variable Scoping & Shadowing [Day 55] (8:16)
Quiz 15: Learning Check: More Advanced JavaScript Concepts [Day 55]
Introducing Classes As Object Blueprints [Day 55] (11:53)
Classes & Methods (and "this") [Day 55] (5:23)
Destructuring Objects & Arrays [Day 55] (8:21)
Quiz 16: Learning Check: More on Objects [Day 55]
Diving Into Asynchronous Code & Callback Functions [Day 56] (13:22)
Introducing Promises [Day 56] (7:19)
Asynchronous Code & Error Handling [Day 56] (2:39)
Improving Code With async / await [Day 56] (6:51)
Quiz 17: Learning Check: Asynchronous Code [Day 56]
Module Summary [Day 56] (5:25)
Onwards To Databases [Days 56 - 57]
Module Introduction [Day 56] (1:31)
Why Databases? And What Are Databases In The First Place? [Day 56] (8:19)
A Quick Introduction To SQL Databases (RDBMS) [Day 57] (6:45)
A Quick Introduction To NoSQL Databases [Day 57] (4:18)
SQL vs NoSQL Databases [Day 57] (4:59)
Quiz 18: Learning Check: Databases Introduction [Day 57]
SQL Databases - Introduction & Core Concepts [Days 57 - 59]
Module Introduction [Day 57] (2:45)
What & Why? [Day 57] (5:53)
RDBMS Options [Day 57] (2:56)
Installing MySQL & Setup Steps [Day 57] (13:03)
Database Server vs Databases vs Tables [Day 57] (3:25)
Writing Our First SQL Code & Creating a Database [Day 57] (7:12)
Creating a Table & Table Structure [Day 58] (13:35)
Inserting Data Into A Table [Day 58] (4:09)
Reading Data From A Table (incl. Filtering) [Day 58] (9:17)
Updating & Deleting Data [Day 58] (5:48)
Designing A More Complex Database [Day 58] (5:25)
Adding A New Table [Day 58] (8:07)
Implementing A More Complex Design With Relations [Day 59] (15:13)
Inserting Related Data [Day 59] (7:53)
Practice: Inserting Related Data [Day 59] (5:24)
Querying & Joining Related Data [Day 59] (8:47)
Practice: Joining Data [Day 59] (4:57)
Module Summary & More On Relationships [Day 59] (4:34)
Quiz 19: Learning Check: SQL Introduction [Day 59]
Using MySQL In NodeJS & Express Websites [Days 60 - 62]
Module Introduction [Day 60] (1:49)
Why Should Database-Accessing Code Run On The Backend? [Day 60] (3:29)
What We'll Build In This Section [Day 60] (3:58)
Planning Our Database Structure [Day 60] (4:59)
Database Initialization [Day 60] (9:49)
Project Setup [Day 60] (7:02)
Creating Our First Routes [Day 60] (8:19)
Connecting To The Database & Querying Data [Day 61] (16:40)
Inserting Data With Placeholders (Injecting Dynamic Data) [Day 61] (14:01)
Fetching & Displaying a List Of Blog Posts [Day 61] (13:11)
Fetching & Displaying a Single Blog Post [Day 62] (16:45)
Formatting & Transforming Fetched Data [Day 62] (8:07)
Preparing The "Update Post" Page [Day 62] (8:42)
Updating Posts [Day 62] (6:27)
Deleting Posts [Day 62] (4:24)
Module Summary [Day 62] (2:17)
NoSQL & MongoDB - An Introduction [Days 63 - 64]
Module Introduction [Day 63] (1:33)
The Idea Behind NoSQL Database Systems [Day 63] (9:22)
Introducing MongoDB [Day 63] (1:35)
General Setup Instructions & Installing MongoDB on macOS [Day 63] (17:41)
Installing MongoDB on Windows [Day 63] (8:57)
Installing the MongoDB Shell [Day 63] (5:17)
Inserting Data with MongoDB [Day 63] (10:17)
Reading & Filtering Data [Day 64] (5:59)
Updating Documents In A MongoDB Database [Day 64] (6:01)
Deleting Documents With MongoDB [Day 64] (2:26)
Planning a Complete Database Design / Layout [Day 64] (8:47)
Implementing the Planned Design & Layout [Day 64] (13:01)
Practice Time & More Filtering Operators [Day 64] (7:58)
NodeJS & MongoDB (NoSQL) [Days 65 - 67]
Module Introduction [Day 65] (2:38)
Planning the Database Structure & Layout [Day 65] (9:48)
Project & Database Initialization [Day 65] (6:47)
Connecting to MongoDB (from inside NodeJS) [Day 65] (13:06)
Fetching & Displaying A List Of Authors [Day 65] (8:44)
Inserting Documents (New Posts) [Day 65] (14:42)
Fetching & Displaying Documents [Day 66] (10:27)
Fetching a Single Document [Day 66] (9:43)
Transforming & Preparing Data [Day 66] (5:09)
Updating Documents [Day 66] (11:58)
Deleting Documents [Day 66] (4:16)
ExpressJS & Handling Asynchronous Code Errors [Day 67] (6:54)
Adding File Upload To A Website [Days 67 - 68]
Module Introduction [Day 67] (2:00)
The Two Sides Of Uploading Files & Setting Up A Starting Project [Day 67] (3:40)
Adding A File Picker To A Form [Day 67] (8:05)
Parsing Incoming File Uploads With The "multer" Package [Day 67] (9:30)
How To Store Files On A Backend [Day 67] (7:20)
Configuring Multer In-Depth [Day 67] (7:46)
Storing File Data In A Database (And What NOT To Store) [Day 68] (3:24)
Serving Uploaded Files To Website Visitors [Day 68] (9:04)
Adding An Image Preview Feature [Day 68] (10:23)
Module Summary [Day 68] (2:48)
Quiz 20: Learning Check: File Uploads [Day 68]
Ajax & Asynchronous JS-driven Http Requests [Days 68 - 70]
Module Introduction [Day 68] (1:43)
What Is Ajax? And Why Would We Need It? [Day 68] (9:26)
What is "Ajax"? [Day 68] (10:58)
The Starting Project & A Problem [Day 69] (5:22)
Sending & Handling a GET Ajax Request [Day 69] (19:09)
Updating The DOM Based On The Response [Day 69] (8:43)
Preparing The POST Request Data [Day 69] (7:56)
Sending & Handling a POST Ajax Request [Day 69] (15:28)
Improving The User Experience (UX) [Day 70] (5:57)
Handling Errors (Server-side & Technical) [Day 70] (8:00)
We Now Have More HTTP Methods! [Day 70] (8:19)
Module Summary [Day 70] (4:25)
Quiz 21: Learning Check: Ajax / JS-driven Http Requests [Day 70]
User Authentication & Working With Sessions [Days 70 - 73]
Module Introduction [Day 70] (2:40)
What is "Authentication" & Why Would You Want To Add It To A Website? [Day 70] (3:58)
Our Starting Project [Day 70] (4:47)
Adding a Basic Signup Functionality [Day 70] (8:19)
Must-Do: Hashing Passwords (6:59)
Adding User Login Functionality (8:47)
Validating Signup Information (5:37)
Introducing Sessions & Cookies - The Stars Of Authentication (12:22)
Adding Sessions Support To Our Website [Day 71] (12:10)
Storing Authentication Data In Sessions [Day 72] (7:22)
Using Sessions & Cookies For Controlling Access [Day 72] (11:43)
Adding The Logout Functionality [Day 72] (4:36)
A Closer Look At Cookies [Day 72] (7:00)
Diving Deeper Into Sessions (Beyond Authentication) [Day 72] (19:03)
Authorization vs Authentication [Day 73] (12:13)
Practicing Sessions & Working With Sessions [Day 73] (6:26)
Writing Custom Middlewares & Using "res.locals" [Day 73] (13:40)
Module Summary [Day 73] (2:20)
Quiz 22: Learning Check: Authentication [Day 73]
Security [Days 74 - 75]
Module Introduction [Day 74] (2:11)
Authentication vs Website Security [Day 74] (3:03)
Understanding CSRF Attacks [Day 74] (14:03)
Partial CSRF Protection With "Same-Site" Cookies [Day 74] (5:17)
Implementing A Better CSRF Protection [Day 74] (8:19)
Understanding XSS Attacks [Day 74] (9:50)
Protecting Against XSS Attacks [Day 74] (12:23)
Understanding SQL Injection Attacks [Day 75] (8:57)
Protecting Against SQL Injection Attacks [Day 75] (5:22)
A Word About NoSQL Injection [Day 75] (1:19)
Avoid Exposing Your Server-side Code or Data Accidentally! [Day 75] (5:04)
Module Summary [Day 75] (2:04)
Quiz 23: Learning Check: Security [Day 75]
Writing Good Code, Refactoring & The MVC Pattern [Days 75 - 78]
Module Introduction [Day 75] (2:32)
Our Starting Project (Deep Dive) [Day 75] (18:33)
What's Wrong With Our Code? [Day 75] (4:58)
Splitting Our Routes [Day 76] (5:31)
Extracting Configuration Settings [Day 76] (6:58)
Extracting Custom Middleware [Day 76] (6:26)
An Introduction To The MVC Pattern [Day 76] (4:45)
Creating Our First Model [Day 76] (11:22)
Adding Update & Delete Functionalities To The Model [Day 76] (9:38)
Adding Fetch Functionalities To The Model [Day 76] (11:16)
Adding A First Controller & Controller Actions [Day 77] (7:54)
Refactoring The Sessions & Input Validation Errors Functionality [Day 77] (18:30)
Refactoring The CSRF Token Handling [Day 77] (6:22)
Migrating The "Authentication" Functionality To MVC [Day 77] (8:01)
Improving Asynchronous Error Handling [Day 78] (5:13)
Protecting Routes With Custom Middleware [Day 78] (14:39)
Quiz 24: Learning Check: Refactoring & MVC [Day 78]
Milestone Project: A Complete Online Shop (From A to Z!) [Days 78 - 92]
Module Introduction [Day 78] (4:00)
Planning The Project [Day 78] (7:35)
Your Challenge! [Day 78] (1:52)
Course Project Setup [Day 78] (7:21)
Creating Folders, Files & A First Set Of Routes [Day 78] (15:42)
Adding EJS & First Views [Day 79] (13:44)
Populating & Rendering The First View [Day 79] (12:51)
Adding Base CSS Files & Static File Serving [Day 79] (11:10)
Adding CSS Variables & A Website Theme [Day 79] (9:24)
More Base CSS Styles For The Website [Day 80] (13:28)
Styling First Form Elements [Day 80] (9:54)
Adding A MongoDB Database Server & Connection [Day 80] (13:56)
Adding User Signup [Day 81] (21:44)
Security Time: Adding CSRF Protection [Day 81] (9:26)
Implementing Proper Error Handling With The Error Handling Middleware [Day 81] (7:59)
Introducing Sessions & Configuring Sessions [Day 81] (10:15)
Implementing Authentication & User Login [Day 82] (18:26)
Finishing Authentication & Checking The Auth Status (Custom Middleware) [Day 82] (8:09)
Adding Logout Functionality [Day 82] (6:01)
Handling Errors In Asynchronous Code [Day 82] (4:47)
Adding User Input Validation [Day 82] (16:36)
Flashing Errors & Input Data Onto Sessions [Day 83] (14:37)
Displaying Error Messages & Saving User Input [Day 83] (16:40)
Admin Authorization & Protected Navigation [Day 83] (10:42)
Setting Up Base Navigation Styles [Day 83] (14:19)
Building a Responsive Website [Day 84] (19:15)
Frontend JavaScript For Toggling The Mobile Menu [Day 84] (11:36)
Adding Product Admin Pages & Forms [Day 84] (19:51)
Adding The Image Upload Functionality [Day 85] (14:37)
More Data: Adding a Product Model & Storing Products In The Database [Day 85] (14:19)
Fetching & Outputting Product Items [Day 85] (19:21)
Styling Product Items [Day 86] (11:43)
Adding the "Product Details" (Single Product) Page [Day 86] (17:06)
Updating Products (As Administrator) [Day 86] (18:36)
Adding a "File Upload" Preview [Day 87] (14:32)
Making Products Deletable [Day 87] (8:44)
Using Ajax / Frontend JS Requests & Updating The DOM [Day 87] (19:48)
Various Fixes & Proper Route Protection [Day 88] (14:14)
Outputting Products For Customers [Day 88] (11:44)
Outputting Product Details [Day 88] (11:13)
Adding A Cart Model [Day 89] (19:35)
Working On The Shopping Cart Logic [Day 89] (13:18)
Adding Cart Items Via Ajax Requests [Day 89] (17:54)
Adding A Cart Page [Day 90] (15:58)
Styling The Cart Page [Day 90] (8:57)
Updating Cart Items (Changing Quantities) [Day 90] (14:02)
Updating Carts Via Ajax Requests (PATCH Requests) [Day 90] (10:43)
Updating The DOM After Cart Item Updates [Day 91] (12:32)
JavaScript & Floating Point Arithmetic [Day 91]
Adding The Order Controller & A Basic Order Model [Day 91] (14:34)
Saving Orders In The Database [Day 91] (15:37)
Displaying Orders (For Customers & Administrators) [Day 92] (11:02)
Managing Orders As An Administrator [Day 92] (10:10)
Keeping Cart Items Updated [Day 92] (13:40)
Bugfixing & Polishing [Day 92] (6:25)
Module Summary [Day 92] (3:00)
Working With Services & APIs (e.g. Adding Stripe Payments) [Day 93]
Module Introduction [Day 93] (1:33)
What Are "Services" & "APIs"? [Day 93] (12:01)
Why Would You Use Services & APIs? [Day 93] (2:48)
Introducing Stripe [Day 93] (4:25)
Creating A Stripe Account [Day 93] (3:14)
Setting Up A Stripe API Request [Day 93] (15:54)
Configuring The Stripe Request & Handling Payments [Day 93] (9:40)
Module Summary [Day 93] (1:14)
More Services: Social Login (Google, Facebook), Google Analytics & More [Day 93]
Deploying (Publishing) Websites [Days 94 - 95]
Module Introduction [Day 94] (2:06)
How Are Websites Made Available To The Public? [Day 94] (5:16)
Static vs Dynamic Websites [Day 94] (4:00)
Hosting Database Servers [Day 94] (3:53)
Deployment (Preparation) Steps [Day 94] (3:06)
The Example Projects [Day 94] (4:27)
Testing & Code Preparation (incl. Environment Variables) [Day 94] (12:32)
Evaluating Cross-Browser Support [Day 94] (5:24)
Search Engine Optimization (SEO) [Day 94] (5:30)
Adding a Favicon [Day 94]
Improving Performance & Shrinking Assets (JS, Images) [Day 95] (3:21)
Deployment Example: Static Websites (Refresher) [Day 95] (5:08)
Deployment Example: Dynamic Website With Backend Code [Day 95] (10:42)
Deploying A MongoDB Database With Atlas [Day 95] (7:14)
Finishing Dynamic Website Deployment [Day 95] (8:12)
Web Services & Building Custom (REST) APIs [Days 95 - 97]
Module Introduction [Day 95] (1:25)
APIs & Services: What & Why? [Day 95] (4:30)
JS Packages vs URL-based APIs: What We Will Build Here [Day 95] (4:02)
APIs vs "Traditional Websites" [Day 95] (7:39)
Introducing REST APIs [Day 96] (7:33)
Building A First Basic REST API [Day 96] (8:30)
Enhancing The API & Making It More Realistic [Day 96] (19:59)
A More Complex REST API: First Steps [Day 96] (17:56)
Finishing The First API Endpoints [Day 97] (3:26)
Testing APIs With Postman [Day 97] (6:58)
Adding PATCH & DELETE Routes / Endpoints [Day 97] (7:44)
Adding A Decoupled Frontend Website (SPA) [Day 97] (16:20)
Why Would You Use A Decoupled Frontend / SPA? [Day 97] (3:23)
Understanding CORS Errors [Day 97] (5:40)
Fixing CORS Errors & Connecting The Frontend SPA To The REST API [Day 97] (6:34)
Quiz 25: Learning Check: Custom (REST) APIs [Day 97]
Working With Frontend JavaScript Frameworks & Introducing Vue.js [Days 98 - 99]
Module Introduction (4:27)
Why Would You Use Frontend JavaScript UI Frameworks? [Day 98] (6:52)
React vs Vue vs Angular: Which Framework Should You Use? [Day 98] (2:45)
Getting Started With Vue.js ("Vue") [Day 98] (13:40)
Listening To Events & Updating Data + the DOM [Day 98] (7:29)
Introducing "Two-Way-Binding" [Day 98] (5:04)
Outputting Lists Of Data [Day 99] (8:29)
Outputting Content Conditionally [Day 99] (3:21)
Updating Data [Day 99] (11:19)
Deleting Data [Day 99] (5:05)
Sending a POST Http Request [Day 99] (6:55)
Loading Data & Managing Loading States [Day 99] (9:42)
Loading Vue Differently [Day 99] (2:10)
Sending PATCH + DELETE Requests & Module Summary [Day 99] (6:21)
Quiz 26: Learning Check: JavaScript Frameworks & Vue.js [Day 99]
Course Summary & Where To Go Next [Day 100]
Possible Next Steps, Practice Opportunities & Project Ideas [Day 100] (5:10)
Why Would You Use A Decoupled Frontend / SPA? [Day 97]
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock