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
form
Different types of input tag
File uploading
Creating dropdown with different options
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.
