Courses
Contact Us
Login
null
SR44 - React Web Development Course
Course Instructor
Ms.Shruti - ATS friendly Resumes
FREE
To enroll in this course, please contact the Admin
Contact Admin
null
Course Overview
null
Schedule of Classes
Start Date & End Date
Apr 27 2024 - Apr 27 2026
null
Course Curriculum
1 Subject
SR44 - React Web Development Course
672 Exercises
•
745 Learning Materials
Bootcamp Walkthrough
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