SR44 - React Web Development Course

Bootcamp Walkthrough

Starter Checklist

LMS Walkthrough

First Step-Self Introduction Video

Student Intro Video

Exercise

Statement of purpose

Exercise

Survey on Behavioral Skills

Exercise

Week 1 - Day 1 - HTML - Introduction to Web Development

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

Constructing the Web: Building Blocks of a Digital House

5.Setting up your Development Environment

Setting up your Development Environment - Knowledge Check

Exercise

Assignment - W1 D1

Assignment Submission - W1 D1

Assignment

Quiz

Exercise

Week 1 - Day 2 - 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.Adding Images in HTML

Adding Images in HTML - Knowledge Check

Exercise

7.Creating Links with Anchor Tags

Creating Links with Anchor Tags - Knowledge Check

Exercise

Assignment - W1 D2

Assignment Solution File

Assignment Submission - W1 D2

Assignment

Quiz

Exercise

Week 1 - Day 3 - 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 - W1 D3

Assignment Solution File

Assignment Submission - W1 D3

Assignment

Quiz

Exercise

Week 1 - Day 4 - 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 - W1 D4

Assignment Solution File 1

Assignment Solution File 2

Assignment Submission - W1 D4

Assignment

Quiz

Exercise

Week 1 - Day 5- 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.Modifying Font Weight and Line Height

Modifying Font Weight and 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 - W1 D5

Assignment Solution File 1

Assignment Solution File 2

Assignment Submission - W1 D5

Assignment

Quiz

Exercise

Week 1 - Day 6 & 7 - Project

Project

Project - Solution File

ZIP

Project Submission

Assignment

Week 2 - Day 1 - 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 - W2 D1

Assignment Solution File

Assignment Submission - W2 D1

Assignment

Quiz

Exercise

Week 2 - Day 2 - 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

Assignment - W2 D2

Assignment Solution File 1

Assignment Solution File 2

Assignment Submission - W2 D2

Assignment

Quiz

Exercise

Week 2 - Day 3 - 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 - W2 D3

Assignment Solution File

ZIP

Assignment Submission - W2 D3

Assignment

Quiz

Exercise

Week 2 - Day 4 - 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 - W2 D4

Assignment Solution

ZIP

Assignment Submission - W2 D4

Assignment

Quiz

Exercise

Week 2 - Day 5 - CSS - Building a Real-World Website - PandaFoods - 2

1.Building the "How It Works" Section - 2

Building the "How It Works" Section - 2 - Knowledge Check

Exercise

2.Building the "How It Works" Section - 3

Building the "How It Works" Section - 3 - Knowledge Check

Exercise

3.Building the "Featured In" Section

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 - W2 D5

Assignment Solution File

ZIP

Assignment Submission - W2 D5

Assignment

Quiz

Exercise

Week 2 - Day 6 & 7 - Project

Project

Project - Solution File

ZIP

Project Submission

Assignment

Week 3 - Day 1 - 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 - W3 D1

Assignment Solution File

ZIP

Assignment Submission - W3 D1

Assignment

Quiz

Exercise

Week 3 - Day 2 - 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 - W3 D2

Assignment Solution File

ZIP

Assignment Submission - W3 D2

Assignment

Quiz

Exercise

Week 3 - Day 3 - 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 - W3 D3

Assignment Solution File

ZIP

Assignment Submission - W3 D3

Assignment

Quiz

Exercise

Week 3 - Day 4 - 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 in JavaScript

Functions Calling Other Functions in JavaScript - Knowledge Check

Exercise

6.Reviewing Functions in JavaScript

Reviewing Functions in JavaScript - Knowledge Check

Exercise

7. Introduction to Arrays in JavaScript

Introduction to Arrays in JavaScript - Knowledge Check

Exercise

8.Basic Array Operations (Methods) Part- 1 in JavaScript

Basic Array Operations (Methods) - 1 in JavaScript - Knowledge Check

Exercise

9.Basic Array Operations (Methods) Part- 2 in JavaScript

Basic Array Operations (Methods) Part- 2 in JavaScript - Knowledge Check

Exercise

Assignment - W3 D4

Assignment Solution File

ZIP

Assignment Submission - W3 D4

Assignment

Quiz

Exercise

Week 3 - Day 5 - 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. Understanding the while Loop in JavaScript

Understanding the while Loop in JavaScript - Knowledge Check

Exercise

Assignment - W3 D5

Assignment Solution File

ZIP

Assignment Submission - W3 D5

Assignment

Quiz

Exercise

Week 3 - Day 6 & 7 - Project

