Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React JS- Complete Guide for Frontend Web Development
Rating: 4.1 out of 5(5,764 ratings)
246,066 students

React JS- Complete Guide for Frontend Web Development

Become an expert React JS Developer. Learn HTML, CSS, JavaScript, ES6, React JS and jQuery.
Created byEdYoda for Business, Qaifi Khan, Mavludin Abdulkadirov
Last updated 5/2024
English

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

Course content

6 sections • 202 lectures • 21h 57m total length

  • HTML - Introduction1:54

    Hey guys, in this course, we will learn all about HTML5.

    We will start from basic topics like adding headings, paragraphs, images, etc and will move towards more advanced topics like adding forms, vector graphics, multimedia and so on.


    Hope you are excited to start your journey to become a Web Developer!!

  • HTML - Code Editor Setup5:23

    Hey guys, in this video we will explore different code editor options. We will talk about - Notepad, Codepen.io and Visual Studio Code.

  • HTML - Structure of an HTML Document3:33

    Hey guys, in this video we will learn about the document structure of an HTML page, What are HTML tags, What different tags mean and much more.


  • HTML - Adding Heading in a Webpage2:41

    Hey guys, in this video we will learn all about heading in HTML.

  • HTML - Adding Paragraph in a Webpage4:13

    Hey guys, in this video we will learn how to add a paragraph in a webpage? How add line breaks? How to make text bold? How to make text italics? and much more.

  • HTML - Adding Images in Web Pages6:09

    Hey guys, in this video we will learn how to add images in an HTML Web Page

  • HTML - Creating Ordered and Unordered Lists6:55

    Hey guys, in this video we will learn all about Lists in HTML, Different types of lists and much more.

  • HTML - Adding Styles and Formatting HTML Elements10:23

    Hey guys, in this video we will learn How to add styles and format our HTML elements to make them look pretty and neat.

  • HTML - Block and Inline Display Values6:51

    Hey guys, in this video we will learn about Block and Inline Elements.

  • HTML - Adding group styles using Class attribute6:06

    Hey guys, in this video we will learn how to add styles to a group of HTML elements using the class attribute.

  • HTML - Adding HyperLinks in Webpages4:16

    Hey guys, in this video we will learn How to add links in an HTML Webpage.

  • HTML - Using links to connect Webpages3:16

    Hey guys, in this video we will learn how to redirect from one webpage to another.

  • HTML - Uniquely Identify HTML Element by using ID attribute4:34

    Hey guys, in this video we will see how to uniquely identify HTML elements by using the ID attribute.

  • HTML - Mini-Project 1: Favorite Foods Webpage0:47

    Hey guys, this is the project to create a static page of Favourite Foods.

    Attempt this project to brush-up on the concepts that you have learned so far.

    Use codepen.io to create this project.

  • HTML - Mini-Project 1: Solution12:18

    Hey guys, in this video we have designed the Solution for the Mini-Project 1: Favourite Foods Problem statement.

  • HTML - What makes HTML5 Better?2:09

    Hey guys, in this video we will learn about all the new features in HTML5.

  • HTML - New Elements & Attributes in HTML50:52

    Hey guys, in this video we will explore all the new elements and attributes in HTML5

  • HTML - Design Page Structure Using Semantic Elements9:38

    Hey guys, in this video we will learn how to design page structure using the HTML5 semantic elements.

  • HTML - New Semantic Elements: <details> and <summary>3:24

    Hey guys, in this video we will explore how to use the new <details> and <summary> semantic tags.

  • HTML - Introduction to Tables6:25

    Hey guys, in this video we will learn how to design tables in HTML.

  • HTML - Span table rows and columns2:55

    Hey guys, in this video we will learn how to span rows and columns across tables.

  • HTML - Design layouts using Tables5:49

    Hey guys, in this video we will learn how to design a gallery grid using tables.

  • HTML Tables - Practice Problem 10:41

    Hey guys, this is the practice problem for the tables module. Try it on codepen.io.

  • HTML Tables - Practice Problem 1: Solution13:31

    Hey guys, this is the solution for the Table Practice Problem that I gave in the previous video.

  • HTML - Introduction to Forms4:03

    Hey guys, in this video we will learn How to create a basic login form using HTML.

  • HTML - Form Input Types8:15

    Hey guys, in this video we will explore more about input types in forms

  • HTML - Adding Styles to Forms5:41

    Hey guys, in this video we will learn how to add styling to HTML form and it's elements.

  • HTML - Form Methods: GET and POST5:17

    Hey guys, in this video we learn all about the two form methods - GET and POST.

  • HTML - New Form Elements3:46

    Hey guys, in this video we will explore the new form elements introduced in HTML5.

  • HTML - New Form Input Types5:50

    Hey guys, in this video we will explore the new form input types introduced in HTML5

  • HTML - New Form Input Attributes3:53

    Hey guys, in this video we will explore the new form input attributes introduced in HTML5.

  • HTML - Form Validation5:08

    Hey guys, in this video we will learn about Form Validation.

  • HTML - Forms Practice Problem 10:48

    Hey guys,

    These are the details for the Forms Practice Problem 1:

    Image Links:

    • Google Logo: http://pluspng.com/img-png/google-logo-png-open-2000.png

    • Facebook Logo: https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png

    • Github Logo: https://image.flaticon.com/icons/svg/25/25231.svg

    • LinkedIn Logo: https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/linkedin_circle-512.png


    Webpage:

    Background Color Code: #f2f6ff


    Form:

    Border Color: #ccc

    Border Width: 1px


    Form Heading:

    Font Size: 32px

    Padding-Top: 56px

    Padding-Bottom: 32px


    Social Icons:

    Width: 50px

    Height: 50px

    Padding Top and Bottom: 16px

    Padding Left and Right: 32px


    Input Fields Container:

    Padding Top: 80px

    Padding Bottom: 40px

    Padding Left and Right: 80px


    Input Box:

    Font Size: 18px

    Padding Bottom: 12px

    Margin Bottom: 36px

    Border Top, Left, Right: 0

    Border Bottom: 1px solid #ccc


    Submit Button:

    Background Color: #0056ff

    Padding Top and Bottom: 12px

    Padding Left and Right: 24px

    Font Size: 18px

    Font Color: white

    Border: None


    Have Fun !!

  • HTML - Forms Practice Problem 1 - Solution10:25

    Hey guys, this is the video solution for the Forms Practice Problem 1.

  • HTML - Adding Videos in a Webpage3:33

    Hey guys, in this video we will learn how to add videos in a webpage.

  • HTML - Adding Audio in a Webpage3:13

    Hey guys, in this video we will learn how to add audio files in a webpage.

  • HTML - The <embed> element1:48

    Hey guys, in this video we will learn how to play unsupported video and audio files in HTML5

  • HTML - Embed Youtube Videos in a Webpage2:57

    Hey guys, in this video we will learn how to embed a youtube video in an HTML page

  • HTML - Introduction to SVG8:53

    Hey guys, in this video we will learn about:

    1. What is SVG in HTML5

    2. How to create a line using SVG

  • HTML - Create circle using SVG7:00

    Hey guys, in this video we will learn how to create a circle using SVG element.

  • HTML - Create a rectangle using SVG5:48

    Hey guys, in this video we will learn how to create a rectangle using SVG.

  • HTML - Final Project1:43

    Hello guys, this is Final Project for the HTML Module.

    Give it your best. Once you have completed it, you can add the project to the GitHub repository.

    You need to create a new GitHub repository and push the local project files to this repository.

    You can find a PDF file in the resources section that will help you push your local code to the GitHub repository.

    I can't wait to see what all you guys design. All the Best :)

Requirements

  • Should have basic knowledge of operating Computer

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

Report abuse