React JS- Complete Guide for Frontend Web Development

Focused View

EdYoda Digital University,Qaifi Khan,Mavludin Abdulkadirov

21:57:41

41 View

01 - HTML5 - Basics to Advanced

001 HTML - Introduction.mp4

01:54

002 HTML - Code Editor Setup.mp4

05:23

003 HTML - Structure of an HTML Document.mp4

03:33

004 HTML - Adding Heading in a Webpage.mp4

02:41

005 HTML - Adding Paragraph in a Webpage.mp4

04:13

006 HTML - Adding Images in Web Pages.mp4

06:09

007 HTML - Creating Ordered and Unordered Lists.mp4

06:55

008 HTML - Adding Styles and Formatting HTML Elements.mp4

10:23

009 HTML - Block and Inline Display Values.mp4

06:51

010 HTML - Adding group styles using Class attribute.mp4

06:06

011 HTML - Adding HyperLinks in Webpages.mp4

04:16

012 HTML - Using links to connect Webpages.mp4

03:16

013 HTML - Uniquely Identify HTML Element by using ID attribute.mp4

04:34

014 HTML - Mini-Project 1 Favorite Foods Webpage.mp4

00:47

015 HTML - Mini-Project 1 Solution.mp4

12:18

016 HTML - What makes HTML5 Better.mp4

02:09

017 HTML - New Elements & Attributes in HTML5.mp4

00:52

018 HTML - Design Page Structure Using Semantic Elements.mp4

09:38

019 HTML - New Semantic Elements details and summary.mp4

03:24

020 HTML - Introduction to Tables.mp4

06:25

021 HTML - Span table rows and columns.mp4

02:55

022 HTML - Design layouts using Tables.mp4

05:49

023 HTML Tables - Practice Problem 1.mp4

00:41

024 HTML Tables - Practice Problem 1 Solution.mp4

13:31

025 HTML - Introduction to Forms.mp4

04:03

026 HTML - Form Input Types.mp4

08:15

027 HTML - Adding Styles to Forms.mp4

05:41

028 HTML - Form Methods GET and POST.mp4

05:17

029 HTML - New Form Elements.mp4

03:46

030 HTML - New Form Input Types.mp4

05:50

031 HTML - New Form Input Attributes.mp4

03:53

032 HTML - Form Validation.mp4

05:08

033 HTML - Forms Practice Problem 1.mp4

00:48

033 HTML-Forms-Practice-Problem-Resources.pdf

034 HTML - Forms Practice Problem 1 - Solution.mp4

10:25

035 HTML - Adding Videos in a Webpage.mp4

03:33

036 HTML - Adding Audio in a Webpage.mp4

03:13

037 HTML - The embed element.mp4

01:48

038 HTML - Embed Youtube Videos in a Webpage.mp4

02:57

039 HTML - Introduction to SVG.mp4

08:53

040 HTML - Create circle using SVG.mp4

07:00

041 HTML - Create a rectangle using SVG.mp4

05:48

042 HTML - Final Project.mp4

01:43

042 HTML-Final-Project-Resources.pdf

042 Steps-to-Push-the-local-code-on-GitHub-repository.pdf

external-links.txt

02 - CSS3 - Basics to Advanced

001 CSS - Introduction.mp4

02:29

002 CSS - How to use CSS.mp4

11:33

003 CSS - Styling Text.mp4

11:13

004 CSS - Adding Borders.mp4

05:48

005 CSS - Margin and Padding.mp4

05:15

006 CSS - Styling Lists.mp4

05:17

007 CSS - Styling Links.mp4

05:11

008 CSS - Styling Buttons.mp4

06:54

009 CSS - Adding Icons.mp4

05:44

010 CSS - Working with Display Values.mp4

04:04

011 CSS - Display value Inline-Block.mp4

06:50

012 CSS - Positioning HTML Elements Part-1.mp4

08:20

013 CSS - Positioning HTML Elements Part-2.mp4

03:20

014 CSS - Handling Content Overflow.mp4

03:27

015 CSS - Floating HTML Elements.mp4

03:38

016 CSS - Box Model.mp4

03:57

017 CSS - Box Sizing.mp4

03:53

018 CSS - Adding Shadows.mp4

04:54