Project

Project Submission

Assignment

Project - Solution File

ZIP

Week 4 - Day 1 - 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

JavaScript Functions and Arrays

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 - W4 D1

Assignment Solution File

ZIP

Assignment Submission - W4 D1

Assignment

Quiz

Exercise

Week 4 - Day 2 - 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 - W4 D2

Assignment Submission - W4 D2

Assignment

Quiz

Exercise

Week 4 - Day 3 - 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 in JavaScript

Rest Pattern and Parameters in JavaScript - 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 - W4 D3

Assignment solution File

ZIP

Assignment Submission - W4 D3

Assignment

Quiz

Exercise

Week 4 - Day 4 - 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.Practice with String Methods in JavaScript

Assignment - W4 D4

Assignment Solution File

ZIP

Assignment Submission - W4 D4

Assignment

Quiz

Exercise

Week 4 - Day 5 - 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 - W4 D5

Assignment Solution File

ZIP

Assignment Submission - W4 D5

Assignment

Quiz

Exercise

Week 4 - Day 6 & 7 - Project

Project

Project - Solution File

ZIP

Project Submission

Assignment

Week 5 - Day 1 - 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 through Arrays using forEach()

Looping through Arrays using 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 - W5 D1

Assignment Solution - HTML Code

Assignment Solution - CSS Code

Assignment Solution - JavaScript Code

Assignment Submission - W5 D1

Assignment

Quiz

Exercise

Week 5 - Day 2 - 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 - W5 D2

Assignment Solution - HTML Code

Assignment Solution - CSS Code

Assignment Solution - JavaScript Code

Assignment Submission - W5 D2

Assignment

Quiz

Exercise

Week 5 - Day 3 - Data Structures - Advanced Array Methods in JavaScript (Continued)

1.Implementing User Login Functionality with Arrays

Implementing User Login Functionality with Arrays - 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 - W5 D3

Assignment solution

Assignment Submission - W5 D3

Assignment

Quiz

Exercise

Week 5 - Day 4 - 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 - W5 D4

Assignment Solution

Assignment Submission - W5 D4

Assignment

Quiz

Exercise

Week 5 - Day 5 - 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 - W5 D5

Assignment Solution

Assignment Submission - W5 D5

Assignment

Quiz

Exercise

Week 5 - Day 6 & 7 - Project

Project

Project - Solution File

ZIP

Project Submission

Assignment

Week 6 - Day 1 - 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 - W6 D1

Assignment Solution File

ZIP

Assignment Submission - W6 D1

Assignment

Quiz

Exercise

Week 6 - Day 2 - 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 - W6 D2

Assignment Solution File

ZIP

Assignment Submission - W6 D2

Assignment

Quiz

Exercise

Week 6 - Day 3 - 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 - W6 D3

Assignment Solution File

Assignment Submission - W6 D3

Assignment

Quiz

Exercise

Week 6 - Day 4 - 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 - W6 D4

Assignment Solution File

Assignment Submission - W6 D4

Assignment

Quiz

Exercise

Week 6 - Day 5 - 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 - W6 D5

Assignment Solution

ZIP

Assignment Submission - W6 D5

Assignment

Quiz

Exercise

Week 6 - Day 6 & 7 - Project

Project

Project Submission

Assignment

Project - Solution File

ZIP

Week 7 - Day 1 - 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 - W7 D1

Assignment Solution File

ZIP

Assignment Submission - W7 D1

Assignment

Quiz

Exercise

Week 7 - Day 2 - 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 - W7 D2

Assignment Solution

ZIP

Assignment Submission - W7 D2

Assignment

Quiz

Exercise

Week 7 - Day 3 - JavaScript Practice Project 2: Infinite Scroll

Starter Files

ZIP

1.Overview of the Project - 1

2.Overview of the Project - 2

3.Place Elements in Center on the Page with CSS

Place Elements in Center on the Page with CSS - Knowledge Check

Exercise

4.Creating Loader SVG with CSS and HTML

Creating Loader SVG with CSS and HTML - 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 - W7 D3

Assignment Solution File

ZIP

Assignment Submission - W7 D3

Assignment

Quiz

Exercise

Week 7 - Day 4 - 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.Implementing Audio Playback Part-1

Implementing Audio Playback Part-1 - Knowledge Check

Exercise

7.Implementing Audio Playback Part- 2

Implementing Audio Playback Part- 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 - W7 D4

Assignment Submission - W7 D4

Assignment

Quiz

Exercise

Week 7 - Day 5 - 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 - W7 D5

Assignment Solution

