Zero to Hero React JS mastery E-degree course

Become a Pro React JS developer without any prerequisite in a step by step hands-on and project based learning approach

4.46 (50 reviews)
Udemy
platform
English
language
Web Development
category
instructor
5,198
students
26.5 hours
content
Apr 2022
last update
$49.99
regular price

What you will learn

You will become a Pro React JS web developer

You will learn everything about CSS3 & Bootstrap 5

You will learn everything about JavaScript & ES6

You will learn everything about HTML5

You will learn various debugging and troubleshooting tools and techniques

Description

In this course, you will learn everything that is needed for you to become a Pro React JS developer in a hands-on step by step approach.

There is no prerequisite for this course.

Everything will be taught from scratch with practical examples.

Following are the technologies that will be covered:

  • HTML5 concepts

  • HTML5 Projects

  • CSS3 concepts

  • CSS3 Projects

  • JavaScript and ES6 concepts

  • JavaScript and ES6 projects

  • Bootstrap 5 concepts

  • ReactJS (latest version 17) concepts

  • ReactJS projects

The HTML5  topics that will be covered in the course are:

  • Introduction to web development

  • Client-server architecture

  • Three-tier architecture

  • What is HTML

  • What is CSS

  • What is JavaScript

  • Local development environment setup with industry-standard tools

  • Plugins and techniques to speed up development

  • Debugging skills

  • Structure of HTML page

  • HML tag and concept of attributes

  • Various components of HTML document

  • Meta tag and its importance

  • Head tag

  • Link tag

  • Script tag

  • Display tags like h1 until h6

  • Display tags like paragraph, span, division, label

  • Inline vs block elements

  • How to use Entities in HTML

  • Navigation via an anchor tag

  • Button tag

  • Loading images on your website

  • Different utility tags to make text bold, italics emphasize

  • Listing tags like ul, ol

  • Layout tag like table

  • How to create Registration form in HTML

  • Various form tags in HTML like

    1. form

    2. Different types of input tag

    3. File uploading

    4. Creating dropdown with different options

    5. Writing address in textarea

  • Header and Footer tag

  • Section and Article tag

  • Video and Audio tag

  • Loading various websites inside Iframe tag

  • Much more

  • You will get the complete source code so that if you get any doubts anywhere you can just refer the source code.

The topics that will be covered for CSS3 are:

  • Introduction to web development

  • Client-server architecture

  • Three-tier architecture

  • What is HTML

  • What is CSS

  • What is JavaScript

  • Local development environment setup with industry-standard tools

  • Plugins and techniques to speed up development

  • Debugging skills

  • Structure of HTML page

  • HML tag and concept of attributes

  • Various components of HTML document

  • Meta tag and its importance

  • Head tag

  • Link tag

  • Script tag

  • Inline, Embedded, External styling

  • Linking external stylesheet in your Html

  • Using developer tools and knowing various components of it

  • Different types of CSS selectors

  • How to use fonts, colors, border, background style

  • Box model in CSS

  • How to solve problems due to box model

  • Margin and Padding in CSS

  • Display and Visibility

  • Different types of positions in CSS

  • Float and Clear

  • Usage of z-index property

  • Creating layouts using Flexbox

  • Responsive web design using media queries

  • Different types of pseudo-selectors and their usages

  • Box shadow and Text shadow

  • Animation and Keyframes

  • Transition and its types

  • Transformation and its types

  • You will get the complete source code so that if you get any doubts anywhere you can just refer the source code.

Following are the topics that will be covered in Javascript:

  • Setup Installation

  • JavaScript Introduction

  • ECMAScript evolution

  • Different types of Data types in Javascript

  • Variables & Constants

  • Different types of Comments in Javascript

  • Various Operators and their working on Operands

  • String and String manipulation

  • What is Variable Scoping

  • Control statement like if, else, switch-case-break

  • Loops - for, for of, forEach, while, do-while

  • Working with Arrays

  • Working with Objects

  • What are Functions and how to create custom functions and call them

  • What is the use of Prompt

  • What is the use of Confirm

  • What is the use of Alert

  • What is Document Object Model(DOM)

  • DOM manipulation using Javascript

  • Event and Event Listener

  • Set Timeout and Set Interval

  • Clear Timeout and Clear Interval

  • Date and Time operation and using its various methods

  • Working with Math Object

  • Working with JSON

  • Window and document object

  • location and history

  • localStorage and sessionStorage

  • Calling API with Fetch

  • What is the Ternary operator and how to use it.

  • What is the Array Filter function and how to use it.

  • Debugging and Troubleshooting in JavaScript

  • Template literals (Template strings) in ES6

  • Object Destructuring assignment in ES6

  • let and const

  • Spread operator

  • Arrow function expressions

  • We will also do Multiple projects in order to understand different concepts.

  • You will also get the complete source code of the whole course