019 CSS - Combinators Part-1.mp4

05:23

020 CSS - Combinators Part-2.mp4

06:20

021 CSS - Pseudo Classes Part-1.mp4

06:18

022 CSS - Pseudo Classes Part-2.mp4

07:48

023 CSS - Pseudo Elements.mp4

07:30

024 CSS - Adding Backgrounds.mp4

05:21

025 CSS - Gradients.mp4

07:43

026 CSS - Handling Text Overflow.mp4

04:01

027 CSS - Practice Problem-1 Create Google.com Look-Alike.mp4

00:59

027 CSS-Practice-Problem-1-Google-Home-Page-Look-alike-Resources.pdf

028 CSS - Practice Problem-1 Create Google.com Look-Alike Solution.mp4

31:49

029 CSS - Introduction to Responsive Web Design.mp4

01:19

030 CSS - Viewport.mp4

04:55

031 CSS - Dynamic Size.mp4

04:31

032 CSS - Introduction to Media Queries.mp4

03:27

033 CSS - Responsive Webpage Design using Media Queries.mp4

13:00

034 CSS - Flex Layout.mp4

02:42

035 CSS - Flex Container Properties.mp4

07:21

036 CSS - Align Flex Items.mp4

07:41

037 CSS - Flex Item Properties.mp4

05:26

038 CSS - Design Topbar using Flex.mp4

03:52

039 CSS - Responsive Grid using Flex.mp4

04:20

040 CSS - Transform Property.mp4

07:38

041 CSS - Align Elements using Transform Property.mp4

03:01

042 CSS - Transition Property.mp4

07:01

043 CSS - Animation Property.mp4

08:47

044 CSS - Flying Rocket Animation using Animation Property.mp4

02:50

045 CSS - Introduction to Grid Layout.mp4

02:31

046 CSS - Grid Container Properties.mp4

08:28

047 CSS - Grid Item Properties.mp4

08:36

048 CSS - Final Project Problem Statement.mp4

02:48

048 CSS-Final-Project-Vegan-Store-Resources.pdf

external-links.txt

03 - Javascript - Basics to Advanced

001 JavaScript - Introduction.mp4

02:53

002 JavaScript - Introduction to Variables, Operators and Expressions.mp4

07:42

003 JavaScript - Variables.mp4

08:04

003 JavaScript-Variables-Practice-Problems.pdf

004 JavaScript - Numbers.mp4

07:10

004 JavaScript-Numbers-Practice-Problems.pdf

005 JavaScript - In-Built Number Functions.mp4

08:14

005 JavaScript-In-built-Number-Functions-Practice-Problems.pdf

006 JavaScript - Strings.mp4

07:20

006 JavaScript-Strings-Practice-Problems.pdf

007 JavaScript - In-Built String Functions Part-1.mp4

11:13

007 JavaScript-In-built-String-Functions-Part-1-Practice-Problems.pdf

008 JavaScript - In-Built String Functions Part-2.mp4

13:47

008 JavaScript-In-built-String-Functions-Part-2-Practice-Problems.pdf

009 JavaScript - Null and Undefined Values.mp4

03:27

009 JavaScript-Null-and-Undefined-Values-Practice-Problems.pdf

010 JavaScript - Conditional Statement If-else.mp4

04:12

010 JavaScript-Conditional-Statement-if-else-Practice-Problems.pdf

011 JavaScript - Conditional Statement Switch.mp4

06:45

011 JavaScript-Conditional-Statement-switch-Practice-Problems.pdf

012 JavaScript - Arithmetic Operators.mp4

06:37

012 JavaScript-Arithmetic-Operators-Practice-Problems.pdf

013 JavaScript - Assignment Operators.mp4

05:08

013 JavaScript-Assignment-Operators-Practice-Problems.pdf

014 JavaScript - Comparison and Logical Operators.mp4

07:07

014 JavaScript-Comparision-and-Logical-Operators-Practice-Problems.pdf

015 JavaScript - Implicit Type Coercion.mp4

08:23

015 JavaScript-Implicit-Type-Coercion-Practice-Problems.pdf

016 JavaScript - Explicit Type Coercion.mp4

05:28

016 JavaScript-Explicit-Type-Coercion-Practice-Problems.pdf

