React JS- Complete Guide for Frontend Web Development [2023]
- Description
- Curriculum
- FAQ
- Reviews
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
-
1
HTML - IntroductionHey 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!!
-
2
HTML - Code Editor Setup
Hey guys, in this video we will explore different code editor options. We will talk about - Notepad, Codepen.io and Visual Studio Code.
-
3
HTML - Structure of an HTML Document
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.
-
4
HTML - Adding Heading in a Webpage
Hey guys, in this video we will learn all about heading in HTML.
-
5
HTML - Adding Paragraph in a Webpage
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.
-
6
HTML - Adding Images in Web Pages
Hey guys, in this video we will learn how to add images in an HTML Web Page
-
7
HTML - Creating Ordered and Unordered Lists
Hey guys, in this video we will learn all about Lists in HTML, Different types of lists and much more.
-
8
HTML - Adding Styles and Formatting HTML Elements
Hey guys, in this video we will learn How to add styles and format our HTML elements to make them look pretty and neat.
-
9
HTML - Block and Inline Display Values
Hey guys, in this video we will learn about Block and Inline Elements.
-
10
HTML - Adding group styles using Class attribute
Hey guys, in this video we will learn how to add styles to a group of HTML elements using the class attribute.
-
11
HTML - Adding HyperLinks in Webpages
Hey guys, in this video we will learn How to add links in an HTML Webpage.
-
12
HTML - Using links to connect Webpages
Hey guys, in this video we will learn how to redirect from one webpage to another.
-
13
HTML - Uniquely Identify HTML Element by using ID attribute
Hey guys, in this video we will see how to uniquely identify HTML elements by using the ID attribute.
-
14
HTML - Mini-Project 1: Favorite Foods Webpage
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.
-
15
HTML - Mini-Project 1: Solution
Hey guys, in this video we have designed the Solution for the Mini-Project 1: Favourite Foods Problem statement.
-
16
HTML - What makes HTML5 Better?
Hey guys, in this video we will learn about all the new features in HTML5.
-
17
HTML - New Elements & Attributes in HTML5
Hey guys, in this video we will explore all the new elements and attributes in HTML5
-
18
HTML - Design Page Structure Using Semantic Elements
Hey guys, in this video we will learn how to design page structure using the HTML5 semantic elements.
-
19
HTML - New Semantic Elements: <details> and <summary>
Hey guys, in this video we will explore how to use the new <details> and <summary> semantic tags.
-
20
HTML - Introduction to Tables
Hey guys, in this video we will learn how to design tables in HTML.
-
21
HTML - Span table rows and columns
Hey guys, in this video we will learn how to span rows and columns across tables.
-
22
HTML - Design layouts using Tables
Hey guys, in this video we will learn how to design a gallery grid using tables.
-
23
HTML Tables - Practice Problem 1
Hey guys, this is the practice problem for the tables module. Try it on codepen.io.
-
24
HTML Tables - Practice Problem 1: Solution
Hey guys, this is the solution for the Table Practice Problem that I gave in the previous video.
-
25
HTML - Introduction to Forms
Hey guys, in this video we will learn How to create a basic login form using HTML.
-
26
HTML - Form Input Types
Hey guys, in this video we will explore more about input types in forms
-
27
HTML - Adding Styles to Forms
Hey guys, in this video we will learn how to add styling to HTML form and it's elements.
-
28
HTML - Form Methods: GET and POST
Hey guys, in this video we learn all about the two form methods - GET and POST.
-
29
HTML - New Form Elements
Hey guys, in this video we will explore the new form elements introduced in HTML5.
-
30
HTML - New Form Input Types
Hey guys, in this video we will explore the new form input types introduced in HTML5
-
31
HTML - New Form Input Attributes
Hey guys, in this video we will explore the new form input attributes introduced in HTML5.
-
32
HTML - Form Validation
Hey guys, in this video we will learn about Form Validation.
-
33
HTML - Forms Practice Problem 1
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 !!
-
34
HTML - Forms Practice Problem 1 - Solution
Hey guys, this is the video solution for the Forms Practice Problem 1.
-
35
HTML - Adding Videos in a Webpage
Hey guys, in this video we will learn how to add videos in a webpage.
-
36
HTML - Adding Audio in a Webpage
Hey guys, in this video we will learn how to add audio files in a webpage.
-
37
HTML - The <embed> element
Hey guys, in this video we will learn how to play unsupported video and audio files in HTML5
-
38
HTML - Embed Youtube Videos in a Webpage
Hey guys, in this video we will learn how to embed a youtube video in an HTML page
-
39
HTML - Introduction to SVG
Hey guys, in this video we will learn about:
What is SVG in HTML5
How to create a line using SVG
-
40
HTML - Create circle using SVG
Hey guys, in this video we will learn how to create a circle using SVG element.
-
41
HTML - Create a rectangle using SVG
Hey guys, in this video we will learn how to create a rectangle using SVG.
-
42
HTML - Final Project
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 :)
-
43
CSS - Introduction
Hey guys, in this module we will learn all about CSS right from the basic topics like styling texts and images to advanced topics like responsive design and CSS animations.
After completing this module you will be able to convert your normal HTML structure to a beautiful static web page with a nice touch of animations which will make it more interesting!
This is the introductory video of CSS. In this video, we will talk about
What is CSS?
What is the syntax for CSS?
What are selectors?
What are the different ways to select the HTML element?
Hope you are excited!!
-
44
CSS - How to use CSS?
Hey guys, in this video we will learn about different ways to write CSS in HTML - Inline CSS, Internal CSS and External CSS.
-
45
CSS - Styling Text
Hey guys, in this video we will learn how to add styles to text using CSS.
-
46
CSS - Adding Borders
Hey guys, in this video we will learn all about Borders in CSS.
-
47
CSS - Margin and Padding
Hey guys, in this video we will learn all about margin and padding in CSS.
-
48
CSS - Styling Lists
Hey guys, in this video we will learn how to style lists using CSS.
-
49
CSS - Styling Links
Hey guys, in this video we will learn how to add styles to links using CSS.
-
50
CSS - Styling Buttons
Hey guys, in this video we will learn how to add styles to HTML Buttons.
-
51
CSS - Adding Icons
Hey guys, in this video we will learn how to add icons to buttons.
-
52
CSS - Working with Display Values
Hey guys, in this video we will learn about different display values and how to change these values using CSS.
-
53
CSS - Display value: Inline-Block
Hey guys, in this video we will learn how to work with display value inline-block.
-
54
CSS - Positioning HTML Elements Part-1
Hey guys, in this video we will learn about different position values and how we can use them to position our HTML elements.
-
55
CSS - Positioning HTML Elements Part-2
Hey guys, in this video we will learn how to position HTML elements using CSS position property.
-
56
CSS - Handling Content Overflow
Hey guys, in this video we will learn how to handle overflowing content using CSS.
-
57
CSS - Floating HTML Elements
Hey guys, in this video we will learn how to float HTML elements left and right.
-
58
CSS - Box Model
Hey guys, in this video we will learn about the CSS Box Model.
-
59
CSS - Box Sizing
Hey guys, in this video we will learn about the box sizing property of CSS.
-
60
CSS - Adding Shadows
Hey guys, in this video we will learn How to add shadows to text and HTML elements.
-
61
CSS - Combinators Part-1
Hey guys, in this video we will learn how to combinators to select HTML elements for styling.
-
62
CSS - Combinators Part-2
Hey guys, in this video we will learn about combinators and how to use them to select HTML elements for styling.
-
63
CSS - Pseudo Classes Part-1
Hey guys, in this video we will learn How to use pseudo classes.
-
64
CSS - Pseudo Classes Part-2
Hey guys, in this video we will learn How to use Pseudo classes.
-
65
CSS - Pseudo Elements
Hey guys, in this video we will learn about Pseudo Elements.
-
66
CSS - Adding Backgrounds
Hey guys, in this video we will learn How to add background to HTML elements.
-
67
CSS - Gradients
Hey guys, in this video we will learn about Linear and Radial Gradient.
-
68
CSS - Handling Text Overflow
Hey guys, in this video we will learn about handling text overflow.
-
69
CSS - Practice Problem-1: Create Google.com Look-Alike
Hey guys, please find below the details and styles required for the project.
All the Best!!
Body
font-family: Arial, sans-serif;
Menu Items:
font-size: 13px;
color: rgba(0, 0, 0, 0.87)
Profile Pic
width: 32px;
height: 32px;
Search Box
width: 582px
color: #222
border: 1px solid #dfe1e5;
font-size: 13px
padding: 14px
border-radius: 24px
Search Box: OnHover and OnFocus
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);
Button
background color #f2f2f2
color: #5F6368;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0,0,0,0);
color: #222;
Button: On-Hover
background-image:linear-gradient(top,#f8f8f8,#f1f1f1);
border: 1px solid #c6c6c6;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
color: #222;
Dropdown Application Card:
width: 285px;
padding: 28px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
App Item
display: inline-block
width: 84px;
App Item: On-Hover
border: 1px solid rgba(0, 0, 0, 0.2);
App Item Image:
width: 50px;
height: 50px;
App Item Label:
color: rgba(0,0,0,0.87)
Images:
Google Center Logo: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
Voice Search Icon: https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png
App - Google Search: http://pluspng.com/img-png/google-logo-png-open-2000.png
App - Maps: http://pluspng.com/img-png/google-maps-png-google-maps-icon-1600.png
App - Drive: https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png
App - Calendar: https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Google-calendar.svg/1024px-Google-calendar.svg.png
App - Photos: https://blogs.acu.edu/innovation_foundry/files/2017/06/google_photos1600.png
App - Keep: https://i.pinimg.com/originals/09/96/92/099692d1d651d51b7caf3040fce0f748.png
App Menu Icon:
Use Google Material Icons:
Add this in HTML head element: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Use this to generate icon: <i id="dropdown-menu" class="material-icons">apps</i>
-
70
CSS - Practice Problem-1: Create Google.com Look-Alike Solution
Hey guys, in this video we will try to create the webpage that I gave as an assignment in the previous video.
-
71
CSS - Introduction to Responsive Web Design
Hey guys, in this video we will learn about Responsive Web Design.
-
72
CSS - Viewport
Hey guys, in this video we will learn about Viewport.
-
73
CSS - Dynamic Size
Hey guys, in this video we will talk about Dynamic Width and Height.
-
74
CSS - Introduction to Media Queries
Hey guys, in this video we will learn about Media Queries.
-
75
CSS - Responsive Webpage Design using Media Queries
Hey guys, in this video we will create a responsive webpage using Media Queries.
-
76
CSS - Flex Layout
Hey guys, in this video we will learn about Flex Layout.
-
77
CSS - Flex Container Properties
Hey guys, in this video we will learn about Flex Container Properties.
-
78
CSS - Align Flex Items
Hey guys, in this video we will learn How to align Flex Items.
-
79
CSS - Flex Item Properties
Hey guys, in this video we will learn about Flex Item Properties.
-
80
CSS - Design Topbar using Flex
Hey guys, in this video we will learn How to design topbar using Flex layout.
-
81
CSS - Responsive Grid using Flex
Hey guys, in this video we will learn How to design a Responsive Grid using Flex.
-
82
CSS - Transform Property
Hey guys, in this video we will learn all about transform property.
-
83
CSS - Align Elements using Transform Property
Hey guys, in this video we will learn How to align items in center using transform property.
-
84
CSS - Transition Property
Hey guys, in this video we will learn about the transition property.
-
85
CSS - Animation Property
Hey guys, in this video we will learn all about animation property.
-
86
CSS - Flying Rocket Animation using Animation Property
Hey guys, in this video we will learn how to animate HTML Elements
-
87
CSS - Introduction to Grid Layout
Hey guys, in this video we will learn about Grid Layout.
-
88
CSS - Grid Container Properties
Hey guys, in this video we will talk about the Grig Container properties.
-
89
CSS - Grid Item Properties
Hey guys, in this video we will talk about the Grig Item properties.
-
90
CSS - Final Project Problem Statement
Hey guys, please find below all the details required to design each section.
Demo Website: https://demoapi-43d03.firebaseapp.com/
Reference Image: https://edyoda.s3.ap-south-1.amazonaws.com/public/Project++Page+Design+-+Color+Codes-01.png
========================================
Section 1:
Background Image: https://edyoda.s3.ap-south-1.amazonaws.com/public/landing-background.png
Topbar Logo URL: https://mobirise.com/extensions/organicamp/assets/images/logo1.jpg
Menu Items:
Font Family: 'Poppins', sans-serif;
Text Color: black;
Font Thickness: 600;
Font Size: 14px;
Dropdown:
Font Family: 'Poppins', sans-serif;
Top Border: 2px solid rgb(170, 210, 54);
Background Color: white;
Shadow: 0 2px 5px #ccc;
Buy-Now Button:
Font Family: 'Poppins', sans-serif;
Text Size: 12px;
Font Thickness: 600;
Text Color: white;
Background Color: rgb(170, 210, 54);
Padding: 9px 34px;
Border Radius: 4px;
Section 1 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;
Letter Spacing: 8.8px;
Line Height: 1.2;
Section 1 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Font Thickness: 400;
Color: #8b8b99;
==============================
Section 2:
Step 1:
icon: <i class="fa fa-cut"></i>
Background color: #5acda6
Step 2:
icon: <i class="fa fa-paint-brush"></i>
Background color: #91ac41;
Step 3:
icon: <i class="fa fa-shopping-bag"></i>
Background color: #e4b476;
Step 4:
icon: <i class="far fa-smile"></i>
Background color: #f69dad;
Step Icon Width/Font-Size: 96px;
Step Label:
Font Family: 'Poppins', sans-serif;
Font Thickness: 600;
Text Size: 24px;
Step Description:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Line Height: 1.6;
==============================
Section 3:
Background color: #f7eee2;
Fresh Food Text:
Text Color: #91ac41;
Text Size: 24px;
Font Family: 'Caveat', cursive;
Margin: 0;
Margin Top: 35px;
Section 3 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;
Section 3 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 500;
Text Color: #8b8b99;
Letter Spacing: 0.5px;
Icon 1:
<i class="fa fa-camera">
Icon 2:
<i class="fa-rocket fa">
Icon 3:
<i class="fab fa-twitter">
Icon 4:
<i class="fab fa-weixin"></i>
Item Icon:
Background Color: #e3b375
Width/Font-Size: 60px;
Item Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 24px;
Font Thickness: 600;
Item Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Letter Spacing: 0.5px;
Font Thickness: 500;
Text Color: #8b8b99;
==============================
Section 4:
Fresh Food Text:
Text Color: #91ac41;
Text Size: 24px;
Font Family: 'Caveat', cursive;
Margin: 0;
Margin Top: 35px;
Section 4 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;
Section 4 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 500;
Text Color: #8b8b99;
Letter Spacing: 0.5px;
Testimonial Image 1:
URL: https://mobirise.com/extensions/organicamp/assets/images/face5.jpg
Testimonial Image 2:
URL: https://mobirise.com/extensions/organicamp/assets/images/face6.jpg
Testimonial Image 3:
URL: https://mobirise.com/extensions/organicamp/assets/images/face7.jpg
Testimonial Card:
Background Color: #f5f6fb;
Top-left Border Radius: 45px;
Bottom-left Border Radius: 45px;
Bottom-right Border Radius: 45px;
Testimonial Card Image:
Border Radius: 50%;
Width: 80px;
Testimonial Card Message:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Font Style: Italic;
Text Color: #8b8b99;
Testimonial Card Author:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 600;
Testimonial Card Author:
Font Family: 'Poppins', sans-serif;
Text Size: 12px;
Text Color: #8b8b99;
Font Style: Italic;
==============================
Section 5:
Left Image URL: https://mobirise.com/extensions/organicamp/assets/images/19.jpg
Right Background Image: https://edyoda.s3.ap-south-1.amazonaws.com/public/strawberry-white.png
Subscribe Button:
Background Color: #f69dad;
==============================
Section 6:
Stats Item Green Color:
==============================
Section 7:
Video URL: https://player.vimeo.com/video/275412279
==============================
Section 8:
Figure it out. The styles are same as other sections.
==============================
Section 9:
Footer Background Color: #232323
==============================
ALL THE BEST!!
