Autoplay
Autocomplete
Previous Lesson
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)