Complete the course within 100 days
About This Path
The idea behind this path is pretty simple: You complete the course within 100 days by following the below outline.
The course is structured such that it follows a clear red line and "tells a nice story" - i.e. the lectures and sections build up on each other and you will learn more and more, as you progress through the course.
This makes this path a great choice because you'll take the course as intended and gain all the knowledge in the right order.
Learn for 1h - 2h per day
Optionally dive deeper and practice after 100 days
Commit To It!
You'll get the most out of this challenge if you really commit to it!
Share your daily progress and what you learned or built via social media with the hashtag
#100DaysOfCode
On Twitter, you can also include @academind_real to connect with other people who are taking this course! You may also follow the #100DaysOfCode Twitter Bot to get automatic retweets.
Also have a look at the official "100 Days Of Code" Website for more details.
Explore The Full CourseDownload Path As PDF
Day 1
Video Duration: 53 minutes
Get started with the course & create your first basic website!
List of Lectures
- L:1 - Welcome to This Course! [Day 1]
- L:2 - What Is "Web Development" & How Does The Web Work? [Day 1]
- L:3 - The Three Key Programming Languages [Day 1]
- L:4 - How The Web Works: A Deep Dive [Day 1]
- L:5 - What About The "www"? [Day 1]
- L:6 - The 100 Days of Code Challenge! [Day 1]
- L:7 - How To Get The Most Out Of This Course [Day 1]
- L:8 - Stuck in the Course? We Got you Covered! [Day 1]
- L:9 - How To Use The Attached Code [Day 1]
- L:10 - Module Introduction [Day 1]
- L:11 - How to Create a Website [Day 1]
- L:12 - Creating our First HTML Page [Day 1]
Day 2
Video Duration: 48 minutes
Set up a proper local development environment and dive deeper into HTML. You'll also get started with CSS already!
List of Lectures
- L:13 - Setting Up a Development Environment [Day 2]
- L:14 - Why Visual Studio Code? [Day 2]
- L:15 - Understanding HTML Elements [Day 2]
- L:16 - Which HTML Elements Exist? [Day 2]
- L:17 - Adding Another HTML Element [Day 2]
- L:18 - Exploring HTML Attributes [Day 2]
- Quiz 1 - Learning Check: HTML Basics [Day 2]
- L:19 - Getting Started with CSS (Day 2)
- L:20 - More CSS Styling [Day 2]
Day 3
Video Duration: 59 minutes
Time to dive deeper into CSS and HTML. You'll learn more about styling and proper HTML document formatting.
List of Lectures
- L:21 - Working with Colors [Day 3]
- L:22 - Formatting our Code [Day 3]
- L:23 - Working with the Browser Developer Tools [Day 3]
- L:24 - Adding a Link [Day 3]
- L:25 - You can Nest HTML Elements! [Day 3]
- L:26 - Using Global CSS Styles [Day 3]
- L:27 - CSS Code Formatting [Day 3]
- L:28 - The HTML Document Skeleton & Metadata [Day 3]
- L:29 - Visual Studio Code Shortcuts & Tricks [Day 3]
- L:30 - Code Comments [Day 3]
- L:31 - First Summary [Day 3]
- Quiz 2 - Learning Check: HTML & CSS Basics [Day 3]
Day 4
Video Duration: 40 minutes
You'll dive even deeper into CSS and styling and you will also learn how you can split your code across multiple files.
List of Lectures
- L:32 - Styling the Anchor Element Also with Pseudo Hover [Day 4]
- L:33 - Why it's Called Cascading Style Sheets [Day 4]
- L:34 - Storing CSS Code in External Files [Day 4]
- L:35 - The Void Element Syntax [Day 4]
- L:36 - Multiple Files & Requests [Day 4]
- L:37 - Selecting Single Elements with the ID Selector [Day 4]
- L:38 - Working with "font-size" and "px" [Day 4]
- L:39 - Using Other Fonts from Google Fonts [Day 4]
Day 5
Video Duration: 44 minutes
We'll reach the end of the first main course section and you will learn how to add and style images to websites!
List of Lectures
- L:40 - Understanding How HTML & CSS Handle Text & Whitespace [Day 5]
- L:41 - Adding an Image [Day 5]
- L:42 - Styling the Image & Using the Body Tag [Day 5]
- L:43 - Styling the Overall Page Background [Day 5]
- L:44 - Adding a Second HTML File [Day 5]
- L:45 - A Word About File Name Conventions [Day 5]
- Quiz 3 - Learning Check: More HTML & CSS Features [Day 5]
- L:46 - A Challenge for You! [Day 5]
- L:47 - Challenge Solution [Day 5]
- Assignment 1 - Time to Practice - Your First Challenge! [Day 5]
- L:48 - Using a Shared CSS File [Day 5]
- L:49 - Organizing Source Files in Folders [Day 5]
- L:50 - Summary [Day 5]
Day 6
Video Duration: 45 minutes
Move to an even better local development setup and start diving into the depths of CSS fundamentals!
List of Lectures
- L:51 - Module Introduction [Day 6]
- L:52 - Using the Live Server Extension [Day 6]
- L:53 - The Development Server & The Local Website Address [Day 6]
- L:54 - Understanding Lists [Day 6]
- L:55 - Creating Lists [Day 6]
- L:56 - Understanding Parents, Children, Containers & More [Day 6]
- L:57 - Understanding Cascading, Inheritance & Specificity [Day 6]
- L:58 - Styling the Full Week Page [Day 6]
Day 7
Video Duration: 53 minutes
Learn about more key CSS concepts like the CSS box model, various CSS selectors and block vs inline elements.
List of Lectures
- L:59 - Introducing the CSS Box Model [Day 7]
- L:60 - Using the CSS Box Model [Day 7]
- L:61 - Creating HTML Layouts [Day 7]
- L:62 - Theory: Selectors & Combinators [Day 7]
- L:63 - Using Selectors & Combinators [Day 7]
- L:64 - Understanding Classes [Day 7]
- L:65 - Block vs Inline Elements [Day 7]
Day 8
Video Duration: 48 minutes
Learn about advanced CSS concepts & practice and apply what you learned until now!
List of Lectures
- L:66 - Styling Differences Between Block & Inline Elements [Day 8]
- L:67 - Understanding Margin Collapsing [Day 8]
- L:68 - The "box-shadow" Property [Day 8]
- L:69 - Your Challenge! [Day 8]
- L:70 - Creating the HTML Layout [Day 8]
- L:71 - Styling the Main Section [Day 8]
- L:72 - Styling Images & Working with Negative Margins [Day 8]
- L:73 - Finishing Touches [Day 8]
- L:74 - Module Summary [Day 8]
- L:75 - A List Of All CSS Selectors [Day 8]
Day 9
Video Duration: 48 minutes
Time for a first, thorough summary and practice. We'll start summarzing key HTML & CSS concepts.
List of Lectures
- L:76 - Module Introduction [Day 9]
- L:77 - Your Task! [Day 9]
- L:78 - Creating the Core Structure [Day 9]
- L:79 - Adding the Header Content [Day 9]
- L:80 - Adding Header Styling [Day 9]
- L:81 - Spacing & the CSS Box Model [Day 9]
- L:82 - Adding the Main Content [Day 9]
Day 10
Video Duration: 46 minutes
Let's finish the first summary module and ensure that we're all on the same page.
List of Lectures
- L:83 - Styling the Main Content [Day 10]
- L:84 - Styling List Items & Links [Day 10]
- L:85 - Adding the Footer [Day 10]
- L:86 - Introducing New HTML Elements [Day 10]
- L:87 - Organizing our Files [Day 10]
- L:88 - Module Summary [Day 10]
Day 11
Video Duration: 54 minutes
Time to share our first website with the world! Learn how to publish (deploy) a basic website. We'll also start diving into the next module (Git & GitHub) already!
List of Lectures
- L:89 - Module Introduction [Day 11]
- L:90 - What is "Hosting" & "Deployment"? [Day 11]
- L:91 - Hosting a First Static Website (Example Deployment on Netlify) [Day 11]
- L:92 - More Information On Netlify & HTTPS [Day 11]
- L:93 - Adding a Favicon [Day 11]
- L:94 - Relative vs Absolute Paths [Day 11]
- L:95 - Share Your Website! [Day 11]
- L:96 - Module Introduction [Day 11]
- L:97 - What are Git & GitHub? [Day 11]
- L:98 - Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]
- L:99 - Optional: MacOS Terminal (z Shell) Crash Course [Day 11]
Day 12
Video Duration: 50 minutes
Start diving deeper into Git (a version control software) by installing it on your system and learning about some first key Git concepts.
List of Lectures
- L:100 - Optional: Windows Command Prompt (cmd) Crash Course [Day 12]
- L:101 - Git: MacOS Installation [Day 12]
- L:102 - Git: Windows Installation [Day 12]
- L:103 - Understanding the Git Basics [Day 12]
- L:104 - Initializing the Repository & Creating our First Commit [Day 12]
Day 13
Video Duration: 44 minutes
Time to take control over your source code! Learn more about Git and GitHub and how you can use these tools effectively.
List of Lectures
- L:105 - Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]
- L:106 - Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]
- L:107 - Onwards to GitHub - What & Why? [Day 13]
- L:108 - Creating a GitHub Account & a Remote Repository [Day 13]
Day 14
Video Duration: 54 minutes
Dive deeper into GitHub and learn how you can use it to collaborate with others and share your code.
List of Lectures
- L:109 - Understanding the Personal Access Token & "git clone" [Day 14]
- L:110 - Collaborating on Projects - Collaborators & Organizations [Day 14]
- L:111 - Contributing to Projects - Forks & Pull Requests [Day 14]
- L:112 - Wrap Up [Day 14]
Day 15
Video Duration: 38 minutes
Back to coding! Let's dive into various techniques and concepts that help you create beautiful website layouts with CSS.
List of Lectures
- L:113 - Module Introduction [Day 15]
- L:114 - Project Overview - What we Will Build [Day 15]
- L:115 - Project Setup [Day 15]
- L:116 - Creating the Landing Page Structure [Day 15]
- L:117 - Adding the Page Logo [Day 15]
- L:118 - Adding the Page Navigation [Day 15]
- L:119 - Introducing CSS Flexbox [Day 15]
- L:120 - Aligning Flex Items [Day 15]
Day 16
Video Duration: 45 minutes
Learn more about CSS layouts and key styling techniques.
List of Lectures
- L:121 - Your Flexbox Challenge! [Day 16]
- L:122 - Adding Flexbox to our Project [Day 16]
- L:123 - Adding a Background Image [Day 16]
- L:124 - Creating a Container for the Hero-Content [Day 16]
- L:125 - Positioning Elements [Day 16]
- L:126 - Styling the Hero Content [Day 16]
- L:127 - Understanding Fixed & Absolute Positioning [Day 16]
Day 17
Video Duration: 53 minutes
Time to dive even deeper into the nitty-gritty (yet very important) details about CSS styling.
List of Lectures
- L:128 - Working with % Units & Creating a Top Navigation Bar [Day 17]
- L:129 - Finishing the Header [Day 17]
- L:130 - Introducing the "Highlights" Section [Day 17]
- L:131 - Creating the HTML Code [Day 17]
- L:132 - Building the Flex Container [Day 17]
- L:133 - Flex Item Layout [Day 17]
- L:134 - Styling Images with "object-fit" [Day 17]
- L:135 - Styling Text [Day 17]
Day 18
Video Duration: 42 minutes
Apply what you learned and start finishing the course section demo project by also diving into more key features.
List of Lectures
- L:136 - Understanding Parent - Child Margin Collapsing [Day 18]
- L:137 - Working with CSS Functions - Linear Gradients [Day 18]
- L:138 - The Next Step [Day 18]
- L:139 - Creating a Footer Section [Day 18]
- L:140 - Styling the Footer [Day 18]
- L:141 - Places Page - Overview & Preparations [Day 18]
- L:142 - Creating the Card Content [Day 18]
- L:143 - Using "position: static" [Day 18]
Day 19
Video Duration: 48 minutes
It's time for more practicing and some brand-new CSS concepts as well!
List of Lectures
- L:144 - Creating the Card Look [Day 19]
- L:145 - Understanding "overflow" & Your Challenge! [Day 19]
- L:146 - Solving the Challenge [Day 19]
- L:147 - Creating all Cards [Day 19]
- L:148 - The CSS Grid - Theory [Day 19]
- L:149 - Understanding the "nth-type" Selector & "grid-template-columns" [Day 19]
Day 20
Video Duration: 50 minutes
Explore more key CSS concepts - now focusing on 'responsive' websites that work well on all kinds of screen sizes and devices.
List of Lectures
- L:150 - Your Grid Challenge [Day 20]
- L:151 - Working with Unicode UTF-8 [Day 20]
- L:152 - Finishing Touches [Day 20]
- L:153 - Module Summary [Day 20]
- L:154 - Optional: Diving Deeper Into "position", Flexbox & the Grid [Day 20]
- L:155 - Module Introduction [Day 20]
- L:156 - Project Overview [Day 20]
- L:157 - Please Read: Optional Lectures [Day 20]
- L:158 - Optional: Your Challenge - Creating the HTML Structure [Day 20]
- L:159 - Optional: Challenge Solution - The HTML Structure [Day 20]
Day 21
Video Duration: 47 minutes
Learn about important CSS features that help with building responsive websites.
List of Lectures
- L:160 - Optional: Styling the Header [Day 21]
- L:161 - Optional: Styling the "main" Section [Day 21]
- L:162 - What is Responsive Design? [Day 21]
- L:163 - The Problem with Pixels [Day 21]
- L:164 - Introducing "em" & "rem" [Day 21]
Day 22
Video Duration: 46 minutes
Time to dive deeper into CSS units and start exploring another important feature: 'Media Queries'.
List of Lectures
- L:165 - Applying "em" & "rem" for the Font Size [Day 22]
- L:166 - Deep Dive: "em" vs "rem" vs "%" [Day 22]
- L:167 - Updating the Project Units [Day 22]
- L:168 - Comparing Desktop & Mobile First Design [Day 22]
- L:169 - Understanding Media Queries [Day 22]
Day 23
Video Duration: 50 minutes
Dive deeper into media queries and learn about mobile menus.
List of Lectures
- L:170 - Adding Media Queries to the Project [Day 23]
- L:171 - Your Media Queries Challenge! [Day 23]
- L:172 - Side Drawer & Hamburger Icon - Theory [Day 23]
- L:173 - Creating the Hamburger Button [Day 23]
- L:174 - Creating the Side Drawer [Day 23]
- L:175 - Understanding HTML Fragments [Day 23]
Day 24
Video Duration: 51 minutes
Time to finish responsive designs and explore general guidelines + more concepts that help with building good-looking websites.
List of Lectures
- L:176 - Understanding the Target Selector [Day 24]
- L:177 - Finishing the Side Drawer [Day 24]
- L:178 - Introducing the "z-index" Property [Day 24]
- L:179 - Module Summary [Day 24]
- L:180 - Module Introduction [Day 24]
- L:181 - Three Things to Keep in Mind [Day 24]
- L:182 - Introducing the Module Project [Day 24]
- L:183 - Sizing & Spacing [Day 24]
- L:184 - Choosing the Right Font [Day 24]
- L:185 - Understanding The Importance of Grey, Primary & Accent Colors [Day 24]
Day 25
Video Duration: 56 minutes
Learn about more key features that help with building beautiful webpages.
List of Lectures
- L:186 - Introducing CSS Variables / CSS Custom Properties [Day 25]
- L:187 - CSS Variables in Action [Day 25]
- L:188 - Comparing "root" vs "html" vs "*" Selectors [Day 25]
- L:189 - Understanding CSS Transformations [Day 25]
- L:190 - Adding CSS Transitions [Day 25]
- L:191 - Working with SVGs [Day 25]
Day 26
Video Duration: 38 minutes
Time to leave CSS. Learn how you can collect user input by using forms on your web pages.
List of Lectures
- L:192 - Module Introduction [Day 26]
- L:193 - What & Why [Day 26]
- L:194 - Important Form HTML Elements [Day 26]
- L:195 - Our First Input Element [Day 26]
- L:196 - Adding a Button [Day 26]
- L:197 - The Form Element, Form Submission & Different Types of Requests [Day 26]
Day 27
Video Duration: 45 minutes
Dive into more key form elements that you can use to gather all kinds of user input.
List of Lectures
- L:198 - Styling the Form Element [Day 27]
- L:199 - Adding Labels [Day 27]
- L:200 - More Detailed Forms Styling [Day 27]
- L:201 - Understanding Different Input Types [Day 27]
- L:202 - Understanding Email, Numbers, Password & Date Types [Day 27]
- L:203 - Working with Radio Buttons [Day 27]
Day 28
Video Duration: 44 minutes
Explore yet more form elements and practice what you learned about HTML forms.
List of Lectures
- L:204 - Using Checkboxes [Day 28]
- L:205 - The Textarea Element For Longer Text [Day 28]
- L:206 - Adding a Dropdown [Day 28]
- L:207 - Forms & Semantics (Structuring Forms) [Day 28]
- L:208 - More on Form Buttons [Day 28]
- L:209 - Validation Attributes [Day 28]
- L:210 - More Input & Form Attributes [Day 28]
Day 29
Video Duration: 53 minutes
More forms practice AND the introduction of another key frontend technology: JavaScript!
List of Lectures
- L:211 - Your Challenge! [Day 29]
- L:212 - Challenge: Base Page Structure & Styling [Day 29]
- Quiz 4 - Learning Check: Web Forms [Day 29]
- L:213 - Challenge: First Set of Input Elements [Day 29]
- L:214 - Challenge: Adding Remaining Elements [Day 29]
- L:215 - Challenge: Submission & Validation [Day 29]
- L:216 - Challenge: Styling [Day 29]
- L:217 - Module Introduction [Day 29]
- L:218 - What is JavaScript & Why would we use it? [Day 29]
- L:219 - What You Will Learn In this Module [Day 29]
- L:220 - Introducing Values & Variables [Day 29]
Day 30
Video Duration: 45 minutes
Learn about important JavaScript fundamentals and key language concepts.
List of Lectures
- L:221 - Adding the "script" HTML Element [Day 30]
- L:222 - Working with Values & Basic JavaScript Commands [Day 30]
- L:223 - Introducing Variables ("Data Containers") [Day 30]
- L:224 - A Closer Look At The JavaScript Syntax [Day 30]
- L:225 - A Second Variable & Practice Time! [Day 30]
- L:226 - Outsourcing JavaScript Code Into External Files [Day 30]
- L:227 - Introducing Arrays (Managing Lists Of Data) [Day 30]
- L:228 - Introducing Objects (Grouping Related Data) [Day 30]
Day 31
Video Duration: 44 minutes
Let's finish the JavaScript basics!
List of Lectures
- L:229 - Splitting Code Across Multiple Lines [Day 31]
- L:230 - Accessing Object Properties [Day 31]
- L:231 - Performing Operations [Day 31]
- L:232 - Onwards To Custom Commands! [Day 31]
- L:233 - Introducing Functions [Day 31]
- L:234 - Functions & Variables [Day 31]
- L:235 - Returning Values In Functions [Day 31]
- L:236 - Passing Data Into Functions With Parameters [Day 31]
- L:237 - Functions - A Summary [Day 31]
Day 32
Video Duration: 57 minutes
Time to practice what we learned before it's time for slighthly more advanced JavaScript concepts that help you work with data efficiently.
List of Lectures
- L:238 - Time To Practice: The Problem [Day 32]
- L:239 - Time To Practice: The Solution [Day 32]
- L:240 - Introducing Methods [Day 32]
- L:241 - Making Our Developer Life Easier (Logging with console.log()) [Day 32]
- L:242 - Math Operations & Working With Different Kinds Of Values [Day 32]
- L:243 - The Modulus Operator [Day 32]
- L:244 - Math Operations & Math Rules [Day 32]
- L:245 - Performing String (Text) Operations [Day 32]
- L:246 - JavaScript Operators, Shorthand Operators & Value Types [Day 32]
- L:247 - String Operations & String Methods [Day 32]
Day 33
Video Duration: 45 minutes
Start diving into one of the most important JavaScript concepts that will help you build interactive websites: The DOM.
List of Lectures
- L:248 - Basic Array Operations [Day 33]
- L:249 - Splitting JavaScript Code Across Multiple Files [Day 33]
- L:250 - Module Summary [Day 33]
- Quiz 5 - Learning Check: JavaScript Basics [Day 33]
- L:251 - Module Introduction [Day 33]
- L:252 - Our Starting Setup [Day 33]
- L:253 - The Global "window" & "document" Objects [Day 33]
- L:254 - What Is "The DOM"? [Day 33]
- L:255 - Exploring The DOM [Day 33]
- L:256 - Drilling Into The DOM To Select & Change HTML Elements [Day 33]
- L:257 - Loading Our Script Correctly [Day 33]
- L:258 - The DOM Tree & DOM Traversal [Day 33]
Day 34
Video Duration: 49 minutes
Learn and practice how you may work with the DOM efficiently.
List of Lectures
- L:259 - Drilling Into The DOM & Exploring Text Nodes [Day 34]
- L:260 - DOM Drilling Limitations [Day 34]
- L:261 - Searching The DOM For Elements [Day 34]
- L:262 - Querying Elements [Day 34]
- L:263 - Common Query Methods [Day 34]
- L:264 - Time to Practice: The Problem [Day 34]
- L:265 - Time to Practice: The Solution [Day 34]
- L:266 - Next Steps [Day 34]
- L:267 - Inserting New HTML Elements via JavaScript [Day 34]
Day 35
Video Duration: 39 minutes
Learn how to listen and react to user input and user events - something you will need for basically every interactive website.
List of Lectures
- L:268 - Deleting DOM Elements [Day 35]
- L:269 - Moving Existing Elements Around [Day 35]
- L:270 - Working with "innerHTML" [Day 35]
- Quiz 6 - Learning Check: JavaScript & The DOM [Day 35]
- L:271 - Introducing Events [Day 35]
- L:272 - Adding a First "click" Event Listener [Day 35]
- L:273 - Listening To User Input Events [Day 35]
- L:274 - The "event" Object [Day 35]
- Quiz 7 - Learning Check: JavaScript & DOM Events [Day 35]
Day 36
Video Duration: 54 minutes
Time to wrap up the JavaScript DOM fundamentals!
List of Lectures
- L:275 - A More Realistic Demo & Example [Day 36]
- L:276 - Introducing "Constant Variables" ("Constants") [Day 36]
- L:277 - Changing Element Styles With JavaScript [Day 36]
- L:278 - Managing CSS Classes With JavaScript [Day 36]
- L:279 - Module Summary [Day 36]
Day 37
Video Duration: 49 minutes
Learn about more key JavaScript concepts: It's time for 'control structures' now!
List of Lectures
- L:280 - Time to Practice: The Problem [Day 37]
- L:281 - Time to Practice: The Solution [Day 37]
- L:282 - Module Introduction [Day 37]
- L:283 - Getting Started with "Control Structures" [Day 37]
- L:284 - Introducing Boolean Values ("Booleans") & Comparison Operators [Day 37]
- L:285 - Booleans & Comparison Operators In Action [Day 37]
- L:286 - Using Booleans In "if" Statements (Conditional Code Execution) [Day 37]
Day 38
Video Duration: 46 minutes
Explore how different kinds of control structures work and why (and when) you would use them!
List of Lectures
- L:287 - A Real Example [Day 38]
- L:288 - Alternatives with "else" and "else if" [Day 38]
- L:289 - More on Boolean Values [Day 38]
- L:290 - "Truthy" & "Falsy" Values [Day 38]
- Quiz 8 - Learning Check: "if" Statements [Day 38]
- L:291 - Introducing Loops (Repeated Code Execution) [Day 38]
- L:292 - The Regular "for" Loop [Day 38]
- L:293 - The "for-of" Loop (for Arrays) [Day 38]
- L:294 - Using the Regular "for" Loop with Arrays [Day 38]
- L:295 - The "for-in" Loop (for Objects) [Day 38]
- L:296 - The "while" Loop [Day 38]
Day 39
Video Duration: 49 minutes
Time to practice what you learned about JavaScript control structures.
List of Lectures
- L:297 - Practice Time: Setup & The "for" Loop [Day 39]
- L:298 - Practice Time: The "for-of" Loop [Day 39]
- L:299 - Practice Time: The "for-in" Loop [Day 39]
- L:300 - Practice Time: The "while" Loop [Day 39]
- L:301 - Module Summary [Day 39]
- Quiz 9 - Learning Checks: Loops [Day 39]
Day 40
Video Duration: 44 minutes
It's 'Milestone Project' time! Apply many of the concepts you learned until now (not just JavaScript!) and build a browser game: The Tic-Tac-Toe game.
List of Lectures
- L:302 - Module Introduction [Day 40]
- L:303 - Planning The Project [Day 40]
- L:304 - Creating The HTML Structure [Day 40]
- L:305 - Adding Base Page Styles [Day 40]
Day 41
Video Duration: 51 minutes
Let's continue working on the Tic-Tac-Toe game by adding some styling as well as some event handlers to it.
List of Lectures
- L:306 - Adding Styling For The Game Configuration Area [Day 41]
- L:307 - Styling The Game Board [Day 41]
- L:308 - Adding JavaScript, Script Files & First Event Listeners [Day 41]
- L:309 - Showing & Hiding The Configuration Modal (Overlay) [Day 41]
Day 42
Video Duration: 53 minutes
Start handling form submission and use JavaScript to validate + handle the user input.
List of Lectures
- L:310 - Handling Form Submission With JavaScript [Day 42]
- L:311 - Validating User Input With JavaScript [Day 42]
- L:312 - Storing & Managing Submitted Data [Day 42]
Day 43
Video Duration: 39 minutes
Let's move on to the game logic of our Tic-Tac-Toe game. Time to get started on that!
List of Lectures
- L:313 - Adding Logic For Starting A Game [Day 43]
- L:314 - Managing Game Rounds (Turns) & Field Selection [Day 43]
- L:315 - Tracking Selected Fields On The Game Board [Day 43]
Day 44
Video Duration: 48 minutes
Time to finish our first milestone project!
List of Lectures
- L:316 - Checking For A Winner Or Draw [Day 44]
- L:317 - Ending The Game & Adding Restart Logic [Day 44]
- L:318 - Module Summary [Day 44]
Day 45
Video Duration: 51 minutes
As a developer, you often use third-party packages so that you don't have to write all the code on your own. Learn more about that on this day.
List of Lectures
- L:319 - Module Introduction [Day 45]
- L:320 - What & Why? [Day 45]
- L:321 - Third-Party Code vs Custom Code ("Your Own Code") [Day 45]
- L:322 - First Example: Adding Bootstrap For Some Default Styling [Day 45]
- L:323 - Adding & Using the Bootstrap CSS Package [Day 45]
- L:324 - Adding a JavaScript Package [Day 45]
- L:325 - Adding an Image Carousel / Gallery with a Third-Party Package [Day 45]
- L:326 - Combining Third-Party Packages With Custom Code [Day 45]
- L:327 - More Bootstrap Examples [Day 45]
- L:328 - Exercise Solution & First Summary [Day 45]
- L:329 - Another Example: Preparing a Parallax Page [Day 45]
Day 46
Video Duration: 37 minutes
Time to leave the frontend and move onwards to the backend and backend development.
List of Lectures
- L:330 - Adding A Parallax Effect Package [Day 46]
- L:331 - Viewing Third-Party Source Code & Module Summary [Day 46]
- L:332 - Module Introduction [Day 46]
- L:333 - What is "The Backend" & Why Do We Need Server-side Code? [Day 46]
- L:334 - Dynamic Websites vs Static Websites [Day 46]
- L:335 - Frontend vs Backend vs Fullstack Development [Day 46]
- L:336 - Choosing a Backend (Server-side) Programming Language [Day 46]
- Quiz 10 - Learning Check: Frontend vs Backend [Day 46]
Day 47
Video Duration: 52 minutes
Learn more NodeJS basics. NodeJS is the primary backend technology we use in this course.
List of Lectures
- L:337 - Module Introduction [Day 47]
- L:338 - Installing NodeJS [Day 47]
- L:339 - Executing NodeJS Code [Day 47]
- L:340 - Creating a Custom NodeJS Server [Day 47]
- L:341 - Handling Requests & Creating Custom Responses [Day 47]
- L:342 - Doing More Server-side Work [Day 47]
- Quiz 11 - Learning Check: NodeJS Basics [Day 47]
- L:343 - Summary [Day 47]
Day 48
Video Duration: 59 minutes
Learn how to add the important Express third-party package to your backend code.
List of Lectures
- L:344 - Module Introduction [Day 48]
- L:345 - Installing Express with "npm" [Day 48]
- L:346 - Creating a Server with Express & Handling Requests + Responses [Day 48]
- L:347 - Parsing User Data With Express [Day 48]
- L:348 - Storing Data in (Server-side) Files [Day 48]
Day 49
Video Duration: 47 minutes
Learn how to build dynamic websites and generate HTML code 'on the fly' on the backend with Node & Express.
List of Lectures
- L:349 - More About The "JSON" Format [Day 49]
- L:350 - Reading File Data & Returning Dynamic Responses (Dynamic HTML Code) [Day 49]
- L:351 - Enhancing the Developer Workflow with "nodemon" [Day 49]
- L:352 - Summary [Day 49]
- Quiz 12 - Learning Check: ExpressJS Basics [Day 49]
- L:353 - Module Introduction [Day 49]
- L:354 - Creating a Starting Project & What Needs To Change [Day 49]
- L:355 - Setting Up A Basic Express App (incl. Practice) [Day 49]
- L:356 - Serving HTML Files With Node & Express [Day 49]
Day 50
Video Duration: 46 minutes
Dive deeper into the generation of dynamic content with help of backend technologies.
List of Lectures
- L:357 - Serving Static Files (CSS & JavaScript) [Day 50]
- L:358 - Parsing Form Data & Redirecting Requests [Day 50]
- L:359 - Adding the EJS Template Engine [Day 50]
- L:360 - Rendering Dynamic Content With Templates [Day 50]
- L:361 - Outputting Repeated Content With EJS & Loops [Day 50]
- L:362 - Rendering Conditional Content [Day 50]
Day 51
Video Duration: 50 minutes
Learn how to not just generate dynamic content but also work with dynamic URL paths.
List of Lectures
- L:363 - Including Partial Content [Day 51]
- L:364 - EJS & IDE Support [Day 51]
- L:365 - Module Summary [Day 51]
- Quiz 13 - Learning Check: Static & Dynamic Content [Day 51]
- L:366 - Module Introduction [Day 51]
- L:367 - Introducing Dynamic Routes [Day 51]
- L:368 - Managing Data with Unique IDs [Day 51]
Day 52
Video Duration: 46 minutes
Dive even deeper into backend development, dynamic request handling and response metadata.
List of Lectures
- L:369 - Loading & Displaying Detail Data [Day 52]
- L:370 - Showing a 404 Page For "Not Found" Cases [Day 52]
- L:371 - More 404 Page Usage (Non-Existent Routes) [Day 52]
- L:372 - Handling Server-Side Errors (500 Status Code) [Day 52]
- L:373 - Working With Status Codes [Day 52]
- L:374 - Code Refactoring & Adding More Functions [Day 52]
Day 53
Video Duration: 51 minutes
Explore more features of the 'Express Router' and finish the basic backend concepts.
List of Lectures
- L:375 - Importing & Exporting Code In NodeJS [Day 53]
- L:376 - Using The Express Router To Split The Route Configuration [Day 53]
- L:377 - Introducing Query Parameters (& Hidden Form Fields) [Day 53]
- L:378 - Query Parameters vs Route Parameters [Day 53]
- L:379 - Module Summary [Day 53]
- Quiz 14 - Learning Check: Advanced Express Features [Day 53]
Day 54
Video Duration: 51 minutes
We need more advanced JavaScript concepts! Time to dive into those!
List of Lectures
- L:380 - Module Introduction [Day 54]
- L:381 - Functions & Default Parameters [Day 54]
- L:382 - Rest Parameters & The Spread Operator [Day 54]
- L:383 - Functions Are Objects! [Day 54]
- L:384 - Working with Template Literals [Day 54]
- L:385 - Primitive vs Reference Values [Day 54]
Day 55
Video Duration: 45 minutes
Explore more advanced JavaScript concepts - concepts which matter for both frontend and backend development.
List of Lectures
- L:386 - Custom Error Handling With try / catch [Day 55]
- L:387 - Error Data & Throwing Custom Errors [Day 55]
- L:388 - Variable Scoping & Shadowing [Day 55]
- Quiz 15 - Learning Check: More Advanced JavaScript Concepts [Day 55]
- L:389 - Introducing Classes As Object Blueprints [Day 55]
- L:390 - Classes & Methods (and "this") [Day 55]
- L:391 - Destructuring Objects & Arrays [Day 55]
- Quiz 16 - Learning Check: More on Objects [Day 55]
Day 56
Video Duration: 45 minutes
Time to finish the more advanced JavaScript concepts and move on to databases.
List of Lectures
- L:392 - Diving Into Asynchronous Code & Callback Functions [Day 56]
- L:393 - Introducing Promises [Day 56]
- L:394 - Asynchronous Code & Error Handling [Day 56]
- L:395 - Improving Code With async / await [Day 56]
- Quiz 17 - Learning Check: Asynchronous Code [Day 56]
- L:396 - Module Summary [Day 56]
- L:397 - Module Introduction [Day 56]
- L:398 - Why Databases? And What Are Databases In The First Place? [Day 56]
Day 57
Video Duration: 51 minutes
Learn about databases in general (what & why) and start diving into SQL database systems.
List of Lectures
- L:399 - A Quick Introduction To SQL Databases (RDBMS) [Day 57]
- L:400 - A Quick Introduction To NoSQL Databases [Day 57]
- L:401 - SQL vs NoSQL Databases [Day 57]
- Quiz 18 - Learning Check: Databases Introduction [Day 57]
- L:402 - Module Introduction [Day 57]
- L:403 - What & Why? [Day 57]
- L:404 - RDBMS Options [Day 57]
- L:405 - Installing MySQL & Setup Steps [Day 57]
- L:406 - Database Server vs Databases vs Tables [Day 57]
- L:407 - Writing Our First SQL Code & Creating a Database [Day 57]
Day 58
Video Duration: 46 minutes
Dive deeper into SQL, an important database querying language.
List of Lectures
- L:408 - Creating a Table & Table Structure [Day 58]
- L:409 - Inserting Data Into A Table [Day 58]
- L:410 - Reading Data From A Table (incl. Filtering) [Day 58]
- L:411 - Updating & Deleting Data [Day 58]
- L:412 - Designing A More Complex Database [Day 58]
- L:413 - Adding A New Table [Day 58]
Day 59
Video Duration: 56 minutes
Explore data entity relations and how you can work with them when using SQL.
List of Lectures
- L:414 - Implementing A More Complex Design With Relations [Day 59]
- L:415 - Inserting Related Data [Day 59]
- L:416 - Practice: Inserting Related Data [Day 59]
- L:417 - Querying & Joining Related Data [Day 59]
- L:418 - Practice: Joining Data [Day 59]
- L:419 - Module Summary & More On Relationships [Day 59]
- Quiz 19 - Learning Check: SQL Introduction [Day 59]
Day 60
Video Duration: 39 minutes
Time to use SQL together with Node & Express to build a real backend, using a SQL database engine.
List of Lectures
- L:420 - Module Introduction [Day 60]
- L:421 - Why Should Database-Accessing Code Run On The Backend? [Day 60]
- L:422 - What We'll Build In This Section [Day 60]
- L:423 - Planning Our Database Structure [Day 60]
- L:424 - Database Initialization [Day 60]
- L:425 - Project Setup [Day 60]
- L:426 - Creating Our First Routes [Day 60]
Day 61
Video Duration: 44 minutes
Continue using SQL in a Node + Express website.
List of Lectures
- L:427 - Connecting To The Database & Querying Data [Day 61]
- L:428 - Inserting Data With Placeholders (Injecting Dynamic Data) [Day 61]
- L:429 - Fetching & Displaying a List Of Blog Posts [Day 61]
Day 62
Video Duration: 47 minutes
Finish the usage of SQL in a Node + Express website and practice what you learned.
List of Lectures
- L:430 - Fetching & Displaying a Single Blog Post [Day 62]
- L:431 - Formatting & Transforming Fetched Data [Day 62]
- L:432 - Preparing The "Update Post" Page [Day 62]
- L:433 - Updating Posts [Day 62]
- L:434 - Deleting Posts [Day 62]
- L:435 - Module Summary [Day 62]
Day 63
Video Duration: 55 minutes
Besides SQL, you could also use a NoSQL database system. Learn more about NoSQL on this day!
List of Lectures
- L:436 - Module Introduction [Day 63]
- L:437 - The Idea Behind NoSQL Database Systems [Day 63]
- L:438 - Introducing MongoDB [Day 63]
- L:439 - General Setup Instructions & Installing MongoDB on macOS [Day 63]
- L:440 - Installing MongoDB on Windows [Day 63]
- L:441 - Installing the MongoDB Shell [Day 63]
- L:442 - Inserting Data with MongoDB [Day 63]
Day 64
Video Duration: 44 minutes
Dive deeper into NoSQL (MongoDB) and learn how to interact with data and NoSQL.
List of Lectures
- L:443 - Reading & Filtering Data [Day 64]
- L:444 - Updating Documents In A MongoDB Database [Day 64]
- L:445 - Deleting Documents With MongoDB [Day 64]
- L:446 - Planning a Complete Database Design / Layout [Day 64]
- L:447 - Implementing the Planned Design & Layout [Day 64]
- L:448 - Practice Time & More Filtering Operators [Day 64]
Day 65
Video Duration: 56 minutes
Just as before with SQL, learn how to use NoSQL together with Node & Express.
List of Lectures
- L:449 - Module Introduction [Day 65]
- L:450 - Planning the Database Structure & Layout [Day 65]
- L:451 - Project & Database Initialization [Day 65]
- L:452 - Connecting to MongoDB (from inside NodeJS) [Day 65]
- L:453 - Fetching & Displaying A List Of Authors [Day 65]
- L:454 - Inserting Documents (New Posts) [Day 65]
Day 66
Video Duration: 42 minutes
Continue using NoSQL with Node + Express and apply what you learned.
List of Lectures
- L:455 - Fetching & Displaying Documents [Day 66]
- L:456 - Fetching a Single Document [Day 66]
- L:457 - Transforming & Preparing Data [Day 66]
- L:458 - Updating Documents [Day 66]
- L:459 - Deleting Documents [Day 66]
Day 67
Video Duration: 47 minutes
On many websites, you need to support file uploads. Time to dive into this important feature!
List of Lectures
- L:460 - ExpressJS & Handling Asynchronous Code Errors [Day 67]
- L:461 - Module Introduction [Day 67]
- L:462 - The Two Sides Of Uploading Files & Setting Up A Starting Project [Day 67]
- L:463 - Adding A File Picker To A Form [Day 67]
- L:464 - Parsing Incoming File Uploads With The "multer" Package [Day 67]
- L:465 - How To Store Files On A Backend [Day 67]
- L:466 - Configuring Multer In-Depth [Day 67]
Day 68
Video Duration: 48 minutes
Learn how to store and serve uploaded files correctly before we dive into a brand-new, super-important concept: Asynchronous JS-driven Http requests.
List of Lectures
- L:467 - Storing File Data In A Database (And What NOT To Store) [Day 68]
- L:468 - Serving Uploaded Files To Website Visitors [Day 68]
- L:469 - Adding An Image Preview Feature [Day 68]
- L:470 - Module Summary [Day 68]
- Quiz 20 - Learning Check: File Uploads [Day 68]
- L:471 - Module Introduction [Day 68]
- L:472 - What Is Ajax? And Why Would We Need It? [Day 68]
- L:473 - What is "Ajax"? [Day 68]
Day 69
Video Duration: 57 minutes
Learn more about AJAX requests and how to work with them (on both the frontend and backend).
List of Lectures
- L:474 - The Starting Project & A Problem [Day 69]
- L:475 - Sending & Handling a GET Ajax Request [Day 69]
- L:476 - Updating The DOM Based On The Response [Day 69]
- L:477 - Preparing The POST Request Data [Day 69]
- L:478 - Sending & Handling a POST Ajax Request [Day 69]
Day 70
Video Duration: 46 minutes
Dive even deeper into AJAX requests before you thereafter start exploring 'User Authentication' in detail!
List of Lectures
- L:479 - Improving The User Experience (UX) [Day 70]
- L:480 - Handling Errors (Server-side & Technical) [Day 70]
- L:481 - We Now Have More HTTP Methods! [Day 70]
- L:482 - Module Summary [Day 70]
- Quiz 21 - Learning Check: Ajax / JS-driven Http Requests [Day 70]
- L:483 - Module Introduction [Day 70]
- L:484 - What is "Authentication" & Why Would You Want To Add It To A Website? [Day 70]
- L:485 - Our Starting Project [Day 70]
- L:486 - Adding a Basic Signup Functionality [Day 70]
Day 71
Video Duration: 46 minutes
Many websites need to provide user signup + login functionalities. Hence it's time to learn how you can implement that feature!
List of Lectures
- L:487 - Must-Do: Hashing Passwords [Day 71]
- L:488 - Adding User Login Functionality [Day 71]
- L:489 - Validating Signup Information [Day 71]
- L:490 - Introducing Sessions & Cookies - The Stars Of Authentication [Day 71]
- L:491 - Adding Sessions Support To Our Website [Day 71]
Day 72
Video Duration: 50 minutes
Let's continue working on user authentication and learn about the key concepts related to that.
List of Lectures
- L:492 - Storing Authentication Data In Sessions [Day 72]
- L:493 - Using Sessions & Cookies For Controlling Access [Day 72]
- L:494 - Adding The Logout Functionality [Day 72]
- L:495 - A Closer Look At Cookies [Day 72]
- L:496 - Diving Deeper Into Sessions (Beyond Authentication) [Day 72]
Day 73
Video Duration: 35 minutes
Time to finish the authentication part!
List of Lectures
- L:497 - Authorization vs Authentication [Day 73]
- L:498 - Practicing Sessions & Working With Sessions [Day 73]
- L:499 - Writing Custom Middlewares & Using "res.locals" [Day 73]
- L:500 - Module Summary [Day 73]
- Quiz 22 - Learning Check: Authentication [Day 73]
Day 74
Video Duration: 55 minutes
Time to dive into website security, various attack patterns and how to defend against them!
List of Lectures
- L:501 - Module Introduction [Day 74]
- L:502 - Authentication vs Website Security [Day 74]
- L:503 - Understanding CSRF Attacks [Day 74]
- L:504 - Partial CSRF Protection With "Same-Site" Cookies [Day 74]
- L:505 - Implementing A Better CSRF Protection [Day 74]
- L:506 - Understanding XSS Attacks [Day 74]
- L:507 - Protecting Against XSS Attacks [Day 74]
Day 75
Video Duration: 49 minutes
Finish the 'Security' chapter and move on to the next one: Writing good code and how to organize code efficiently, when working in bigger projects.
List of Lectures
- L:508 - Understanding SQL Injection Attacks [Day 75]
- L:509 - Protecting Against SQL Injection Attacks [Day 75]
- L:510 - A Word About NoSQL Injection [Day 75]
- L:511 - Avoid Exposing Your Server-side Code or Data Accidentally! [Day 75]
- L:512 - Module Summary [Day 75]
- Quiz 23 - Learning Check: Security [Day 75]
- L:513 - Module Introduction [Day 75]
- L:514 - Our Starting Project (Deep Dive) [Day 75]
- L:515 - What's Wrong With Our Code? [Day 75]
Day 76
Video Duration: 56 minutes
Explore more details about writing good code, using good patterns and organizing code into multiple files and modules.
List of Lectures
- L:516 - Splitting Our Routes [Day 76]
- L:517 - Extracting Configuration Settings [Day 76]
- L:518 - Extracting Custom Middleware [Day 76]
- L:519 - An Introduction To The MVC Pattern [Day 76]
- L:520 - Creating Our First Model [Day 76]
- L:521 - Adding Update & Delete Functionalities To The Model [Day 76]
- L:522 - Adding Fetch Functionalities To The Model [Day 76]
Day 77
Video Duration: 41 minutes
Learn more about refactoring and refactor code we wrote before.
List of Lectures
- L:523 - Adding A First Controller & Controller Actions [Day 77]
- L:524 - Refactoring The Sessions & Input Validation Errors Functionality [Day 77]
- L:525 - Refactoring The CSRF Token Handling [Day 77]
- L:526 - Migrating The "Authentication" Functionality To MVC [Day 77]
Day 78
Video Duration: 56 minutes
Time for another, huge milestone project: Time for the 'Online Shop' project.
List of Lectures
- L:527 - Improving Asynchronous Error Handling [Day 78]
- L:528 - Protecting Routes With Custom Middleware [Day 78]
- Quiz 24 - Learning Check: Refactoring & MVC [Day 78]
- L:529 - Module Introduction [Day 78]
- L:530 - Planning The Project [Day 78]
- L:531 - Your Challenge! [Day 78]
- L:532 - Course Project Setup [Day 78]
- L:533 - Creating Folders, Files & A First Set Of Routes [Day 78]
Day 79
Video Duration: 47 minutes
We're going to work on the online shop project for multiple days - this is day 2. Time for the basic structure and setup and some first styling.
List of Lectures
- L:534 - Adding EJS & First Views [Day 79]
- L:535 - Populating & Rendering The First View [Day 79]
- L:536 - Adding Base CSS Files & Static File Serving [Day 79]
- L:537 - Adding CSS Variables & A Website Theme [Day 79]
Day 80
Video Duration: 37 minutes
Online Shop Day 3
List of Lectures
- L:538 - More Base CSS Styles For The Website [Day 80]
- L:539 - Styling First Form Elements [Day 80]
- L:540 - Adding A MongoDB Database Server & Connection [Day 80]
Day 81
Video Duration: 49 minutes
Online Shop Day 4
List of Lectures
- L:541 - Adding User Signup [Day 81]
- L:542 - Security Time: Adding CSRF Protection [Day 81]
- L:543 - Implementing Proper Error Handling With The Error Handling Middleware [Day 81]
- L:544 - Introducing Sessions & Configuring Sessions [Day 81]
Day 82
Video Duration: 54 minutes
Online Shop Day 5
List of Lectures
- L:545 - Implementing Authentication & User Login [Day 82]
- L:546 - Finishing Authentication & Checking The Auth Status (Custom Middleware) [Day 82]
- L:547 - Adding Logout Functionality [Day 82]
- L:548 - Handling Errors In Asynchronous Code [Day 82]
- L:549 - Adding User Input Validation [Day 82]
Day 83
Video Duration: 56 minutes
Online Shop Day 6
List of Lectures
- L:550 - Flashing Errors & Input Data Onto Sessions [Day 83]
- L:551 - Displaying Error Messages & Saving User Input [Day 83]
- L:552 - Admin Authorization & Protected Navigation [Day 83]
- L:553 - Setting Up Base Navigation Styles [Day 83]
Day 84
Video Duration: 51 minutes
Online Shop Day 7
List of Lectures
- L:554 - Building a Responsive Website [Day 84]
- L:555 - Frontend JavaScript For Toggling The Mobile Menu [Day 84]
- L:556 - Adding Product Admin Pages & Forms [Day 84]
Day 85
Video Duration: 48 minutes
Online Shop Day 8
List of Lectures
- L:557 - Adding The Image Upload Functionality [Day 85]
- L:558 - More Data: Adding a Product Model & Storing Products In The Database [Day 85]
- L:559 - Fetching & Outputting Product Items [Day 85]
Day 86
Video Duration: 47 minutes
Online Shop Day 9
List of Lectures
- L:560 - Styling Product Items [Day 86]
- L:561 - Adding the "Product Details" (Single Product) Page [Day 86]
- L:562 - Updating Products (As Administrator) [Day 86]
Day 87
Video Duration: 43 minutes
Online Shop Day 10
List of Lectures
- L:563 - Adding a "File Upload" Preview [Day 87]
- L:564 - Making Products Deletable [Day 87]
- L:565 - Using Ajax / Frontend JS Requests & Updating The DOM [Day 87]
Day 88
Video Duration: 37 minutes
Online Shop Day 11
List of Lectures
- L:566 - Various Fixes & Proper Route Protection [Day 88]
- L:567 - Outputting Products For Customers [Day 88]
- L:568 - Outputting Product Details [Day 88]
Day 89
Video Duration: 51 minutes
Online Shop Day 12
List of Lectures
- L:569 - Adding A Cart Model [Day 89]
- L:570 - Working On The Shopping Cart Logic [Day 89]
- L:571 - Adding Cart Items Via Ajax Requests [Day 89]
Day 90
Video Duration: 50 minutes
Online Shop Day 13
List of Lectures
- L:572 - Adding A Cart Page [Day 90]
- L:573 - Styling The Cart Page [Day 90]
- L:574 - Updating Cart Items (Changing Quantities) [Day 90]
- L:575 - Updating Carts Via Ajax Requests (PATCH Requests) [Day 90]
Day 91
Video Duration: 43 minutes
Online Shop Day 14
List of Lectures
- L:576 - Updating The DOM After Cart Item Updates [Day 91]
- L:577 - JavaScript & Floating Point Arithmetic [Day 91]
- L:578 - Adding The Order Controller & A Basic Order Model [Day 91]
- L:579 - Saving Orders In The Database [Day 91]
Day 92
Video Duration: 44 minutes
Online Shop Day 15
List of Lectures
- L:580 - Displaying Orders (For Customers & Administrators) [Day 92]
- L:581 - Managing Orders As An Administrator [Day 92]
- L:582 - Keeping Cart Items Updated [Day 92]
- L:583 - Bugfixing & Polishing [Day 92]
- L:584 - Module Summary [Day 92]
Day 93
Video Duration: 52 minutes
Learn about third-party services, what that is and why you might use it, and learn how to integrate payments (as an example) into your projects.
List of Lectures
- L:585 - Module Introduction [Day 93]
- L:586 - What Are "Services" & "APIs"? [Day 93]
- L:587 - Why Would You Use Services & APIs? [Day 93]
- L:588 - Introducing Stripe [Day 93]
- L:589 - Creating A Stripe Account [Day 93]
- L:590 - Setting Up A Stripe API Request [Day 93]
- L:591 - Configuring The Stripe Request & Handling Payments [Day 93]
- L:592 - Module Summary [Day 93]
- L:593 - More Services: Social Login (Google, Facebook), Google Analytics & More [Day 93]
Day 94
Video Duration: 47 minutes
Just as earlier in the course, you of course want to publish your website at some point. Now that we can build more complex websites, it's time to take another look at deployment therefore.
List of Lectures
- L:594 - Module Introduction [Day 94]
- L:595 - How Are Websites Made Available To The Public? [Day 94]
- L:596 - Static vs Dynamic Websites [Day 94]
- L:597 - Hosting Database Servers [Day 94]
- L:598 - Deployment (Preparation) Steps [Day 94]
- L:599 - The Example Projects [Day 94]
- L:600 - Testing & Code Preparation (incl. Environment Variables) [Day 94]
- L:601 - Evaluating Cross-Browser Support [Day 94]
- L:602 - Search Engine Optimization (SEO) [Day 94]
- L:603 - Adding a Favicon [Day 94]
Day 95
Video Duration: 52 minutes
Deploy static and dynamic websites (and learn about the difference). Also start into a brand-new section on how you may build your own services or APIs.
List of Lectures
- L:604 - Improving Performance & Shrinking Assets (JS, Images) [Day 95]
- L:605 - Deployment Example: Static Websites (Refresher) [Day 95]
- L:606 - Deployment Example: Dynamic Website With Backend Code [Day 95]
- L:607 - Deploying A MongoDB Database With Atlas [Day 95]
- L:608 - Finishing Dynamic Website Deployment [Day 95]
- L:609 - Module Introduction [Day 95]
- L:610 - APIs & Services: What & Why? [Day 95]
- L:611 - JS Packages vs URL-based APIs: What We Will Build Here [Day 95]
- L:612 - APIs vs "Traditional Websites" [Day 95]
Day 96
Video Duration: 54 minutes
Dive deeper into building your own APIs!
List of Lectures
- L:613 - Introducing REST APIs [Day 96]
- L:614 - Building A First Basic REST API [Day 96]
- L:615 - Enhancing The API & Making It More Realistic [Day 96]
- L:616 - A More Complex REST API: First Steps [Day 96]
Day 97
Video Duration: 50 minutes
Learn how a standalone frontend could be connected to an API that you built (or to any other API).
List of Lectures
- L:617 - Finishing The First API Endpoints [Day 97]
- L:618 - Testing APIs With Postman [Day 97]
- L:619 - Adding PATCH & DELETE Routes / Endpoints [Day 97]
- L:620 - Adding A Decoupled Frontend Website (SPA) [Day 97]
- L:621 - Why Would You Use A Decoupled Frontend / SPA? [Day 97]
- L:622 - Understanding CORS Errors [Day 97]
- L:623 - Fixing CORS Errors & Connecting The Frontend SPA To The REST API [Day 97]
- Quiz 25 - Learning Check: Custom (REST) APIs [Day 97]
Day 98
Video Duration: 40 minutes
Back to frontend development! But now it's time to dive into powerful frontend JavaScript frameworks (= libraries)!
List of Lectures
- L:624 - Module Introduction [Day 98]
- L:625 - Why Would You Use Frontend JavaScript UI Frameworks? [Day 98]
- L:626 - React vs Vue vs Angular: Which Framework Should You Use? [Day 98]
- L:627 - Getting Started With Vue.js ("Vue") [Day 98]
- L:628 - Listening To Events & Updating Data + the DOM [Day 98]
- L:629 - Introducing "Two-Way-Binding" [Day 98]
Day 99
Video Duration: 53 minutes
Finish this thorough introduction into JavaScript frontend frameworks by also connecting your frontend website to your API.
List of Lectures
- L:630 - Outputting Lists Of Data [Day 99]
- L:631 - Outputting Content Conditionally [Day 99]
- L:632 - Updating Data [Day 99]
- L:633 - Deleting Data [Day 99]
- L:634 - Sending a POST Http Request [Day 99]
- L:635 - Loading Data & Managing Loading States [Day 99]
- L:636 - Loading Vue Differently [Day 99]
- L:637 - Sending PATCH + DELETE Requests & Module Summary [Day 99]
- Quiz 26 - Learning Check: JavaScript Frameworks & Vue.js [Day 99]
Day 100
Video Duration: 5 minutes
You did it! That's it! Time to wrap up this course!
List of Lectures
- L:638 - Bonus: Possible Next Steps, Practice Opportunities & Project Ideas [Day 100]