React JS- Complete Guide for Frontend Web Development

Content

HTML5 – Basics to Advanced

HTML – Introduction

HTML – Code Editor Setup

HTML – Structure of an HTML Document

HTML – Adding Heading in a Webpage

HTML – Adding Paragraph in a Webpage

HTML – Adding Images in Web Pages

HTML – Creating Ordered and Unordered Lists

HTML – Adding Styles and Formatting HTML Elements

HTML – Block and Inline Display Values

HTML – Adding group styles using Class attribute

HTML – Adding HyperLinks in Webpages

HTML – Using links to connect Webpages

HTML – Uniquely Identify HTML Element by using ID attribute

HTML – Mini-Project 1: Favorite Foods Webpage

HTML – Mini-Project 1: Solution

HTML – What makes HTML5 Better?

HTML – New Elements & Attributes in HTML5

HTML – Design Page Structure Using Semantic Elements

HTML – New Semantic Elements: <details> and <summary>

HTML – Introduction to Tables

HTML – Span table rows and columns

HTML – Design layouts using Tables

HTML Tables – Practice Problem 1

HTML Tables – Practice Problem 1: Solution

HTML – Introduction to Forms

HTML – Form Input Types

HTML – Adding Styles to Forms

HTML – Form Methods: GET and POST

HTML – New Form Elements

HTML – New Form Input Types

HTML – New Form Input Attributes

HTML – Form Validation

HTML – Forms Practice Problem 1

HTML – Forms Practice Problem 1 – Solution

HTML – Adding Videos in a Webpage

HTML – Adding Audio in a Webpage

HTML – The <embed> element

HTML – Embed Youtube Videos in a Webpage

HTML – Introduction to SVG

HTML – Create circle using SVG

HTML – Create a rectangle using SVG

HTML – Final Project

CSS3 – Basics to Advanced

CSS – Introduction

CSS – How to use CSS?

CSS – Styling Text

CSS – Adding Borders

CSS – Margin and Padding

CSS – Styling Lists

CSS – Styling Links

CSS – Styling Buttons

CSS – Adding Icons

CSS – Working with Display Values

CSS – Display value: Inline-Block

CSS – Positioning HTML Elements Part-1

CSS – Positioning HTML Elements Part-2

CSS – Handling Content Overflow

CSS – Floating HTML Elements

CSS – Box Model

CSS – Box Sizing

CSS – Adding Shadows

CSS – Combinators Part-1

CSS – Combinators Part-2

CSS – Pseudo Classes Part-1

CSS – Pseudo Classes Part-2

CSS – Pseudo Elements

CSS – Adding Backgrounds

CSS – Gradients

CSS – Handling Text Overflow

CSS – Practice Problem-1: Create Google.com Look-Alike

CSS – Practice Problem-1: Create Google.com Look-Alike Solution

CSS – Introduction to Responsive Web Design

CSS – Viewport

CSS – Dynamic Size

CSS – Introduction to Media Queries

CSS – Responsive Webpage Design using Media Queries

CSS – Flex Layout

CSS – Flex Container Properties

CSS – Align Flex Items

CSS – Flex Item Properties

CSS – Design Topbar using Flex

CSS – Responsive Grid using Flex

CSS – Transform Property

CSS – Align Elements using Transform Property

CSS – Transition Property

CSS – Animation Property

CSS – Flying Rocket Animation using Animation Property

CSS – Introduction to Grid Layout

CSS – Grid Container Properties

CSS – Grid Item Properties

CSS – Final Project Problem Statement

Javascript – Basics to Advanced

JavaScript – Introduction

JavaScript – Introduction to Variables, Operators and Expressions

JavaScript – Variables

JavaScript – Numbers

JavaScript – In-Built Number Functions

JavaScript – Strings

JavaScript – In-Built String Functions Part-1

JavaScript – In-Built String Functions Part-2

JavaScript – Null and Undefined Values

JavaScript – Conditional Statement: If-else

JavaScript – Conditional Statement: Switch

JavaScript – Arithmetic Operators

JavaScript – Assignment Operators

JavaScript – Comparison and Logical Operators