Following are the topics that will be covered in React JS and Bootstrap:

  • 1.1-ReactJS introduction and environment setup

  • 1.2-create react app

  • 1.3-program flow and project files walkthrough

  • 1.4-types of components in react

  • 1.5-creating and using 1st functional component

  • 1.6-creating 1st stateful class component

  • 1.7-ES6 functional component, export and import

  • 1.8-comparision between functional and class component

  • 1.9-react hooks intro

  • 1.10-jsx explained

  • 1.11-props in functional and class component

  • 1.12-state vs props

  • 1.13-deep dive into setState

  • 1.14-Handling form in class component part-1

  • 1.15-Handling form in class component part-2

  • 1.16-componentDidMount lifecycle onload method

  • 2.1-create new react app and understand project structure

  • 2.2-project cleanup

  • 2.3-installing bootstrap and react vscode extension

  • 2.4-create home about contact page

  • 2.5-creating navbar component

  • 2.6-adding react-router-dom and different routes

  • 2.7-Link and NavLink to avoid page reload

  • 2.8-Designing About and Contact page

  • 2.9-Page not found

  • 2.10-Bootstrap vs React-Bootstrap

  • 2.11-Using custom styling

  • 3.1-setting up backend fake api and db

  • 3.2-useState useEffect axios api call and React Dev Tools extension

  • 3.3-showing all users on frontend UI

  • 3.4-adding action buttons on frontend

  • 3.5-add user navigation routing

  • 3.6-create Add User form

  • 3.7-set state variable data

  • 3.8-save new user to DB via post api call

  • 3.9-another way to save user data in DB using post api

  • 3.10-edit user prepopulate user data

  • 3.11-save updated user in DB

  • 3.12-delete a user

  • 3.13-view user details

  • 3.14-view user address and company info

  • 3.15-showing loading spinner

  • The complete source is also shared.

Screenshots

Zero to Hero React JS mastery E-degree course - Screenshot_01Zero to Hero React JS mastery E-degree course - Screenshot_02Zero to Hero React JS mastery E-degree course - Screenshot_03Zero to Hero React JS mastery E-degree course - Screenshot_04

Content

Mastering HTML5

Course Overview
Introduction to web development
Installation and Setup
html-structure-comments
head-meta-link-script-tags
headings-p-span-div-br-hr-text
anchor-img-tag
Ordered and Unordered list
Table Row Column
Form Input Select Textarea
inline-block-entities-header-footer-section-button-article-audio-video-iframe
Source code for HTML5

Mastering CSS3

Introduction to CSS
Different ways of using CSS
Selectors-in-CSS
Debugging-using-developer-tool
Fonts-in-CSS
Colors-in-CSS
Border-Background-Height-Width
BoxModel-Margin-Padding
float-clear
pseudo-selector
css-display-property
css-position-property
css-visibility-z-index
css-flex-box
css-responsive-units-em-rem-vh-vw
media-queries
advance-pseudo-selector
nth-selector
before-after-pseudo-selector
css-box-text-shadow
css-custom-variables
css-animation-keyframes-part-1
css-animation-keyframes-part-2
transition
transform
Source code CSS3

Mastering JavaScript & ES6

Introduction to the World of JavaScript
JavaScript Popularity and ECMAScript evolution
Installation and setup
Writing your first javascript
datatype and variables
comments in javascript
operators and operands
string concatenation
string functions
scope in javascript
if else switch case
object in javascript
array in javascript
function in javascript
alert prompt confirm parse in javascript
loops in javascript
spread operator
ternary operator
array filter function
understanding DOM
manipulating DOM with javascript
event and event-listener in javascript
setTimeout and clearTimeout
setInterval and clearInterval
Date and Time Part-1
Date and Time Part-2
JSON object and its manipulation
Arrow function
Window, document, localStorage, sessionStorage
Math object and various functions
Project 1
Project 2
Project 3
Source code for JavaScript & ES6

Mastering ReactJS & Bootstrap 5

ReactJS introduction and environment setup
create react app
program flow and project files walkthrough
types of components in react
creating and using 1st functional component
creating 1st stateful class component
ES6 functional component, export and import
comparision between functional and class component
react hooks intro
jsx explained
props in functional and class component
state vs props
deep dive into setState
Handling form in class component part-1
Handling form in class component part-2
componentDidMount lifecycle onload method
create new react app and understand project structure
project cleanup
installing bootstrap and react vscode extention
create home about contact page
creating navbar component
adding react-router-dom and different routes
Link and NavLink to avoid page reload
Designing About and Contact page
Page not found
Bootstrap vs React-Bootstrap
Using custom styling
setting up backend fake api and db
useState useEffect axios api call and React Dev Tools extesion
showing all users on frontend UI
adding action buttons on frontend
add user navigation routing
create Add User form
set state variable data
save new user to DB via post api call
another way to save user data in DB using post api
edit user prepopulate user data
save updated user in DB
delete a user
view user details
view user address and company info
showing loading spinner

Reviews

Myat
December 21, 2021
Good Frontend Development course I like best. Easy to understand the lectures and easy to practice. Thank you so much.
Christian
December 21, 2021
Really enjoy the walking through of content. The instructor does an excellent job at not going too fast. One thing that really hinders my learning is when the instructor types way too fast and or talks too fast.

Charts

Price

Zero to Hero React JS mastery E-degree course - Price chart

Rating

Zero to Hero React JS mastery E-degree course - Ratings chart

Enrollment distribution

Zero to Hero React JS mastery E-degree course - Distribution chart

Coupons

DateDiscountStatus
11/23/2021100% OFF
expired
11/23/2021100% OFF
expired
11/28/2021100% OFF
expired
12/10/2021100% OFF
expired
12/19/2021100% OFF
expired
3/22/202280% OFF
expired
4407888
udemy ID
11/21/2021
course created date
11/23/2021
course indexed date
Ignacio Castro
course submited by