ZIP

Assignment Submission - W7 D5

Assignment

Quiz

Exercise

Week 7 - Day 6 & 7 - Project

Project - 7

Project 7 - Solution File

Audio

Project Submission

Assignment

Week 8 - Day 1 - 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 - W8 D1

Assignment Solution File

ZIP

Assignment Submission - W8 D1

Assignment

Quiz

Exercise

Week 8 - Day 2 - 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 - W8 D2

Assignment Solution FIle

ZIP

Assignment Submission - W8 D2

Assignment

Quiz

Exercise

Week 8 - Day 3 - 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 - W8 D3

Assignment Solution

ZIP

Assignment Submission - W8 D3

Assignment

Quiz

Exercise

Week 8 - Day 4 - 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 - W8 D4

Assignment SolutionFile

ZIP

Assignment Submission - W8 D4

Assignment

Quiz

Exercise

Week 8 - Day 5 - 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 - W8 D5

Assignment Solution

ZIP

Assignment Submission - W8 D5

Assignment

Quiz

Exercise

Week 8 - Day 6 & 7 - Project

Project - 8

Project - Solution File

ZIP

Project Submission

Assignment

Week 9 - Day 1 - 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 - W9 D1

Assignment Solution File

ZIP

Assignment Submission - W9 D1

Assignment

Quiz

Exercise

Week 9 - Day 2 - 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 - W9 D2

Assignment Solution File

ZIP

Assignment Submission - W9 D2

Assignment

Quiz

Exercise

Week 9 - Day 3 - 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 - W9 D3

Assignment Solution File

ZIP

Assignment Submission - W9 D3

Assignment

Quiz

Exercise

Week 9 - Day 4 - 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 - W9 D4

Assignment Solution File

ZIP

Assignment Submission - W9 D4

Assignment

Quiz

Exercise

Week 9 - Day 5 - 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 - W9 D5

Assignment Solution File

ZIP

Assignment Submission - W9 D5

Assignment

Quiz

Exercise

Week 9 - Day 6 & 7 - Project

Project - 9

Project 9 - Solution File

ZIP

Project Submission

Assignment

Week 10 - Day 1 - 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 - W10 D1

Assignment Submission - W10 D1

Assignment

Quiz

Exercise

Week 10 - Day 2 - 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 - W10 D2

Assignment Solution File

ZIP

Assignment Submission - W10 D2

Assignment

Quiz

Exercise

Week 10 - Day 3 - 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

5. Initialising a React Project

4.Introduction to the Project Snapshot

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 - W10 D3

Assignment Solution File

ZIP

Assignment Submission - W10 D3

Assignment

Quiz

Exercise

Week 10 - Day 4 - 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 - W10 D4

Assignment Solution File

ZIP

Assignment Submission - W10 D4

Assignment

Quiz

Exercise

Week 10 - Day 5 - 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 - W10 D5

Assignment Solution File

ZIP

Assignment Submission - W10 D5

Assignment

Quiz

Exercise

Week 10 - Day 6 & 7 - Project

Project - 10

ZIP

Project 10 - Solution File

ZIP

Project Submission

Assignment

Week 11 - Day 1 - 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

Introducing YUP for Form Validation -Knowledge Check

Exercise

7.Introducing YUP for Form Validation

Building Forms with Formik - 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 - W11 D1

Assignment Solution File

ZIP

Assignment Submission - W11 D1

Assignment

Quiz

Exercise

Week 11 - Day 2 - 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 - W11 D2

Assignment Solution File

ZIP

Assignment Submission - W11 D2

Assignment

Quiz

Exercise

Week 11 - Day 3 - 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 - W11 D3

Assignment Solution File

ZIP

Assignment Submission - W11 D3

Assignment

Quiz

Exercise

Week 11 - Day 4 - 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 - W11 D4

Assignment Solution File

ZIP

Assignment Submission - W11 D4

Assignment

Quiz

Exercise

Week 11 - Day 5 - 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 - W11 D5

Assignment Solution File

ZIP

Assignment Submission - W11 D5

Assignment

Quiz

Exercise

Week 11 - Day 6 & 7 - Project

Project - 11

Project 11 - Solution File

ZIP

Project Submission

Assignment

Week 12 - Day 1 - 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 - W12 D1

Assignment Solution File

ZIP

Assignment Submission - W12 D1

Assignment

Quiz

Exercise

Week 12 - Day 2 - 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

SR44 - React Web Development Course

Course Overview

Schedule of Classes

Apr 27 2024 - Apr 27 2026

Course Curriculum