Full Stack Web Development Bootcamp
Course Instructor
OdinSchool
FREE
To enroll in this course, please contact the Admin
/CourseBundles(40130)/2739190-Full-Stack-Web-Development-Bootcamp.jpg)
Course Overview
Schedule of Classes
Course Curriculum
1 Subject
Full Stack Web Development
668 Exercises • 820 Learning Materials
How to prepare a Resume
Creating a resume using Latex code on Overleaf
Prompt for Resume on Overleaf
External Link
HTML
1.Overview of Web Technologies
2.Understanding the Internet
Understanding the Internet - Knowledge Check
Exercise
3.Website Functionality and Architecture
Website Functionality and Architecture - Knowledge Check
Exercise
4.Introduction to HTML Basics
Introduction to HTML Basics - Knowledge Check
Exercise
5.Setting up your Development Environment
Setting up your Development Environment - Knowledge Check
Exercise
Assignment
Quiz
Exercise
Week 1 - HTML - Fundamentals
1.HTML Tag Basics
HTML Tag Basics - Knowledge Check
Exercise
2.Creating Websites without CSS
Creating Websites without CSS - Knowledge Check
Exercise
3.HTML Boilerplate
HTML Boilerplate - Knowledge Check
Exercise
4.Text Structuring in HTML
Text Structuring in HTML - Knowledge Check
Exercise
5.HTML Lists
HTML Lists - Knowledge Check
Exercise
6.Creating Links with Anchor Tags
Creating Links with Anchor Tags - Knowledge Check
Exercise
7.Adding Images in HTML
Adding Images in HTML - Knowledge Check
Exercise
Assignment
Assignment Solution File
Quiz
Exercise
Week 2 - HTML - Intermediate HTML
1.HTML Tables
HTML Tables - Knowledge Check
Exercise
2.HTML Tables Code Challenge
HTML Tables Code Challenge - Knowledge Check
Exercise
3.HTML Tables Solution Walkthrough
HTML Tables Solution Walkthrough - Knowledge Check
Exercise
4.Semantic HTML Tags
Semantic HTML Tags - Knowledge Check
Exercise
5.HTML Forms
HTML Forms - Knowledge Check
Exercise
6.Building a Contact Me Form with HTML
Building a Contact Me Form with HTML - Knowledge Check
Exercise
7.Hosting your Website with Surge.sh
Hosting your Website with Surge.sh - Knowledge Check
Exercise
8.HTML Practice Project - Restaurant Menu Design
HTML Practice Project - Restaurant Menu Design - Knowledge Check
Exercise
9.Managing your Projects and Hosting
Managing your Projects and Hosting - Knowledge Check
Exercise
Assignment
Assignment Solution File
Quiz
Exercise
Activity - MCQ's
Exercise
Week 3 - CSS - CSS Basics
1.Introduction to CSS
Introduction to CSS - Knowledge Check
Exercise
2.Inline CSS Styling
Inline CSS Styling - Knowledge Check
Exercise
3.Internal CSS Styling
Internal CSS Styling - Knowledge Check
Exercise
4.External CSS Styling
External CSS Styling - Knowledge Check
Exercise
5.Debugging CSS Code
Debugging CSS Code - Knowledge Check
Exercise
6.Understanding CSS Syntax
Understanding CSS Syntax - Knowledge Check
Exercise
7. CSS Selectors
CSS Selectors - Knowledge Check
Exercise
8. Comparing Classes and IDs
Comparing Classes and IDs - Knowledge Check
Exercise
Assignment
Assignment Solution File 1
Assignment Solution File 2
Quiz
Exercise
Week 4 - CSS - Styling Websites with CSS
1.HTML Divs
HTML Divs - Knowledge Check
Exercise
2.1 The Box Model Basics and Advanced - 1
2.2 The Box Model Basics and Advanced - 2
The Box Model Basics and Advanced - Knowledge Check
Exercise
3.CSS Display Property
CSS Display Property - Knowledge Check
Exercise
4.CSS Static and Relative Positioning
CSS Static and Relative Positioning - Knowledge Check
Exercise
5.CSS Absolute Positioning
CSS Absolute Positioning - Knowledge Check
Exercise
6.Centering Elements with CSS
Centering Elements with CSS - Knowledge Check
Exercise
7.Styling Fonts on your Website
Styling Fonts on your Website - Knowledge Check
Exercise
8.Adding Content to your Website with CSS
Adding Content to your Website with CSS - Knowledge Check
Exercise
9.Sizing Elements with CSS
Sizing Elements with CSS - Knowledge Check
Exercise
10.Changing Font Colors
Changing Font Colors - Knowledge Check
Exercise
11.Changing Font Colors, Modifying Font Weight, Adjusting Line Height
Changing Font Colors, Modifying Font Weight, Adjusting Line Height - Knowledge Check
Exercise
12.Font Property Challenge Solutions: Font Colors
Font Property Challenge Solutions: Font Colors - Knowledge Check
Exercise
13.Font Property Challenge Solutions: Font Weight and Line Height
Font Property Challenge Solutions: Font Weight and Line Height -Knowledge Check
Exercise
14.1 - CSS Float and Clear Properties - 1
14.2 CSS Float and Clear Properties - 2
CSS Float and Clear Properties - Knowledge Check
Exercise
Assignment
Assignment Solution File 1
Assignment Solution File 2
Quiz
Exercise
Week 4 - CSS - Getting Started with Git and Github
1 . Understanding the Importance of Git and Github
Understanding the Importance of Git and Github - Knowledge Check
Exercise
2 . Installing Git on your Local Machine
Installing Git on your Local Machine - Knowledge Check
Exercise
3. Exploring the Git 3-Stage Architecture and Creating your First Repository
Exploring the Git 3-Stage Architecture and Creating your First Repository - Knowledge Check
Exercise
4. Comparing Code with Git Diff and Ignoring Files with Gitignore
Comparing Code with Git Diff and Ignoring Files with Gitignore - Knowledge Check
Exercise
5. Introducing Github and Pushing Code to the Remote Repository
Introducing Github and Pushing Code to the Remote Repository - Knowledge Check
Exercise
6. Managing Code with Git Branches
Managing Code with Git Branches - Knowledge Check
Exercise
Assignment
Assignment Solution File
Quiz
Exercise
Week 5 - CSS - CSS Layout with Flexbox
1. Introduction to CSS Layouts - Three Ways of Building Layouts
Introduction to CSS Layouts - Three Ways of Building Layouts - Knowledge Check
Exercise
2. Using Floats for Layout
Using Floats for Layout - Knowledge Check
Exercise
3. How to Clear Floats?
How to Clear Floats? - Knowledge Check
Exercise
4. Building Layout using Float
Building Layout using Float - Knowledge Check
Exercise
5. Understanding the Box-Sizing Property and Its Impact on Layouts
Understanding the Box-Sizing Property and Its Impact on Layouts - Knowledge Check
Exercise
6. Introduction to Flexbox Layout
Introduction to Flexbox Layout - Knowledge Check
Exercise
7. Overview of Flexbox Properties
Overview of Flexbox Properties - Knowledge Check
Exercise
8. Spacing and Aligning Flex Items in a Container
Spacing and Aligning Flex Items in a Container - Knowledge Check
Exercise
9. Understanding the Flex Property in Detail
Understanding the Flex Property in Detail - Knowledge Check
Exercise
10. Implementing Flexbox Layout in Project
Implementing Flexbox Layout in Project - Knowledge Check
Exercise
11. Building a Simple Flexbox Layout
Building a Simple Flexbox Layout - Knowledge Check
Exercise
Assignment
Assignment Solution File 1
Assignment Solution File 2
Quiz
Exercise
Week 5 - CSS - CSS Layout with CSS Grid
Introduction to CSS Grid Layout
Introduction to CSS Grid Layout - Knowledge Check
Exercise
2. Overview of CSS Grid Properties and Concepts
Overview of CSS Grid Properties and Concepts - Knowledge Check
Exercise
3. Sizing Grid Columns and Rows
Sizing Grid Columns and Rows - Knowledge Check
Exercise
4. Placing and Spanning Grid Items in a Grid Container
Placing and Spanning Grid Items in a Grid Container - Knowledge Check
Exercise
5. Aligning Grid Items and Tracks
Aligning Grid Items and Tracks - Knowledge Check
Exercise
6. Building a Simple CSS Grid Layout
Building a Simple CSS Grid Layout - Knowledge Check
Exercise
7. Using Grid-Template-Areas to Define Layouts
Using Grid-Template-Areas to Define Layouts - Knowledge Check
Exercise
8. Implementing Auto-Fill and Auto-Fit Features with minmax
Implementing Auto-Fill and Auto-Fit Features with minmax - Knowledge Check
Exercise
9. Using Github Pages to Host your Website (Tip of the Day)
Using Github Pages to Host your Website (Tip of the Day) - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 5 - CSS - Building a Real-World Website - PandaFoods - 1
Reference Images
ZIP
1. Principles of Responsive Web Design
Principles of Responsive Web Design - Knowledge Check
Exercise
2 . Understanding Rem Units and Max Width
Understanding Rem Units and Max Width - Knowledge
Exercise
3. Building the Hero Section - 1
Building the Hero Section - 1 - Knowledge Check
Exercise
4. Building the Hero Section - 2
Building the Hero Section - 2 - Knowledge Check
Exercise
5.Building the Hero Section - 3
Building the Hero Section - 3 - Knowledge Check
Exercise
6.Building the Header Section
Building the Header Section - Knowledge Check
Exercise
7.Building the Navigation Section
Building the Navigation Section - Knowledge Check
Exercise
8.Building a Grid Layout for Content
Building a Grid Layout for Content - Knowledge Check
Exercise
9.Building the "How It Works" Section - 1
Building the "How It Works" Section - 1 - Knowledge Check
Exercise
Assignment
Assignment Solution
ZIP
Quiz
Exercise
Week 5 - CSS - Building a Real-World Website - PandaFoods - 2
1.Building the "How It Works" Section - 2
2.Building the "How It Works" Section - 3
3.Building the "Featured In" Section
Building the "How It Works" Section - 3 - Knowledge Check
Exercise
Building the "Featured In" Section - Knowledge Check
Exercise
4.Building the Call-to-Action Section - 1
Building the Call-to-Action Section - 1 - Knowledge Check
Exercise
5.Building the Call-to-Action Section - 2
Building the Call-to-Action Section - 2 - Knowledge Check
Exercise
6.Building the Call-to-Action Section - 3
Building the Call-to-Action Section - 3 - Knowledge Check
Exercise
7.Building the Footer Section - 1
Building the Footer Section - 1 - Knowledge Check
Exercise
8.Building the Footer Section - 2
Building the Footer Section - 2 - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Building the "How It Works" Section - 2 - Knowledge Check
Exercise
Quiz
Exercise
Week 5 - CSS - Responsive Web Design with CSS
1.Understanding Media Queries - 1
Understanding Media Queries 1 - Knowledge Check
Exercise
2.Understanding Media Queries - 2
Understanding Media Queries 2 - Knowledge Check
Exercise
3. Selecting Appropriate Breakpoints
Selecting Appropriate Breakpoints - Knowledge Check
Exercise
4.Designing for Small Laptops
Designing for Small Laptops - Knowledge Check
Exercise
5.Designing for Landscape Tablets
Designing for Landscape Tablets - Knowledge Check
Exercise
6.Designing for Tablets
Designing for Tablets - Knowledge Check
Exercise
7.Creating a Mobile Navigation Menu - 1
Creating a Mobile Navigation Menu 1 - Knowledge Check
Exercise
8.Creating a Mobile Navigation Menu - 2
Creating a Mobile Navigation Menu 2 - Knowledge Check
Exercise
9.Designing for Smaller Tablets
Designing for Smaller Tablets - Knowledge Check
Exercise
10. Designing for Phones
Designing for Phones - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
CSS - Projects
Project - 1
Project 1 - Solution File
ZIP
Project - 2
Project - 2 Solution File
ZIP
Week 6 - JavaScript Fundamentals - 1
1.Introduction to JavaScript
Introduction to JavaScript - Knowledge Check
Exercise
2. Values and Variables
Values and Variables - Knowledge Check
Exercise
3.Understanding Data Types in JavaScript
Understanding Data Types in JavaScript - Knowledge Check
Exercise
4. let, const and var
let, const and var - Knowledge Check
Exercise
5.Basic Operators in JavaScript
Basic Operators in JavaScript - Knowledge Check
Exercise
6.Understanding Operator Precedence in JavaScript
Understanding Operator Precedence in JavaScript - Knowledge Check
Exercise
7. Coding Challenge #1
Coding Challenge #1 - Knowledge Check
Exercise
8.Working with Strings and Template Literals in JavaScript
Working with Strings and Template Literals in JavaScript - Knowledge Check
Exercise
9.Making Decisions with if / else Statements in JavaScript
Making Decisions with if / else Statements in JavaScript - Knowledge Check
Exercise
10. Coding Challenge #2
Coding Challenge #2 - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 6 - JavaScript Fundamentals - 2
1.Understanding Type Conversion and Coercion in JavaScript
Understanding Type Conversion and Coercion in JavaScript - Knowledge Check
Exercise
2.Truthy and Falsy Values in JavaScript
Truthy and Falsy Values in JavaScript - Knowledge Check
Exercise
3. Equality Operators: == vs. === in JavaScript
Equality Operators: == vs. === in JavaScript - Knowledge Check
Exercise
4.Boolean Logic
Boolean Logic - Knowledge Check
Exercise
5.Working with Logical Operators in JavaScript
Working with Logical Operators in JavaScript - Knowledge Check
Exercise
6.The switch Statement
The switch Statement - Knowledge Check
Exercise
7.Statements and Expressions
Statements and Expressions - Knowledge Check
Exercise
8.Working with the Conditional (Ternary) Operator in JavaScript
Working with the Conditional (Ternary) Operator in JavaScript - Knowledge Check
Exercise
9.Overview of JavaScript Releases: ES5, ES6+ and ESNext
Overview of JavaScript Releases: ES5, ES6+ and ESNext - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 6 - JavaScript Fundamentals - 3
1.Activating Strict Mode in JavaScript
Activating Strict Mode in JavaScript - Knowledge Check
Exercise
2.Working with Functions in JavaScript
Working with Functions in JavaScript - Knowledge Check
Exercise
3.Understanding Function Declarations vs. Expressions in JavaScript
Understanding Function Declarations vs. Expressions in JavaScript - Knowledge Check
Exercise
4.Working with Arrow Functions in JavaScript
Working with Arrow Functions in JavaScript - Knowledge Check
Exercise
5. Functions Calling Other Functions
Functions Calling Other Functions - Knowledge Check
Exercise
6.Reviewing Functions
Reviewing Functions - Knowledge Check
Exercise
7. Introduction To Arrays
Introduction To Arrays - Knowledge Check
Exercise
8.Basic Array Operations (Methods) - 1 in JavaScript
Basic Array Operations (Methods) - 1 in JavaScript - Knowledge Check
Exercise
9.Basic Array Operations (Methods)- 2
Basic Array Operations (Methods)- 2 - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 6 - JavaScript Fundamentals - 4
1. Introduction to Objects in JavaScript
Introduction to Objects in JavaScript - Knowledge Check
Exercise
2.Understanding Dot vs. Bracket Notation in JavaScript
Understanding Dot vs. Bracket Notation in JavaScript - Knowledge Check
Exercise
3.Working with Object Methods in JavaScript
Working with Object Methods in JavaScript -Knowledge Check
Exercise
4.Iteration: The for Loop in JavaScript
Iteration: The for Loop in JavaScript - Knowledge Check
Exercise
5.Looping Arrays, Breaking, and Continuing in JavaScript
Looping Arrays, Breaking, and Continuing in JavaScript - Knowledge Check
Exercise
6. Looping Backwards and Loops in Loops
Looping Backwards and Loops in Loops - Knowledge Check
Exercise
7. The while Loop
The while Loop - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 6 - Java Script - DOM Manipulation and Event Handling in JavaScript
1.Understanding the Document Object Model (DOM)
Understanding the Document Object Model (DOM) - Knowledge Check
Exercise
2.Selecting and Modifying Elements in the DOM
Selecting and Modifying Elements in the DOM - Knowledge Check
Exercise
3.Handling Click Events and User Input
Handling Click Events and User Input - Knowledge Check
Exercise
CSS File
ZIP
4.Project: Guess My Number Game
Project: Guess My Number Game - Knowledge Check
Exercise
5.Implementing the Game Logic using JavaScript
Implementing the Game Logic using JavaScript - Knowledge Check
Exercise
6.Manipulating CSS Styles with JavaScript
Manipulating CSS Styles with JavaScript - Knowledge Check
Exercise
7.Adding Highscores to the Game
Adding Highscores to the Game - Knowledge Check
Exercise
CSS File
ZIP
8.Project: Modal Window
Project: Modal Window - Knowledge Check
Exercise
9.Working with CSS Classes in JavaScript
Working with CSS Classes in JavaScript - Knowledge Check
Exercise
10.Handling Keyboard Events in JavaScript
Handling Keyboard Events in JavaScript - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 6 - JavaScript Runtime and Execution Context
1.Overview of JavaScript as a High-Level Language
Overview of JavaScript as a High-Level Language - Knowledge Check
Exercise
2.JavaScript Engine and Runtime Environment
JavaScript Engine and Runtime Environment - Knowledge Check
Exercise
3.Execution Contexts and the Call Stack
Execution Contexts and the Call Stack - Knowledge Check
Exercise
4.Scopes and the Scope Chain in JavaScript
Scopes and the Scope Chain in JavaScript - Knowledge Check
Exercise
5.Variable Environment, Hoisting, and Temporal Dead Zone (TDZ)
Variable Environment, Hoisting, and Temporal Dead Zone (TDZ) - Knowledge Check
Exercise
6.The "this" Keyword and its Behavior in JavaScript
The "this" Keyword and its Behavior in JavaScript - Knowledge Check
Exercise
7.Differences between Regular Functions and Arrow Functions
Differences between Regular Functions and Arrow Functions - Knowledge Check
Exercise
8.Primitive vs. Reference Types in JavaScript
Primitive vs. Reference Types in JavaScript - Knowledge Check
Exercise
Assignment
Quiz
Exercise
JavaScript - Project
Project - 3
Project 3 - Solution File
ZIP
Week 7 - Data Structures - Modern JavaScript Features: Data Structures, Operators, and Strings - 1
1.Destructuring Arrays in JavaScript
Destructuring Arrays in JavaScript - Knowledge Check
Exercise
2.Destructuring Objects in JavaScript
Destructuring Objects in JavaScript - Knowledge Check
Exercise
3.Spread Operator (...) in JavaScript
Spread Operator (...) in JavaScript - Knowledge Check
Exercise
4.Rest Pattern and Parameters
Rest Pattern and Parameters - Knowledge Check
Exercise
5.Short-Circuiting Operators (&& and ||) in JavaScript
Short-Circuiting Operators (&& and ||) in JavaScript - Knowledge Check
Exercise
6.The Nullish Coalescing Operator (??) in JavaScript
The Nullish Coalescing Operator (??) in JavaScript - Knowledge Check
Exercise
7.Logical Assignment Operators in JavaScript
Logical Assignment Operators in JavaScript - Knowledge Check
Exercise
8.Coding Challenge
9.Iterating Over Arrays Using the for-of Loop in JavaScript
Iterating Over Arrays Using the for-of Loop in JavaScript - Knowledge Check
Exercise
10. Enhanced Object Literals in JavaScript
Enhanced Object Literals in JavaScript - Knowledge Check
Exercise
Assignment
Assignment solution File
ZIP
Quiz
Exercise
Week 7 - Data Structures - Modern JavaScript Features: Data Structures, Operators, and Strings (Continued)
1.Optional Chaining (?.) in JavaScript
Optional Chaining (?.) in JavaScript - Knowledge Check
Exercise
2.Iterating Over Objects in JavaScript using Object.keys(), Object.values(), and Object.entries()
Iterating Over Objects in JavaScript using Object.keys(), Object.values(), and Object.entries() - Knowledge Check
Exercise
3.Coding Challenge
4.Sets in JavaScript
Sets in JavaScript - Knowledge Check
Exercise
5.Maps in JavaScript: Fundamentals
Maps in JavaScript: Fundamentals - Knowledge Check
Exercise
6.Maps in JavaScript: Iteration
Maps in JavaScript: Iteration - Knowledge Check
Exercise
7.Summary of Data Structures in JavaScript and their Appropriate Use Cases
Summary of Data Structures in JavaScript and their Appropriate Use Cases - Knowledge Check
Exercise
8.Coding Challenge
9. Working with Strings in JavaScript - 1
Working with Strings in JavaScript - 1 - Knowledge Check
Exercise
10 .Working with Strings in JavaScript - 2
Working with Strings in JavaScript - 2 - Knowledge Check
Exercise
11.Working with Strings in JavaScript
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 7 - Data Structures - Advanced JavaScript Functions
1.Default Parameters in JavaScript Functions
Default Parameters in JavaScript Functions - Knowledge Check
Exercise
2.Passing Arguments to JavaScript Functions: Value vs. Reference
Passing Arguments to JavaScript Functions: Value vs. Reference - Knowledge Check
Exercise
3.Callback Functions in JavaScript
Callback Functions in JavaScript - Knowledge check
Exercise
4.Functions Returning Functions in JavaScript
Functions Returning Functions in JavaScript - Knowledge Check
Exercise
5.The call() and apply() Methods in JavaScript
The call() and apply() Methods in JavaScript - Knowledge Check
Exercise
6.The bind() Method in JavaScript
The bind() Method in JavaScript - Knowledge Check
Exercise
7. Immediately Invoked Function Expressions (IIFE) in JavaScript
Immediately Invoked Function Expressions (IIFE) in JavaScript - Knowledge Check
Exercise
8.Closures in JavaScript
Closures in JavaScript - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 7 - Data Structures - Arrays and UI Design in JavaScript
1.Basic Array Manipulation Methods
Basic Array Manipulation Methods - Knowledge Check
Exercise
2. The at() Method for Indexing Arrays
The at() Method for Indexing Arrays - Knowledge Check
Exercise
3.Looping Array-forEach
Looping Array-forEach - Knowledge Check
Exercise
4.Iterating through Maps and Sets using forEach()
Iterating through Maps and Sets using forEach() - Knowledge Check
Exercise
5. Creating the User Interface - 1
Creating the User Interface - 1 - Knowledge Check
Exercise
6.Creating the User Interface - 2
Creating the User Interface - 2 - Knowledge Check
Exercise
7.Creating the User Interface - 3
Creating the User Interface - 3 - Knowledge Check
Exercise
8.Creating the User Interface - 4
Creating the User Interface - 4 - Knowledge Check
Exercise
9.Creating Dummy Data and Selecting DOM Elements with JavaScript
Creating Dummy Data and Selecting DOM Elements with JavaScript - Knowledge Check
Exercise
10.Creating and Inserting DOM Elements Dynamically
Creating and Inserting DOM Elements Dynamically - Knowledge Check
Exercise
Assignment
Assignment Solution - HTML Code
Assignment Solution - CSS Code
Assignment Solution - JavaScript Code
Quiz
Exercise
Week 7 - Data Structures - Advanced Array Methods in JavaScript
1.Mapping Array Elements with map()
Mapping Array Elements with map() - Knowledge Check
Exercise
2.Generating Usernames
Generating Usernames - Knowledge Check
Exercise
3. Filtering Array Elements with filter()
Filtering Array Elements with filter() - Knowledge Check
Exercise
4.Reducing Arrays to a Single Value with reduce()
Reducing Arrays to a Single Value with reduce() - Knowledge Check
Exercise
5.Chaining Array Methods for Efficient Data Manipulation
Chaining Array Methods for Efficient Data Manipulation - Knowledge Check
Exercise
6.Finding the First Matching Element with find()
Finding the First Matching Element with find() - Knowledge Check
Exercise
Assignment
Assignment Solution - HTML Code
Assignment Solution - CSS Code
Assignment Solution - JavaScript Code
Quiz
Exercise
Week 7 - Data Structures - Advanced Array Methods in JavaScript (Continued)
1.Implement Login
Implement Login - Knowledge Check
Exercise
2.Transfer Funds Functionality with Arrays
Transfer Funds Functionality with Arrays - Knowledge Check
Exercise
3.Closing User Accounts Functionality with Arrays
Closing User Accounts Functionality with Arrays - Knowledge Check
Exercise
4.Checking if Some or Every Element Meets a Condition with some() and every()
Checking if Some or Every Element Meets a Condition with some() and every() - Knowledge Check
Exercise
Assignment
Assignment solution
Quiz
Exercise
Week 7 - Data Structures - Numbers, Dates, and Timers in JavaScript
Starter Files
ZIP
1. Converting and Checking Numeric Values in JavaScript
Converting and Checking Numeric Values in JavaScript - Knowledge Check
Exercise
2.Using Math Functions and Rounding Numbers in JavaScript
Using Math Functions and Rounding Numbers in JavaScript - Knowledge Check
Exercise
3.Getting Remainders with the Modulo Operator in JavaScript
Getting Remainders with the Modulo Operator in JavaScript - Knowledge Check
Exercise
4.Using Numeric Separators for Readability in JavaScript
Using Numeric Separators for Readability in JavaScript - Knowledge Check
Exercise
5.Working with Big Numbers using BigInt in JavaScript
Working with Big Numbers using BigInt in JavaScript - Knowledge Check
Exercise
6.Creating and Manipulating Dates in JavaScript
Creating and Manipulating Dates in JavaScript - Knowledge Check
Exercise
Assignment
Assignment Solution
Quiz
Exercise
Week 7 - Data Structures - Numbers, Dates, and Timers in JavaScript (Continued)
1.Adding Dates to your JavaScript App
Adding Dates to your JavaScript App - Knowledge Check
Exercise
2.Internationalizing Dates with the Intl Object in JavaScript
Internationalizing Dates with the Intl Object in JavaScript - Knowledge Check
Exercise
3.Performing Operations with Dates in JavaScript
Performing Operations with Dates in JavaScript - Knowledge Check
Exercise
4.Internationalizing Numbers with the Intl Object in JavaScript
Internationalizing Numbers with the Intl Object in JavaScript - Knowledge Check
Exercise
5.Using Timers for Delayed Function Execution with setTimeout() and setInterval()
Using Timers for Delayed Function Execution with setTimeout() and setInterval() - Knowledge Check
Exercise
6.Implementing a Countdown Timer for Your JavaScript App
Implementing a Countdown Timer for Your JavaScript App - Knowledge Check
Exercise
Assignment
Assignment Solution
Quiz
Exercise
Week 7 - Data Structures - In-depth Study of Advanced DOM and Events Part- 1
Starter Files
ZIP
1.Introduction to Advanced DOM and Events
Introduction to Advanced DOM and Events - Knowledge Check
Exercise
2.Understanding the Inner Workings of the DOM
Understanding the Inner Workings of the DOM - Knowledge Check
Exercise
3.Selecting, Creating, and Removing Elements
Selecting, Creating, and Removing Elements - Knowledge Check
Exercise
4.Managing Styles, Attributes, and Classes
Managing Styles, Attributes, and Classes - Knowledge Check
Exercise
5.Creating Smooth Scrolling functionality
Creating Smooth Scrolling functionality - Knowledge Check
Exercise
6.Different Types of Events and Event Handlers
Different Types of Events and Event Handlers - Knowledge Check
Exercise
7.Event Propagation: Bubbling and Capturing
Event Propagation: Bubbling and Capturing - Knowledge Check
Exercise
8.Practical Applications of Event Propagation
Practical Applications of Event Propagation - Knowledge Check
Exercise
9.Event Delegation: Navigation Implementation
Event Delegation: Navigation Implementation - Knowledge Check
Exercise
10.Navigating the DOM Tree
Navigating the DOM Tree - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 7 - Data Structures - In-depth Study of Advanced DOM and Events Part- 2
1.Creating a Tab Component -1
Creating a Tab Component -1 - Knowledge Check
Exercise
2. Creating a Tab Component -2
Creating a Tab Component -2 - Knowledge Check
Exercise
3.How to Pass Arguments to Event Handlers
How to Pass Arguments to Event Handlers - Knowledge Check
Exercise
4.Creating a Sticky Navigation with Scroll Event
Creating a Sticky Navigation with Scroll Event - Knowledge Check
Exercise
5.Better Alternative: Intersection Observer API
Better Alternative: Intersection Observer API - Knowledge Check
Exercise
6. Revealing Elements on Scroll
Revealing Elements on Scroll - Knowledge Check
Exercise
7. Lazy Loading Images for Improved Performance
Lazy Loading Images for Improved Performance - Knowledge Check
Exercise
8.Creating a Slider Component
Creating a Slider Component - Knowledge Check
Exercise
9.Efficient Script Loading using "defer" and "async"
Efficient Script Loading using "defer" and "async" - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Data Structures - Projects
Project - 4
Project 4 - Solution File
ZIP
Project - 5
Project 5 - Solution File
ZIP
Week 8 - ES6 - Object Oriented Programming with JavaScript Part- 1
1. Introduction to Object-Oriented Programming
Introduction to Object-Oriented Programming - Knowledge Check
Exercise
2.OOP Concepts in JavaScript
OOP Concepts in JavaScript - Knowledge Check
Exercise
3.Constructor Functions and the "new" Operator
Constructor Functions and the "new" Operator - Knowledge Check
Exercise
4.Understanding Prototypes
Understanding Prototypes - Knowledge Check
Exercise
5.Prototypal Inheritance and the Prototype Chain
Prototypal Inheritance and the Prototype Chain - Knowledge Check
Exercise
6.Prototypal Inheritance with Built-In Objects
Prototypal Inheritance with Built-In Objects - Knowledge Check
Exercise
7.Introduction to ES6 Classes
Introduction to ES6 Classes - Knowledge Check
Exercise
8.Working with Setters and Getters
Working with Setters and Getters - Knowledge Check
Exercise
9.Understanding Static Methods
Understanding Static Methods - Knowledge Check
Exercise
Assignment
Assignment Solution File
Quiz
Exercise
Week 8 - ES6 - Object Oriented Programming with JavaScript Part- 2
1.Understanding Object.create()
Understanding Object.create() - Knowledge Check
Exercise
2.Inherit "Classes" using: Constructor Functions
Inherit "Classes" using: Constructor Functions - Knowledge Check
Exercise
3.Inherit "Classes" using: ES Classes
Inherit "Classes" using: ES Classes - Knowledge Check
Exercise
4.Inherit "Classes" using: Object.create()
Inherit "Classes" using: Object.create() - Knowledge Check
Exercise
5.Another Example of Class Implementation
Another Example of Class Implementation - Knowledge Check
Exercise
6.Encapsulation: Protected Properties and Methods
Encapsulation: Protected Properties and Methods - Knowledge Check
Exercise
7. Encapsulation: Private Class Fields and Methods
Encapsulation: Private Class Fields and Methods - Knowledge Check
Exercise
8.Method Chaining
Method Chaining - Knowledge Check
Exercise
9.Summary of ES6 Classes
Summary of ES6 Classes - Knowledge Check
Exercise
10.Coding Challenge
Assignment
Assignment Solution File
Quiz
Exercise
Week 8 - ES6 - Asynchronous JavaScript - Promises, Async / Await, and AJAX Part- 1
Starter Files
ZIP
1.Understanding Asynchronous JavaScript, AJAX, and APIs
Understanding Asynchronous JavaScript, AJAX, and APIs - Knowledge Check
Exercise
2.Understanding AJAX Call: XMLHttpRequest - 1
Understanding AJAX Call: XMLHttpRequest - 1 - Knowledge Check
Exercise
3.Understanding AJAX Call: XMLHttpRequest - 2
Understanding AJAX Call: XMLHttpRequest - 2 - Knowledge Check
Exercise
4.Understanding Callback Hell
Understanding Callback Hell - Knowledge Check
Exercise
5.Understanding Promises and the Fetch API
Understanding Promises and the Fetch API - Knowledge Check
Exercise
6.How to Consume Promises?
How to Consume Promises? - Knowledge Check
Exercise
7.How to Chain Promises?
How to Chain Promises? - Knowledge Check
Exercise
8.How to Handle Promise Reject?
How to Handle Promise Reject? - Knowledge Check
Exercise
9.Implementation of Throwing Errors Manually
Implementation of Throwing Errors Manually - Knowledge Check
Exercise
10.Coding Challenge
Assignment
Assignment Solution
ZIP
Quiz
Exercise
Week 8 - ES6 - Exploring Asynchronous JavaScript - Promises, Async / Await , AJAX Part- 2
1.Understanding the Event Loop Mechanism
Understanding the Event Loop Mechanism - Knowledge Check
Exercise
2.Implementing the Event Loop
Implementing the Event Loop - Knowledge Check
Exercise
3.Creating a Simple Promise Object
Creating a Simple Promise Object - Knowledge Check
Exercise
4.Using Promises to Work with Geolocation API
Using Promises to Work with Geolocation API - Knowledge Check
Exercise
5.Coding Challenge
6.Working with Promises through Async/Await Syntax
Working with Promises through Async/Await Syntax - Knowledge Check
Exercise
7.Handling Errors with try...catch Block
Handling Errors with try...catch Block - Knowledge Check
Exercise
8.Using Async Functions to Return Values
Using Async Functions to Return Values - Knowledge Check
Exercise
9. Running Promises Concurrently
Running Promises Concurrently - Knowledge Check
Exercise
10.Exploring Promise Combinators: race, allSettled and any
Exploring Promise Combinators: race, allSettled and any - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 8 - ES6 - JavaScript Practice Project 1: Quote Generator
Starter Files
ZIP
1. Planning and Overview of the Project
Planning and Overview of the Project - Knowledge Check
Exercise
2. Setting up the Project Environment
3. Creating HTML Elements and Styling them
Creating HTML Elements and Styling them - Knowledge Check
Exercise
4. Enhancing the Style and Functionality of HTML Elements
Enhancing the Style and Functionality of HTML Elements - Knowledge Check
Exercise
5. Some More Styling to Elements
Some More Styling to Elements - Knowledge Check
Exercise
6. Adding Functionality to Fetch Data with JavaScript
Adding Functionality to Fetch Data with JavaScript - Knowledge Check
Exercise
7. DOM Manipulation using JavaScript
DOM Manipulation using JavaScript - Knowledge Check
Exercise
8. Optimising and Refining DOM Manipulation using JavaScript
Optimising and Refining DOM Manipulation using JavaScript - Knowledge Check
Exercise
9. Designing and Creating a Custom Loader with JavaScript
Designing and Creating a Custom Loader with JavaScript - Knowledge Check
Exercise
10. Custom Loader Continued
Custom Loader Continued - Knowledge Check
Exercise
11. Code Review and Optimization
Assignment
Assignment Solution
ZIP
Quiz
Exercise
Week 8 - ES6 - JavaScript Practice Project 2: Infinite Scroll
Starter Files
ZIP
1.Overview of the Project - 1
2.Overview of the Project - 2
3.Creating Loader SVG with CSS and HTML
Creating Loader SVG with CSS and HTML - Knowledge Check
Exercise
4.Place Elements in Center on the Page with CSS
Place Elements in Center on the Page with CSS - Knowledge Check
Exercise
5. Implementing Responsive Layout with CSS and Media Queries
Implementing Responsive Layout with CSS and Media Queries - Knowledge Check
Exercise
6.Getting Data from APIs - 1
Getting Data from APIs - 1 - Knowledge Check
Exercise
7.Getting Data from APIs - 2
Getting Data from APIs - 2 - Knowledge Check
Exercise
8.Show Data using javascript
Show Data using javascript - Knowledge Check
Exercise
9.Implementing Infinite Scroll - 1
Implementing Infinite Scroll - 1 - Knowledge Check
Exercise
10.Implementing Infinite Scroll - 2
Implementing Infinite Scroll - 2 - Knowledge Check
Exercise
11.Code Review and Optimization
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 8 - ES6 - JavaScript Practice Project 3: Music Player
Starter Files
ZIP
1.Planning and Overview of the Project
2.Creating HTML and CSS - 1
Creating HTML and CSS - 1 - Knowledge Check
Exercise
3.Creating HTML and CSS - 2
Creating HTML and CSS - 2 - Knowledge Check
Exercise
4.Creating HTML and CSS - 3
Creating HTML and CSS - 3 - Knowledge Check
Exercise
5.Designing a Responsive User Interface
Designing a Responsive User Interface - Knowledge Check
Exercise
6.JavaScript To Play Audio -1
JavaScript To Play Audio -1 - Knowledge Check
Exercise
7.Implementing Audio Playback -2
Implementing Audio Playback -2 - Knowledge Check
Exercise
8.Building a Music Player - 1
Building a Music Player - 1 - Knowledge Check
Exercise
9.Building a Music Player - 2
Building a Music Player - 2 - Knowledge Check
Exercise
10.Building a Music Player - 3
Building a Music Player - 3 - Knowledge Check
Exercise
11.Designing and Implementing a Progress Bar Part- 1
Designing and Implementing a Progress Bar - 1 -Knowledge Check
Exercise
12.Designing and Implementing a Progress Bar - 2
Designing and Implementing a Progress Bar - 2 - Knowledge Check
Exercise
13.Designing and Implementing a Progress Bar - 3
Designing and Implementing a Progress Bar - 3 - Knowledge Check
Exercise
14.Designing and Implementing a Progress Bar - 4
Designing and Implementing a Progress Bar - 4 - Knowledge Check
Exercise
15.Designing and Implementing a Progress Bar - 5
Designing and Implementing a Progress Bar - 5 - Knowledge Check
Exercise
16.Designing and Implementing an Alternative Progress Bar
17.Code Review and Optimization
Assignment
Quiz
Exercise
Week 8 - ES6 - JavaScript Project 4: Video Player
Starter Files
ZIP
1.Project Overview and Planning
2.Implementing Player UI: Video, Responsive Design
Implementing Player UI: Video, Responsive Design -Knowledge Check
Exercise
3.Implementing Player UI: HTML Controls and Hover Display
Implementing Player UI: HTML Controls and Hover Display - Knowledge Check
Exercise
4. Implementing Player UI: Progress Bar - Width and Hover Effects
Implementing Player UI: Progress Bar - Width and Hover Effects - Knowledge Check
Exercise
5.Implementing Player UI: Selection and CSS Variables
Implementing Player UI: Selection and CSS Variables - Knowledge Check
Exercise
6.Controlling Video Playback: Play/Pause Functionality with JavaScript
Controlling Video Playback: Play/Pause Functionality with JavaScript - Knowledge Check
Exercise
7.Controlling Video Playback: Dynamic Progress Bar Width with JavaScript
Controlling Video Playback: Dynamic Progress Bar Width with JavaScript - Knowledge Check
Exercise
8.Displaying Video Time: Populating Current Time and Duration with JavaScript
Displaying Video Time: Populating Current Time and Duration with JavaScript - Knowledge Check
Exercise
9.Controlling Progress Bar Video Playback - 1
10.Controlling Progress Bar Video Playback - 2
Controlling Progress Bar Video Playback - Knowledge Check
Exercise
11.Controlling Audio: Volume Control with a Slider
Controlling Audio: Volume Control with a Slider - Knowledge Check
Exercise
12.Controlling Audio: Mute/Unmute - 1
13.Controlling Audio: Mute/Unmute - 2
Controlling Audio: Mute/Unmute - Knowledge Check
Exercise
14.Playback Speed Control with JavaScript
Playback Speed Control with JavaScript - Knowledge Check
Exercise
15. Fullscreen Control - 1
Fullscreen Control - 1 - Knowledge Check
Exercise
16.Fullscreen Control - 2
Fullscreen Control - 2 - Knowledge Check
Exercise
17.Project Code Review
Assignment
Quiz
Exercise
Week 8 - ES6 - JavaScript Practice Project 5: Form Validation
Starter Files
ZIP
1. Project Introduction
2.Designing UI - HTML Forms, Input, and Labels
Designing UI - HTML Forms, Input, and Labels - Knowledge Check
Exercise
3.Styling UI with CSS (Body, Container), and Google Fonts
Styling UI with CSS (Body, Container), and Google Fonts - Knowledge Check
Exercise
4.Styling the Form with CSS
Styling the Form with CSS - Knowledge Check
Exercise
5.HTML Form Validation
HTML Form Validation - Knowledge Check
Exercise
6.JavaScript Form Validation
JavaScript Form Validation - Knowledge Check
Exercise
7.JavaScript Password Validation and Save Data - 1
JavaScript Password Validation and Save Data - 1 - Knowledge Check
Exercise
8.JavaScript Password Validation and Save Data - 2
JavaScript Password Validation and Save Data - 2 - Knowledge Check
Exercise
9.Code Review
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 8 - ES6 - JavaScript Practice Project 6: Calculator
Starter Files
ZIP
1.Project Introduction
2.Designing UI - Calculator, Display, and Buttons
Designing UI - Calculator, Display, and Buttons - Knowledge Check
Exercise
3.Styling the Display with CSS
Styling the Display with CSS - Knowledge Check
Exercise
4.Styling the UI with CSS Grid
Styling the UI with CSS Grid - Knowledge Check
Exercise
5.Styling the Buttons with CSS
Styling the Buttons with CSS - Knowledge Check
Exercise
6.Adding Event Listeners with JavaScript
Adding Event Listeners with JavaScript - Knowledge Check
Exercise
7.Resetting the Value and Adding Decimal with JavaScript
Resetting the Value and Adding Decimal with JavaScript - Knowledge Check
Exercise
8.Implementing Operator Functionality with JavaScript
Implementing Operator Functionality with JavaScript - Knowledge Check
Exercise
9.Performing Calculations with JavaScript
Performing Calculations with JavaScript - Knowledge Check
Exercise
10.Code Review
Assignment
Assignment Solution FIle
ZIP
Quiz
Exercise
Week 8 - ES6 - Developing a Modern JavaScript Application (Practice Everything we Learned So Far) Part- 1
1.Introduction and Project Planning - 1
Introduction and Project Planning - 1 - Knowledge Check
Exercise
2.Introduction and Project Planning - 2
Introduction and Project Planning - 2 - Knowledge Check
Exercise
3.Introduction and Project Planning - 3
Introduction and Project Planning - 3 - Knowledge Check
Exercise
4.Introduction and Project Planning - 4
Introduction and Project Planning - 4 - Knowledge Check
Exercise
5. Retrieving Data from an API
Retrieving Data from an API - Knowledge Check
Exercise
6. Designing the Recipe UI - 1
Designing the Recipe UI - 1 - Knowledge Check
Exercise
7.Designing the Recipe UI - 2
Designing the Recipe UI - 2 - Knowledge Check
Exercise
8.Designing the Recipe UI - 3
Designing the Recipe UI - 3 - Knowledge Check
Exercise
9.Designing the Recipe UI - 4
Designing the Recipe UI - 4 - Knowledge Check
Exercise
Assignment
Assignment Solution
ZIP
Quiz
Exercise
Week 8 - ES6 - Building a Modern JavaScript Application Part- 2
1.Listening for Load and Hashchange Events
Listening for Load and Hashchange Events -Knowledge Check
Exercise
2.The Model-View-Controller (MVC) Architecture
The Model-View-Controller (MVC) Architecture - Knowledge Check
Exercise
3.Modifying for MVC - 1
Modifying for MVC - 1 - Knowledge Check
Exercise
4.Modifying for MVC - 2
Modifying for MVC - 2 - Knowledge Check
Exercise
5.Close Look at Helpers and Configuration Files - 1
Close Look at Helpers and Configuration Files - 1 - Knowledge Check
Exercise
6.Close Look at Helpers and Configuration Files - 2
Close Look at Helpers and Configuration Files - 2 - Knowledge Check
Exercise
7.Understanding MVC - Publisher-Subscriber Pattern
Understanding MVC - Publisher-Subscriber Pattern - Knowledge Check
Exercise
8.Display Custom Error and Success Messages
Display Custom Error and Success Messages - Knowledge Check
Exercise
9.Building Search Logic - 1
Building Search Logic - 1 - Knowledge Check
Exercise
10.Building Search Logic - 2
Building Search Logic - 2 - Knowledge Check
Exercise
Assignment SolutionFile
ZIP
Assignment
Quiz
Exercise
Week 8 - ES6 - Building a Modern JavaScript Application Part- 3
1.Paginate Data - 1
Paginate Data - 1 - Knowledge Check
Exercise
2.Paginate Data - 2
Paginate Data - 2 - Knowledge Check
Exercise
3.Paginate Data - 3
Paginate Data - 3 - Knowledge Check
Exercise
4.Paginate Data - 4
Paginate Data - 4 - Knowledge Check
Exercise
5.Paginate Data - 5
Paginate Data - 5 - Knowledge Check
Exercise
6.Paginate Data - 6
Paginate Data - 6 - Knowledge Check
Exercise
7.Paginate Data - 7
Paginate Data - 7 - Knowledge Check
Exercise
8.Project Planning II
9.Updating Recipes - 1
Updating Recipes - 1 - Knowledge Check
Exercise
10.Updating Recipes - 2
Updating Recipes - 2 - Knowledge Check
Exercise
11. Updating Recipes - 3
Updating Recipes - 3 - Knowledge Check
Exercise
Assignment
Assignment Solution
ZIP
Quiz
Exercise
Week 8 - ES6 - Building A Modern JS Application Part - 4
1.Building Bookmarks
Building Bookmarks - Knowledge Check
Exercise
2.Save Bookmarks data in localStorage - 1
Save Bookmarks data in localStorage - 1 - Knowledge Check
Exercise
3.Save Bookmarks data in localStorage - 2
Save Bookmarks data in localStorage - 2 - Knowledge Check
Exercise
4.Save Bookmarks data in localStorage - 3
Save Bookmarks data in localStorage - 3 - Knowledge Check
Exercise
5.Save Bookmarks data in localStorage - 4
6.Storing New Recipe - 1
Storing New Recipe - 1 - Knowledge Check
Exercise
7.Storing New Recipe - 2
Storing New Recipe - 2 - Knowledge Check
Exercise
8.Storing New Recipe - 3
Storing New Recipe - 3 - Knowledge Check
Exercise
9.Storing New Recipe - 4
Storing New Recipe - 4 - Knowledge Check
Exercise
10.Storing New Recipe - 5
Storing New Recipe - 5 - Knowledge Check
Exercise
11.Storing New Recipe - 6
Storing New Recipe - 6 - Knowledge Check
Exercise
12.Conclusion
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
ES6 - Projects
Project - 6
Project 6 - Solution File
ZIP
Project - 7
Project 7 - Solution File
Audio
Project - 8
Project 8 - Solution File
ZIP
Week 8 - jQuery - Introduction & Effects (Animations)
1.An Introduction to jQuery
An Introduction to jQuery - Knowledge Check
Exercise
2.Fading in and out Elements
Fading in and out Elements - Knowledge Check
Exercise
3.Comparison between fadeIn/fadeOut and fadeTo
Comparison between fadeIn/fadeOut and fadeTo - Knowledge Check
Exercise
4.Show and Hide Elements
Show and Hide Elements - Knowledge Check
Exercise
5.How to Slide Up and Down Elements
How to Slide Up and Down Elements - Knowledge Check
Exercise
6.How to Move Elements
How to Move Elements - Knowledge Check
Exercise
7.Creating Custom Animations
Creating Custom Animations - Knowledge Check
Exercise
8.How to Delay and Chain Animations
How to Delay and Chain Animations - Knowledge Check
Exercise
9.Implement Timing Animations
Implement Timing Animations - Knowledge Check
Exercise
10.Coding a Signup Lightbox!
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 8 - jQuery DOM
1.jQuery Traversal Methods - 1
jQuery Traversal Methods - 1 - Knowledge Check
Exercise
2.jQuery Traversal Methods - 2
jQuery Traversal Methods - 2 - Knowledge Check
Exercise
3.jQuery Filtering Methods
jQuery Filtering Methods - Knowledge Check
Exercise
4.Understanding the Document Object Model (DOM)
Understanding the Document Object Model (DOM) - Knowledge Check
Exercise
5.Adding Elements to the DOM
Adding Elements to the DOM - Knowledge Check
Exercise
6.Update Elements and Content
Update Elements and Content - Knowledge Check
Exercise
7.Delete Elements and Content
Delete Elements and Content - Knowledge Check
Exercise
8.How to Manipulate Attributes and Properties
How to Manipulate Attributes and Properties - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 8 - jQuery - Events (Handling Mouse and Keyboard Events)
1.Understanding Events and Event Handlers
Understanding Events and Event Handlers - Knowledge Check
Exercise
2.Click Event Handlers - 1
Click Event Handlers - 1 - Knowledge Check
Exercise
3.Click Event Handlers - 2
Click Event Handlers - 2 - Knowledge Check
Exercise
4.Hover Event Handlers
Hover Event Handlers - Knowledge Check
Exercise
5.Manage Mouse and Keyboard Events
Manage Mouse and Keyboard Events - Knowledge Check
Exercise
6.Manage Multiple Events
Manage Multiple Events - Knowledge Check
Exercise
7.Modularizing Event Handlers (No More Inline Functions)
Modularizing Event Handlers (No More Inline Functions) - Knowledge Check
Exercise
8.Delegated Events
Delegated Events - Knowledge Check
Exercise
9.Passing Data to Events
Passing Data to Events - Knowledge Check
Exercise
10.Coding Activity - Creating an Image Gallery with Lightbox Preview
11.Implementing KeyDown and KeyUp Events
Implementing KeyDown and KeyUp Events - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 9 - React Introduction, Basics and Components
1.Introduction to React
Introduction to React - Knowledge Check
Exercise
2.Comparing React with other Frameworks: React vs. Vue vs. Angular
Comparing React with other Frameworks: React vs. Vue vs. Angular - Knowledge Check
Exercise
3.Development Environment Setup
Development Environment Setup - Knowledge Check
Exercise
4.Creating the First React App
Creating the First React App - Knowledge Check
Exercise
5.Understanding the Generated Scaffolding
Understanding the Generated Scaffolding - Knowledge Check
Exercise
6.Exploring the Generated Code
Exploring the Generated Code - Knowledge Check
Exercise
7.Understanding Modules: React, ReactDOM, and Connection Login
Understanding Modules: React, ReactDOM, and Connection Login - Knowledge Check
Exercise
8.Understanding JSX & Rules
Understanding JSX & Rules - Knowledge Check
Exercise
9.Adding CSS in React Component (Internal, Inline, and External)
Adding CSS in React Component (Internal, Inline, and External) - Knowledge Check
Exercise
10.Named Export vs. Default Export
Named Export vs. Default Export - Knowledge Check
Exercise
11.Working with Components (Class-based and Functional-based)
Working with Components (Class-based and Functional-based) - Knowledge Check
Exercise
12.Comparison of Functional & Class Components
Comparison of Functional & Class Components - Knowledge Check
Exercise
13.Passing Data via "Props"
Passing Data via "Props" - Knowledge Check
Exercise
14.Building a Simple Clock Component
Building a Simple Clock Component - Knowledge Check
Exercise
15.Working of React with Virtual DOM
Working of React with Virtual DOM - Knowledge Check
Exercise
16.Babel JS and its Role in React
Babel JS and its Role in React - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 9 - Building a To-Do List App with React Hooks
App.css
ZIP
1.Overview to the To-Do List App Project
Overview to the To-Do List App Project - Knowledge Check
Exercise
2.Understanding React Hooks: UseState
Understanding React Hooks: UseState - Knowledge Check
Exercise
3.Designing the UI for the To-Do List App
Designing the UI for the To-Do List App - Knowledge Check
Exercise
4.Creating Tasks in the To-Do List App
Creating Tasks in the To-Do List App - Knowledge Check
Exercise
5.Getting Tasks in the To-Do List App
Getting Tasks in the To-Do List App - Knowledge Check
Exercise
6.Modifying Tasks in the To-Do List App
Modifying Tasks in the To-Do List App - Knowledge Check
Exercise
7.Removing Tasks in the To-Do List App
Removing Tasks in the To-Do List App - Knowledge Check
Exercise
8.Comparison of Controlled & Uncontrolled Components ,Use of UseRef
Comparison of Controlled & Uncontrolled Components ,Use of UseRef - Knowledge Check
Exercise
9.Working with Keys in React
Working with Keys in React - Knowledge Check
Exercise
10. Introduction to the Next Section
11. Implementing Search Functionality in the To-Do List App
Implementing Search Functionality in the To-Do List App - Knowledge Check
Exercise
12.Why Map() Is Preferred Over forEach() in React
Why Map() Is Preferred Over forEach() in React - Knowledge Check
Exercise
13.Storing Data Locally in the To-Do List App
Storing Data Locally in the To-Do List App - Knowledge Check
Exercise
14.Final Touches to the To-Do List App
Final Touches to the To-Do List App - Knowledge Check
Exercise
15.An Introduction to Netlify
An Introduction to Netlify - Knowledge Check
Exercise
16.Pushing Code to Github and Hosting in Netlify
Pushing Code to Github and Hosting in Netlify - Knowledge Check
Exercise
17.Summary of the To-Do List App Project
Summary of the To-Do List App Project - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 9 - UseEffect, UseReducer, and Context in React
1.Introduction to UseReducer and Reducers in General
Introduction to UseReducer and Reducers in General - Knowledge Check
Exercise
2.Implementing UseReducer in React
Implementing UseReducer in React - Knowledge Check
Exercise
3.UseState vs UseReducer: When to Use Which
UseState vs UseReducer: When to Use Which - Knowledge Check
Exercise
4.Introducing React Context and the Context API
Introducing React Context and the Context API - Knowledge Check
Exercise
5.Understanding Context API in React
Understanding Context API in React - Knowledge Check
Exercise
6.React Context API: createContext
React Context API: createContext - Knowledge Check
Exercise
7.React Context API: useContext
React Context API: useContext - Knowledge Check
Exercise
8.Overview of the React Context API with Limitations.
Overview of the React Context API with Limitations - Knowledge Check
Exercise
9.Understanding useEffect Hook
Understanding useEffect Hook - Knowledge Check
Exercise
10.Understanding Side Effects
Understanding Side Effects - Knowledge Check
Exercise
11.Implementing useEffect in React
Implementing useEffect in React - Knowledge Check
Exercise
12.Understanding Dependencies in useEffect
Understanding Dependencies in useEffect - Knowledge Check
Exercise
13.How to Cleanup useEffect Function in React
How to Cleanup useEffect Function in React - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 9 - Building Custom Hooks in React
1.Introduction to Building Custom Hooks
2.Understanding Custom Hooks
Understanding Custom Hooks - Knowledge Check
Exercise
3.Implementing Custom Hooks
Implementing Custom Hooks - Knowledge Check
Exercise
4.Introduction to the Project Snapshot
5. Initialising a React Project
Initialising a React Project - Knowledge Check
Exercise
6.Building a Custom Fetching Hook with Axios
Building a Custom Fetching Hook with Axios - Knowledge Check
Exercise
7.Using the Custom Fetching Hook in React
Using the Custom Fetching Hook in React - Knowledge Check
Exercise
8.Reading Fetched Data with the Custom Fetching Hook
Reading Fetched Data with the Custom Fetching Hook - Knowledge Check
Exercise
9.Implementing Search Functionality
Implementing Search Functionality - Knowledge Check
Exercise
10.Summary
Summary - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 9 - Class-Based Components in React
1.Understanding Old Class-Based Components
Understanding Old Class-Based Components - Knowledge Check
Exercise
2.Handling Props in Class-Based Components
Handling Props in Class-Based Components - Knowledge Check
Exercise
3.Understanding State and Events in Class-Based Components
Understanding State and Events in Class-Based Components - Knowledge Check
Exercise
4.Understanding Lifecycle Methods in Class-Based Components
Understanding Lifecycle Methods in Class-Based Components - Knowledge Check
Exercise
5.Lifecycle Methods in Action: A Case Study
Lifecycle Methods in Action: A Case Study - Knowledge Check
Exercise
6.Comparison of Class-Based & Functional Components in React
Comparison of Class-Based & Functional Components in React - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 10 - React Internals and Performance Optimization
1. Understanding How React Works
Understanding How React Works - Knowledge Check
Exercise
2. Implementing Component Updates
Implementing Component Updates - Knowledge Check
Exercise
3. Examining Child Component Re-Evaluation
Examining Child Component Re-Evaluation - Knowledge Check
Exercise
4. Using React.memo() to Prevent Unnecessary Re-Evaluation
Using React.memo() to Prevent Unnecessary Re-Evaluation - Knowledge Check
Exercise
5.Optimizing Performance with useCallback() to Prevent Function Re-Creation
Optimizing Performance with useCallback() to Prevent Function Re-Creation - Knowledge Check
Exercise
6.Utilizing useCallback() and its Dependencies for better Performance
Utilizing useCallback() and its Dependencies for better Performance -Knowledge Check
Exercise
7.Understanding State Scheduling & Batching
Understanding State Scheduling & Batching - Knowledge Check
Exercise
8.Boosting Performance with useMemo() Optimization
Boosting Performance with useMemo() Optimization - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 10 - Building Complex Forms and Validation
1.The Complexities of Working with Forms
The Complexities of Working with Forms - Knowledge Check
Exercise
2.Handling Form Submission and User Input
Handling Form Submission and User Input - Knowledge Check
Exercise
3.Basic Validation Techniques
Basic Validation Techniques - Knowledge Check
Exercise
4.Providing Feedback for Form Validation
Providing Feedback for Form Validation - Knowledge Check
Exercise
5.Managing Forms with Formik
Managing Forms with Formik - Knowledge Check
Exercise
6.Building Forms with Formik
Building Forms with Formik - Knowledge Check
Exercise
7.Introducing YUP for Form Validation
Introducing YUP for Form Validation -Knowledge Check
Exercise
8.Using YUP to Validate Forms
Using YUP to Validate Forms - Knowledge Check
Exercise
9.Using YUP to Validate Forms - 2
Using YUP to Validate Forms 2 - Knowledge Check
Exercise
10.Dynamically adding Form Fields
Dynamically adding Form Fields - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 10 - Building an Invoice Application
1.Overview of the Invoice-Building Application
2.Introduction to Tailwind CSS
Introduction to Tailwind CSS - Knowledge Check
Exercise
3.Creating User Interface with Tailwind
Creating User Interface with Tailwind - Knowledge Check
Exercise
4.Creating Form Fields as Components
Creating Form Fields as Components - Knowledge Check
Exercise
5.Handling Form Fields -1
Handling Form Fields 1 - Knowledge Check
Exercise
6.Handling Form Fields -2
Handling Form Fields 2 - Knowledge Check
Exercise
7. Validating User Input
Validating User Input - Knowledge Check
Exercise
8.Setting Global Fields, Such as Currency and Tax
Setting Global Fields, Such as Currency and Tax - Knowledge Check
Exercise
9.Implementing PDF Download Functionality
Implementing PDF Download Functionality - Knowledge Check
Exercise
10.Reviewing the Code
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 10 - React Routing
1.Introduction to Routing and its Purpose
Introduction to Routing and its Purpose - Knowledge Check
Exercise
2.Installing and Configuring React Router
Installing and Configuring React Router - Knowledge Check
Exercise
3.Defining and Implementing Routes
Defining and Implementing Routes - Knowledge Check
Exercise
4.Working with Links
Working with Links - Knowledge Check
Exercise
5.Using NavLinks for Navigation
Using NavLinks for Navigation - Knowledge Check
Exercise
6.Implementing Dynamic Routes with Parameters
Implementing Dynamic Routes with Parameters - Knowledge Check
Exercise
7.Extracting Route Parameters
Extracting Route Parameters - Knowledge Check
Exercise
8.Configuring Routes for better Navigation
Configuring Routes for better Navigation - Knowledge Check
Exercise
9.Implementing Nested Routes
Implementing Nested Routes - Knowledge Check
Exercise
10.Redirecting Users to Different Routes
Redirecting Users to Different Routes - Knowledge Check
Exercise
11.Building a "Not Found" Page
Building a "Not Found" Page - Knowledge Check
Exercise
12.Working with Query Parameters
Working with Query Parameters - Knowledge Check
Exercise
13.Writing more Flexible Routing Code
Writing more Flexible Routing Code - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 11 - Movie DB Website Practice Project Curriculum
1.Overview of the Project
2.Planning Components and System Design
Planning Components and System Design - Knowledge Check
Exercise
3.Creating an Account in Movie DB and Generate API Key
Creating an Account in Movie DB and Generate API Key - Knowledge Check
Exercise
4.Creating a New React Application and Storing the Generated API Key
Creating a New React Application and Storing the Generated API Key -Knowledge Check
Exercise
5.Creating a Navbar Component to Implement the Navigation Bar & Implementing CSS using React Router
Creating a Navbar Component to Implement the Navigation Bar & Implementing CSS using React Router - Knowledge Check
Exercise
6.Creating the MovieDetail Component, Installing Axios and Listing out all the Possible API's -1
Creating the MovieDetail Component, Installing Axios and Listing out all the Possible API's -1 - Knowledge Check
Exercise
7.Creating the MovieDetail Component, Installing Axios and Listing out all the Possible API's - 2
Creating the MovieDetail Component, Installing Axios and Listing out all the Possible API's 2 - Knowledge Check
Exercise
8.Getting the Data like Action Movies, Comedy Movies, and Many more using Respective Components
Getting the Data like Action Movies, Comedy Movies, and Many more using Respective Components - Knowledge Check
Exercise
9.Installing the Libraries React-Youtube and Movie-Trailer
Installing the Libraries React-Youtube and Movie-Trailer -Knowledge Check
Exercise
10.Implementing React Logic to Play a Movie Trailer
Implementing React Logic to Play a Movie Trailer - Knowledge Check
Exercise
11.Summary of the Project
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 10 - Introduction to Redux
1.Revisiting State in React Applications
Revisiting State in React Applications - Knowledge Check
Exercise
2.Redux vs. React Context
Redux vs. React Context - Knowledge Check
Exercise
3.How Redux Works
How Redux Works - Knowledge Check
Exercise
4.Exploring the Core Concepts of Redux
Exploring the Core Concepts of Redux - Knowledge Check
Exercise
5.Further Basics of Redux
Further Basics of Redux - Knowledge Check
Exercise
6.Creating a new React App, Implementing Reminder App, Installing Redux & React-Redux Libraries
Creating a new React App, Implementing Reminder App, Installing Redux & React-Redux Libraries - Knowledge Check
Exercise
7. Implementing State, Store, Reducer and combineReducers in Redux
Implementing State, Store, Reducer and combineReducers in Redux - Knowledge Check
Exercise
8.Creating Redux Action, Sending the Data from React App to Redux File & Storing it in React State
Creating Redux Action, Sending the Data from React App to Redux File & Storing it in React State - Knowledge Check
Exercise
9.Understanding the requirement of useDispatch()
Understanding the requirement of useDispatch() - Knowledge Check
Exercise
10.Providing the Store to React Components
Providing the Store to React Components - Knowledge Check
Exercise
11.Understanding the requirement of useSelector()
Understanding the requirement of useSelector() - Knowledge Check
Exercise
12.Creating Multiple Components to actually Verify the Requirement of Redux
Creating Multiple Components to actually Verify the Requirement of Redux - Knowledge Check
Exercise
13.Adding State Slices
Adding State Slices - Knowledge Check
Exercise
14.Connecting Redux Toolkit State
Connecting Redux Toolkit State - Knowledge Check
Exercise
15.Working with Multiple Slices
Working with Multiple Slices - Knowledge Check
Exercise
16.Reading and Dispatching from a New Slice
Reading and Dispatching from a New Slice - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 10 - Continuing with Redux
1.Creating a React Component to Get the Data Asynchronously using an API
Creating a React Component to Get the Data Asynchronously using an API - Knowledge Check
Exercise
2.Understanding the Problem with useEffect() when Connected to Redux
Understanding the Problem with useEffect() when Connected to Redux - Knowledge Check
Exercise
3.Fixing the Issue by Understanding Redux Thunk Library
Fixing the Issue by Understanding Redux Thunk Library - Knowledge Check
Exercise
4.Creating an Application for Getting Usernames from an API using React and Redux
Creating an Application for Getting Usernames from an API using React and Redux - Knowledge Check
Exercise
5.Understanding the requirement of Redux Saga and Implementing it
Understanding the requirement of Redux Saga and Implementing it - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 10 - Authentication and Route Protection
1.Understanding the need of Authentication, Types of Authentication
Understanding the need of Authentication, Types of Authentication - Knowledge Check
Exercise
2.Creating a Simple App using react-router-dom
Creating a Simple App using react-router-dom - Knowledge Check
Exercise
3.Generating an API Key
Generating an API Key - Knowledge Check
Exercise
4.Working with GoogleAuthProvider and getAuth() to Implement Google Authentication
Working with GoogleAuthProvider and getAuth() to Implement Google Authentication - Knowledge Check
Exercise
5.Making sure all the other Routes are Protected by Implementing Logout Functionality
Making sure all the other Routes are Protected by Implementing Logout Functionality -Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 11 - React Testing Part- 1
1.Introduction to React Testing
Introduction to React Testing - Knowledge Check
Exercise
2.Why Testing React Apps?
Why Testing React Apps? - Knowledge Check
Exercise
3.Types of Testing
Types of Testing - Knowledge Check
Exercise
4.Writing Your First Unit Test
Writing Your First Unit Test - Knowledge Check
Exercise
5.Combining Multiple Test Cases Inside a Test Suite
Combining Multiple Test Cases Inside a Test Suite - Knowledge Check
Exercise
6.Testing Interactions Like Click, Type and State Management
Testing Interactions Like Click, Type and State Management - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 11 - React Testing Part- 2
1.Testing Components that are not in Isolation
Testing Components that are not in Isolation - Knowledge Check
Exercise
2.Testing Asynchronous Code
Testing Asynchronous Code - Knowledge Check
Exercise
3.Jest Matchers
Jest Matchers - Knowledge Check
Exercise
4.Working with Custom Matchers
Working with Custom Matchers - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 12 - Project (Ice Cream Store) - Testing and TDD Part- 1
1.What is TDD - 1?
What is TDD - 1? - Knowledge Check
Exercise
2.What is TDD - 2?
What is TDD - 2? - Knowledge Check
Exercise
3.Introduction to Project
4.Creating the components Home Page, Summary Page and Order Page
Creating the components Home Page, Summary Page and Order Page - Knowledge Check
Exercise
5.Implementing the Home Page Component with Ice-cream Data - 1
Implementing the Home Page Component with Ice-cream Data 1 - Knowledge Check
Exercise
6.Implementing the Home Page Component with Ice-cream Data - 2
Implementing the Home Page Component with Ice-cream Data 2 - Knowledge Check
Exercise
7.Implementing the Home Page Component with Ice-cream Data - 3
Implementing the Home Page Component with Ice-cream Data 3 - Knowledge Check
Exercise
8.Implementing the Home Page Component with Ice-cream Data - 4
Implementing the Home Page Component with Ice-cream Data 4 - Knowledge Check
Exercise
9.Implementing the Home Page Component with Ice-cream Data - 5
Implementing the Home Page Component with Ice-cream Data 5 - Knowledge Check
Exercise
10. Implementing the Home Page Component with Ice-cream Data - 6
Implementing the Home Page Component with Ice-cream Data 6 - Knowledge Check
Exercise
11. Implementing the Summary Page Component
Implementing the Summary Page Component - Knowledge Check
Exercise
12. Implementing the Order Page Component
Implementing the Order Page Component - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 12 - Project (Ice Cream Store) - Testing and TDD Part- 2
1.Connecting React Bootstrap to React App
Connecting React Bootstrap to React App - Knowledge Check
Exercise
2.Creating an API using JSON-Server that Stores the Ice cream Data
Creating an API using JSON-Server that Stores the Ice cream Data - Knowledge Check
Exercise
3.Connecting Home Page to an API using Axios in Asynchronous way
Connecting Home Page to an API using Axios in Asynchronous way - Knowledge Check
Exercise
4.Working with various Roles and Screen Query Methods
Working with various Roles and Screen Query Methods - Knowledge Check
Exercise
5.Testing Ice cream Images
Testing Ice cream Images - Knowledge Check
Exercise
6.Testing Ice cream Scoop Count and Check Box
Testing Ice cream Scoop Count and Check Box - Knowledge Check
Exercise
7.Testing the Order Total
Testing the Order Total - Knowledge Check
Exercise
8.Testing the Order ID
Testing the Order ID - Knowledge Check
Exercise
9.Debugging using logRoles() function
Debugging using logRoles() function - Knowledge Check
Exercise
10.Running only Selected Tests and waitFor
Running only Selected Tests and waitFor - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 12 - Animating React Apps
1.Introduction to Animations
Introduction to Animations - Knowledge Check
Exercise
2. Introduction to Framer Motion Library
Introduction to Framer Motion Library - Knowledge Check
Exercise
3.Project Setup
Project Setup - Knowledge Check
Exercise
4. Animation on Created React Elements
Animation on Created React Elements - Knowledge Check
Exercise
5.How to apply Animation when useState() is involved
How to apply Animation when useState() is involved - Knowledge Check
Exercise
6.Working with CSS transition
Working with CSS transition - Knowledge Check
Exercise
7.Applying various CSS properties
Applying various CSS properties - Knowledge Check
Exercise
8.Animations on Hover Effect
Animations on Hover Effect - Knowledge Check
Exercise
9.Working with Animation Timings
Working with Animation Timings - Knowledge Check
Exercise
10. How to Animate Lists?
How to Animate Lists? - Knowledge Check
Exercise
11.Drag up the Items using Motion API
Drag up the Items using Motion API - Knowledge Check
Exercise
12.Pre Defined Targets in Framer Motion
Pre Defined Targets in Framer Motion - Knowledge Check
Exercise
13.Keyframes in Framer Motion
Keyframes in Framer Motion - Knowledge Check
Exercise
14.yoyo Feature in Framer Motion
yoyo Feature in Framer Motion - Knowledge Check
Exercise
15.Animating Presence of Elements and Routing
Animating Presence of Elements and Routing - Knowledge Check
Exercise
16.SVG Animation
SVG Animation - Knowledge Check
Exercise
17.React Page Transitions
React Page Transitions - Knowledge Check
Exercise
18. Introduction to GSAP
Introduction to GSAP - Knowledge Check
Exercise
19.Practice Project Implementation
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 12 - React: End to End Ecommerce Project Part- 1
1. Introduction to the Project
2. Connecting Bootstrap to Project
Connecting Bootstrap to Project - Knowledge Check
Exercise
3.Implementing the Navbar Component
Implementing the Navbar Component - Knowledge Check
Exercise
4.Connecting React App to Firebase 1
Connecting React App to Firebase 1 - Knowledge Check
Exercise
5.Connecting React App to Firebase 2
Connecting React App to Firebase 2 - Knowledge Check
Exercise
6.Connecting to Firestore Database and Storing the Ecommerce Data
Connecting to Firestore Database and Storing the Ecommerce Data - Knowledge Check
Exercise
7.Getting the Data using a React Component 1
Getting the Data using a React Component 1 - Knowledge Check
Exercise
8.Getting the Data using a React Component 2
Getting the Data using a React Component 2 - Knowledge Check
Exercise
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 12 - React: End to End Ecommerce Project Part- 2
1.Adding React Routing to Navbar Component
Adding React Routing to Navbar Component - Knowledge Check
Exercise
2. Implementing Google Authentication to the React App - 1
Implementing Google Authentication to the React App 1 - Knowledge Check
Exercise
3.Implementing Google Authentication to the React App - 2
Implementing Google Authentication to the React App 2 - Knowledge Check
Exercise
4. Implementing the Add Product Component to Add Products - 1
Implementing the Add Product Component to Add Products 1 - Knowledge Check
Exercise
5.Implementing the Add Product Component to Add Products - 2
Implementing the Add Product Component to Add Products 2 - Knowledge Check
Exercise
6.Implementing the Add Product Component to Add Products - 3
Implementing the Add Product Component to Add Products 3 - Knowledge Check
Exercise
7. Implementing the Add to Cart Functionality by Storing the Data in the Local Storage -1
Implementing the Add to Cart Functionality by Storing the Data in the Local Storage 1 - Knowledge Check
Exercise
8.Implementing the Add to Cart Functionality by Storing the Data in the Local Storage -2
Implementing the Add to Cart Functionality by Storing the Data in the Local Storage 2 - Knowledge Check
Exercise
9.Implementing the Add to Cart Functionality by Storing the Data in the Local Storage -3
Implementing the Add to Cart Functionality by Storing the Data in the Local Storage 3 - Knowledge Check
Exercise
10.Implementing the Add to Cart Functionality by Storing the Data in the Local Storage - 4
Implementing the Add to Cart Functionality by Storing the Data in the Local Storage 4 - Knowledge Check
Exercise
Assignment
Assignment Solution Files
ZIP
Quiz
Exercise
Week 12 - React: End to End Ecommerce Project Part- 3
1.Displaying the Data by Creating a Popover and Activating it - 1
Displaying the Data by Creating a Popover and Activating it 1 - Knowledge Check
Exercise
2.Displaying the Data by Creating a Popover and Activating it - 2
Displaying the Data by Creating a Popover and Activating it 2 - Knowledge Check
Exercise
3.Displaying the Complete Ecommerce Data in a Table Format
Displaying the Complete Ecommerce Data in a Table Format - Knowledge Check
Exercise
4.Calculating the Total Price of the Order
Calculating the Total Price of the Order - Knowledge Check
Exercise
5. Collecting the Customer Details to Place the Order
Collecting the Customer Details to Place the Order - Knowledge Check
Exercise
6.Storing the Customer Data Permanently -1
Storing the Customer Data Permanently 1 - Knowledge Check
Exercise
7.Storing the Customer Data Permanently -2
Storing the Customer Data Permanently 2 - Knowledge Check
Exercise
8.Connecting to a Payment Gateway to have Some Dummy Payment Done
Connecting to a Payment Gateway to have Some Dummy Payment Done - Knowledge Check
Exercise
9.Summary of the Entire Application
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
Week 12 - React Capstone Project - 2 Quiz Application
1.Introduction to the Project
2.Creating required React Components
Creating required React Components - Knowledge Check
Exercise
3.Implementing Home Page Component
Implementing Home Page Component - Knowledge Check
Exercise
4. How to pass Data from Home Component to Question Component
How to pass Data from Home Component to Question Component - Knowledge Check
Exercise
5.Working with createContext() and useContext()
Working with createContext() and useContext() - Knowledge Check
Exercise
6.Creating various Questions for our Quiz Project
Creating various Questions for our Quiz Project - Knowledge Check
Exercise
7.Implementing Summary Component by Displaying Questions - 1
Implementing Summary Component by Displaying Questions 1 - Knowledge Check
Exercise
8.Implementing Summary Component by Displaying Questions - 2
Implementing Summary Component by Displaying Questions 2 - Knowledge Check
Exercise
9.Tracking the Score
Tracking the Score - Knowledge Check
Exercise
10.Sending the Score to Result Component
Sending the Score to Result Component -Knowledge Check
Exercise
11.Deploying the Application on the Server
12. Summary of the Project
Assignment
Assignment Solution File
ZIP
Quiz
Exercise
React - Projects
Project - 9
Project 9 - Solution File
ZIP
Project - 10
ZIP
Project 10 - Solution File
ZIP
Project - 11
Project 11 - Solution File
ZIP
Project - 12
Project 12 - Solution File
ZIP
Course Instructor
OdinSchool
128 Courses • 25703 Students
By clicking on Continue, I accept the Terms & Conditions,
Privacy Policy & Refund Policy