017 JavaScript - Objects.mp4

05:11

017 JavaScript-Objects-Practice-Problems.pdf

018 JavaScript - Arrays Part 1.mp4

06:33

018 JavaScript-Arrays-Part-1-Practice-Problems.pdf

019 JavaScript - Arrays Part 2.mp4

06:11

019 JavaScript-Arrays-Part-2-Practice-Problems.pdf

020 JavaScript - Introduction to Loops.mp4

01:54

021 JavaScript - While Loop.mp4

02:07

021 JavaScript-while-Loop-Practice-Problems.pdf

022 JavaScript - For Loops.mp4

04:54

022 JavaScript-for-Loop-Practice-Problems.pdf

023 JavaScript - Functions.mp4

05:39

024 JavaScript - Function Arguments.mp4

08:31

025 JavaScript - Scope and Environment.mp4

09:05

026 JavaScript - Variable Hoisting.mp4

03:45

027 JavaScript - Function Hoisting.mp4

04:55

028 JavaScript - Introduction to DOM.mp4

06:05

029 JavaScript - Select HTML Elements.mp4

08:30

030 JavaScript - Query Selectors.mp4

04:58

031 JavaScript - Update HTML Elements.mp4

12:31

032 JavaScript - Updating Styles.mp4

12:43

033 JavaScript - Intro to Events.mp4

13:46

034 JavaScript - Add and Remove Classes from HTML Elements.mp4

10:21

035 JavaScript - Getting Styles.mp4

14:06

036 JavaScript - Form Events.mp4

12:37

037 JavaScript - Keyboard Events.mp4

07:50

038 JavaScript - Mouse Events.mp4

14:07

039 JavaScript - Create HTML Elements - Part 1.mp4

15:08

040 JavaScript - Create HTML Elements - Part 2.mp4

10:26

041 JavaScript- Update and Delete HTML Elements.mp4

08:32

042 JavaScript - Introduction to Browser Object Model.mp4

09:51

043 JavaScript - Screen and Navigator Object.mp4

05:04

044 JavaScript - History and Location Object.mp4

05:03

045 JavaScript - Mini-Project 1 Smartwatch Showcase.mp4

01:05

045 JavaScript-Mini-Project-1-Smartwatch-Showcase-Resources.pdf

046 JavaScript - Mini-Project 2 Calculator App.mp4

00:50

046 JavaScript-Mini-Project-2-Calculator-App-Resources.pdf

047 JavaScript - Introduction to Regular Expressions.mp4

05:22

048 JavaScript - Meta-characters and Character Classes.mp4

09:59

049 JavaScript - Regex Quantifiers.mp4

10:09

050 JavaScript - Using Regex inside JavaScript.mp4

07:17

051 JavaScript - Regex Groups.mp4

10:36

052 JavaScript - Form Validation using Regex.mp4

08:37

053 JavaScript - Introduction to Object Oriented Programming.mp4

04:32

054 JavaScript - The this Keyword.mp4

04:56

055 JavaScript - Constructor Functions.mp4

06:08

056 JavaScript - Inheritance and Prototype Chain.mp4

04:29

057 JavaScript - Prototype Implementation.mp4

08:45

058 JavaScript - Understanding Frontend and Backend.mp4

02:08

059 JavaScript - HTTP Request and Response.mp4

04:21

060 JavaScript - Introduction to JSON.mp4

08:03

061 JavaScript - Introduction to AJAX.mp4

05:56

062 JavaScript - Handling HTTP Response.mp4

04:52

063 JavaScript - Working with HTTP Response Data.mp4

05:14

064 JavaScript - Making HTTP Post Requests.mp4

08:52

external-links.txt

04 - jQuery

001 jQuery - Introduction.mp4

02:42

002 jQuery - Selectors and Filters.mp4

10:24

003 jQuery - AddUpdate HTML Elements.mp4

06:03

004 jQuery - AddUpdate Styles.mp4

07:22

005 jQuery - Handling HTML Events.mp4

07:11

006 jQuery - Making AJAX Calls.mp4

05:01

external-links.txt

05 - Modern Javascript (ES6) For React

001 ES6 - Introduction.mp4

04:10

002 ES6 - Variable Creation using let and const.mp4

04:13

003 ES6 - Template Strings.mp4

