Web Development


React JS- Complete Guide for Frontend Web Development [2021]

Become an expert React JS Developer. Learn HTML, CSS, JavaScript, ES6, React JS and jQuery.

4.43 (2685 reviews)

React JS- Complete Guide for Frontend Web Development [2021]


22 hours


Apr 2020

Last Update
Regular Price

What you will learn

Learn to create basic web pages using HTML5

Learn to style and add animations to bring those basic web pages to life using CSS3

Learn the Javascript language from basic to advanced along with the Next Gen JS - ES6

Learn to create responsive and interactive web pages using Javascript and jQuery

Create user-friendly, beautiful, light and fast websites using React JS

Become an expert front end developer using ReactJs


What's this course about?
This course is a complete guide to become an expert front-end web developer. It contains all the tools and technologies that you should be proficient in work as a React Developer.

  • We will go through the journey of learning HTML5, CSS3, Javascript, ES6, jQuery, and React JS.

  • Each of these course modules has a project which you can work on.

  • Along with the project problem statement video, you will also find the solution video for that project. It is advised to first try working on the project by yourself.

  • Once you have completed working on it,  you can see the solution video to know what are the best practices and the most optimized way to complete it.

  • As you keep on creating new projects, start adding them to your GitHub repository so that by the end of the course you will be having a place to showcase all your work.

  • You will definitely enjoy the journey while completing the course!

Who's teaching you in this course?

I am a Computer Science graduate highly rated instructor with a rating of 4.3 and more than 200k students on Udemy, I have been part of the corporate circle since his college days. In his early days, I was part of a startup team delivering production grid android apps. Currently, I am a lead developer at EdYoda. I’m responsible for the entire front-end development & integration with the back-end. React, Python, Django is my areas of expertise. I have been delivering corporate training for Android, React, Javascript, Python & Django. I have eyes for details & that makes him suited for delivering a finished product. I’m a fitness freak & working out is his favorite thing to do in his spare time.

I want everyone should enjoy learning and I have shared my knowledge that gonna be helpful for React developers.

Why ReactJs?

You know Companies Worldwide Require React JS Developers.

React.js is one of the most demanding frameworks in the market;31.3% of worldwide specialists are currently utilizing ReactJs. Some of the world’s top tech teams use the tool to design scalable, easy-to-maintain solutions — Netflix, PayPal, eBay, Airbnb, and more. Why are businesses so interested in React.js implementation? Here are the benefits of adopting the framework:

  • Increased app development speed. The framework accepts HTML code input and has excellent subcomponent rendering support. Development teams can benefit from JSX as well — it’s an extension with a range of shortcuts that cuts the amount of code writing time.

  • Improved code stability. React.js reduces the impact of change in the code file since the changes in parent components don’t affect the children. Such a data binding approach facilitates software testing and helps ensure stable app performance after update deployments.

  • SEO-friendliness. React.js deals with the inability of search engine crawlers to process JS-heavy pages. Even a beginner with an entry-level react developer salary can deploy React on a server and use the virtual DOM to view the code as a regular web page in a browser.

  • Robust toolkit. React.js has a wide range of debugging and interface design tools.

  • Strong user community and an affordable remote react developer salary. Since a large number of teams are deploying the framework, the tool is regularly updated. There’s no shortage of user-generated content either — you can find dozens of helpful React tutorials and case studies to make the most out of the framework.

Asking for a Senior react developer salary. It’s one of the most in-demand frameworks at the moment — that’s why business owners are willing to find professionals with a moderate mid-level react developer salary within and beyond their home regions.

Enroll now!! see you in class.

Happy learning
Team Edyoda


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


Steven12 October 2020

Explains the basics with simple content, but does not provide a methodology in the video to have students apply what they are learning from each video.

Abhishek27 September 2020

This is the first time i took a paid courses, And the recording was done totally horrible. The sounds are not clear at all. I'm not expecting this ....

Nuria22 September 2020

No tengo ningun conocimiento sobre este tema, y me parece que el curso está explicado a la perfección. Hasta el momento todo entendido.

Basma17 September 2020

Great course, wish there was a solution to the practice problems that I can refer to so I would know that my answers were correct.

Lior21 August 2020

I like this course very very much!! In a short amount of time - many topics are covered wonderfully in a clear way, even the hard ones! Bravo!!!!

Guido30 June 2020

Audio Quality of this section is horrible - Sound like you are underwater or really far away from microphone

Rajnish16 June 2020

The audio could have been better. Also, react lecture are a bit less than i expected. Overall, its a decent course.

Joseph20 May 2020

I am working on an Associates degree in Computer Science and am using Udemy courses to provide specific skills that have only been lightly covered in my college program. What I really like so far about his course is that it does start you at the beginning of web development with HTML and CSS, which I have learned in school and on the job, but it fills in gaps in my learning. I believe by the end of this course that I will be a better web developer with strengthened HTML, CSS and JavaScript skills. In addition, adding the React library/framework will be a great addition to my toolbox.

Da13 May 2020

The volume level of the mic is too low and bad quality compare to generic introduction, but good course else

Himanshi3 May 2020

please provide some notes to the theory you told. Otherwise its a great experience learning from you.

Sahil2 May 2020

This Course is amazing everything is explained deeply and the mini project in-between helps to know that how we can use knowledge that we have learn. Amazing Course Qaifi Sir

Mustafa28 March 2020

sadece goruntu ve ses kalitesi iyi degildi. ayrica ingilizce aksani bir miktar (simdilik cok az) sorun oldu. icerik ise bence cok iyi. tesekkur ederim.

Carlo28 March 2020

Well done course, and very interesting! I found it useful to practice and deepen the web development frontend!

Munyi19 February 2020

Just reminding myself the basics I need to get going, am loving the details and new editing platforms such as codepen

Sayantan19 February 2020

Nice content, learning few unknown things which everyone doesn't teach.Well done, it will be better if you upload a course on backend as well.It will be better for them who wants to be a full stack engineer.Backend may be with any technology, even with php will be much much appreciated.


9/24/202057% OFFExpired
10/12/2020100% OFFExpired
10/27/2020100% OFFExpired
11/16/2020100% OFFExpired
11/27/2020100% OFFExpired
12/8/2020100% OFFExpired
12/28/2020100% OFFExpired
1/8/2021100% OFFExpired
4/20/2021100% OFFExpired
5/17/2021100% OFFExpired
7/5/2021100% OFFExpired
7/8/2021100% OFFExpired
7/16/2021100% OFFExpired
8/2/2021100% OFFExpired
8/12/2021100% OFFExpired
9/14/2021100% OFFExpired
9/18/2021100% OFFValid


Udemy ID


Course created date


Course Indexed date
Course Submitted by