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

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

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.