SR45 - React Web Development Course

Course Instructor Ms.Shruti - ATS friendly Resumes

FREE

To enroll in this course, please contact the Admin

Contact Admin

Course Overview

Schedule of Classes

Course Curriculum

1 Subject

SR45

672 Exercises • 745 Learning Materials

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