06:12

004 ES6 - Arrow Functions.mp4

03:39

005 ES6 - Rest Operator.mp4

03:55

006 ES6 - Spread Operator.mp4

05:27

007 ES6 - Destructuring.mp4

07:52

008 ES6 - Array Functions map().mp4

08:40

009 ES6 - Arrow Functions reduce().mp4

05:14

010 ES6 - Arrow Functions filter().mp4

04:17

011 ES6 - Arrow Functions find() and findIndex().mp4

04:01

012 ES6 - Introduction to Classes.mp4

04:24

013 ES6 - Inheritance in ES6.mp4

07:20

014 ES6 - Callbacks and Promises.mp4

05:17

015 ES6 - Working with Promises.mp4

06:30

016 ES6 - Chaining Promises.mp4

07:43

external-links.txt

06 - React JS

001 ReactJS - Introduction.mp4

03:11

002 ReactJS - Understanding SPAs and MPAs.mp4

03:24

003 ReactJS - Creating our First React App.mp4

06:31

004 ReactJS - Project Structure created by CRA.mp4

03:45

005 ReactJS - Introduction to JSX.mp4

11:46

006 ReactJS - JSX Behind the Scenes.mp4

07:53

007 ReactJS - Adding Styles to React Elements.mp4

07:34

008 ReactJS - Create React Elements Dynamically.mp4

04:38

009 ReactJS - Creating our First React Component.mp4

06:40

010 ReactJS - Passing Data to Components using Props.mp4

06:49

011 ReactJS - Import and Export of Modules.mp4

09:04

012 ReactJS - Introduction to CSS Modules.mp4

06:21

013 ReactJS - Creating Mobile Responsive Components.mp4

01:36

014 ReactJS - Stateful vs Stateless Components.mp4

02:44

015 ReactJS - Creating Class-based Components.mp4

09:43

016 ReactJS - More about setState() Method.mp4

05:39

017 ReactJS - Passing Props to Class-based Components.mp4

11:01

018 ReactJS - Passing Function as Props.mp4

10:20

019 ReactJS - Practice Problem Product Details Page.mp4

01:31

020 ReactJS - Practice Problem Product Details Page [Solution] - Part 1.mp4

31:37

021 ReactJS - Practice Problem Product Details Page [Solution] - Part 2.mp4

27:21

022 ReactJS - Practice Problem Product Details Page [Solution] - Part 3.mp4

15:49

023 ReactJS - render() method - Behind the scenes.mp4

02:57

024 ReactJS - Component Lifecycle - Creation.mp4

05:52

025 ReactJS - Component Lifecycle - Updation.mp4

06:39

026 ReactJS - shouldComponentUpdate() Lifecycle Method.mp4

05:38

external-links.txt

Description

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

What You'll 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

Who is this for?

Beginners who want to learn Web Development from scratch

Freshers who want to become a React Frontend Developer

Programmers who want to learn Javascript language

Developers who want to learn React JS

What You Need to Know?

Should have basic knowledge of operating Computer

More details

Description
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
Who this course is for:
Beginners who want to learn Web Development from scratch
Freshers who want to become a React Frontend Developer
Programmers who want to learn Javascript language
Developers who want to learn React JS

User Reviews

Rating

average 0

Total votes0

Focused display

EdYoda is re-imagining skill based education, educating on job-relevant real world skills. Edyoda courses are on job-relevant technical skills. We have professional team of instructors, some of the courses we specialize in are Web development, Mobile App Development, Cloud & DevOps, Machine Learning, Artificial Intelligence and Big Data.We believe that access to education and opportunities is the biggest enabler and we are on a mission to enable the same for everyone across the world.

Qaifi Khan

Instructor's Courses

Qaifi is a front-end developer, product designer, and tech evangelist. He has been coding since he was 13 years old. He has worked with numerous technologies over the years. Currently, he is working with HTML, CSS, JavaScript, and React. In the past, he has also worked on Android with Java and Python with Django.He absolutely loves working on the front-end stack and sharing his knowledge with people interested in front-end development. He has more than 3000 hours of fresher training experience. Currently, he is working on a React book for job seekers which will be out by the end of Dec’22.

Mavludin Abdulkadirov

Instructor's Courses

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.