JavaScript – Implicit Type Coercion

JavaScript – Explicit Type Coercion

JavaScript – Objects

JavaScript – Arrays Part 1

JavaScript – Arrays Part 2

JavaScript – Introduction to Loops

JavaScript – While Loop

JavaScript – For Loops

JavaScript – Functions

JavaScript – Function Arguments

JavaScript – Scope and Environment

JavaScript – Variable Hoisting

JavaScript – Function Hoisting

JavaScript – Introduction to DOM

JavaScript – Select HTML Elements

JavaScript – Query Selectors

JavaScript – Update HTML Elements

JavaScript – Updating Styles

JavaScript – Intro to Events

JavaScript – Add and Remove Classes from HTML Elements

JavaScript – Getting Styles

JavaScript – Form Events

JavaScript – Keyboard Events

JavaScript – Mouse Events

JavaScript – Create HTML Elements – Part 1

JavaScript – Create HTML Elements – Part 2

JavaScript- Update and Delete HTML Elements

JavaScript – Introduction to Browser Object Model

JavaScript – Screen and Navigator Object

JavaScript – History and Location Object

JavaScript – Mini-Project 1: Smartwatch Showcase

JavaScript – Mini-Project 2: Calculator App

JavaScript – Introduction to Regular Expressions

JavaScript – Meta-characters and Character Classes

JavaScript – Regex Quantifiers

JavaScript – Using Regex inside JavaScript

JavaScript – Regex Groups

JavaScript – Form Validation using Regex

JavaScript – Introduction to Object Oriented Programming

JavaScript – The “this” Keyword

JavaScript – Constructor Functions

JavaScript – Inheritance and Prototype Chain

JavaScript – Prototype Implementation

JavaScript – Understanding Frontend and Backend

JavaScript – HTTP Request and Response

JavaScript – Introduction to JSON

JavaScript – Introduction to AJAX

JavaScript – Handling HTTP Response

JavaScript – Working with HTTP Response Data

JavaScript – Making HTTP Post Requests

jQuery

jQuery – Introduction

jQuery – Selectors and Filters

jQuery – Add/Update HTML Elements

jQuery – Add/Update Styles

jQuery – Handling HTML Events

jQuery – Making AJAX Calls

Modern Javascript (ES6) For React

ES6 – Introduction

ES6 – Variable Creation using “let” and “const”

ES6 – Template Strings

ES6 – Arrow Functions

ES6 – Rest Operator

ES6 – Spread Operator

ES6 – Destructuring

ES6 – Array Functions: map()

ES6 – Arrow Functions: reduce()

ES6 – Arrow Functions: filter()

ES6 – Arrow Functions: find() and findIndex()

ES6 – Introduction to Classes

ES6 – Inheritance in ES6

ES6 – Callbacks and Promises

ES6 – Working with Promises

ES6 – Chaining Promises

React JS

ReactJS – Introduction

ReactJS – Understanding SPAs and MPAs

ReactJS – Creating our First React App

ReactJS – Project Structure created by CRA

ReactJS – Introduction to JSX

ReactJS – JSX Behind the Scenes

ReactJS – Adding Styles to React Elements

ReactJS – Create React Elements Dynamically

ReactJS – Creating our First React Component

ReactJS – Passing Data to Components using Props

ReactJS – Import and Export of Modules

ReactJS – Introduction to CSS Modules

ReactJS – Creating Mobile Responsive Components

ReactJS – Stateful vs Stateless Components

ReactJS – Creating Class-based Components

ReactJS – More about setState() Method

ReactJS – Passing Props to Class-based Components

ReactJS – Passing Function as Props

ReactJS – Practice Problem: Product Details Page

ReactJS – Practice Problem: Product Details Page [Solution] – Part 1

ReactJS – Practice Problem: Product Details Page [Solution] – Part 2

ReactJS – Practice Problem: Product Details Page [Solution] – Part 3

ReactJS – render() method – Behind the scenes

ReactJS – Component Lifecycle – Creation

ReactJS – Component Lifecycle – Updation

ReactJS – shouldComponentUpdate() Lifecycle Method