You will learn everything about Bootstrap 5 and how to use different Bootstrap css classes
You will learn about ReactJs and its concepts and how to use Bootstrap 5 with ReactJs
You will learn to create a fully functional website using Bootstrap5 with ReactJs with Login and Signup
You will learn to integrate GET, POST, PUT, DELETE REST API’s with ReactJs Application using Fetch and Axios library
You will learn about Redux state management and Context API and how to use them together
You will learn to use Google Fonts and Font Awesome Icons
You will learn about Responsive Web Development
You will learn the debugging and troubleshooting techniques
In this course, you will learn to develop any kind of modern website using HTML, CSS, Bootstrap 5 and ReactJs.
We will also learn about Redux state management with Context API to hide show functionality based on User session.
We will start by setting up our local development environment, first we will learn to install Visual Studio Code editor, then we will go ahead and install NodeJS runtime.
We will be consuming Remote REST API to perform various operations with the help of GET, POST, PUT, DELETE endpoints.
Next we will move on to creating the first react app, then we will move on to understanding how a create application work.
Get Instant Notification of New Courses on our
Telegram channel.
We will understand the folder structure of the ReactJs project and understand the ReactJs lifecycle and how different aspects works.
We will then move on to integrating Bootstrap 5, Font Awesome, Google Fonts, npm packages into our ReactJs project.
We will Create a complete fully functional professional website with different sections like:
- Navigation Bar
- Footer
- Hero section with Carousel and Slider
- Featured Posts section
- Latest Posts section
- Call to Action section
- Our Portfolio section
- Contact us form
- About us page
- Footer section with different parts like Quick Links, Newsletter and Contact Address
- Create Posts
- All Posts
- Update Post
- Delete Post
- Login
- Signup
- Dynamic navigation
- Redux , Context API
We will make sure our website is professional and responsive in different kinds of devices.
After this course, you will be a pro frontend developer in modern web technologies.
Introduction & Setup
Course Introduction
Install Visual Studio Code editor
Installing NodeJS runtime
Create React App and Start Dev Server
Understanding React Project Structure & Lifecycle
Integrating Bootstrap5 Google fonts and FontAwesome
Designing NavBar, Aboutus, Contactus with routing
Creating 1st React Component The NavBar
Styling NavBar Component with Bootstrap5 NavBar
Customizing NavBar Menu
Creating About and Contact page
Installing npm package for react-router-dom
Adding Routing for All the components
Single Page behaviour on menu items click with NavLink
Designing Aboutus Page Header Section
Designing Aboutus Page Content Section
Styling our Contact us Form with Bootstrap – part 1
Styling our Contact us Form with Bootstrap – part 2
Designing Footer, Home Page & Call to Action
Designing Footer Section Layout – Part 1
Designing Footer Section Heading – Part 2
Designing Footer Quick Links – Part 3
Designing Footer Newsletter – Part 4
Designing Footer Contact Address – Part 5
Home Page Layout
Designing Home Page Hero Section Slider
Designing Home Page Featured Post Section
Designing Home Page Latest Post Section
Designing Home Page Portfolio Section
Add Home Link to the Nav Bar
Designing Call To Action section
Working on All Posts and Post Detail with REST API Integration
Create All Post page and Link to NavBar navigation
Designing All Posts Page
Understanding REST API for Getting Post Data
React Hooks useState and useEffect to call Posts API and store data on page l
Show Posts data on UI by Looping all data
Showing Loading icon while the data is Fetched from the REST API
Adding API Base Url to config file and using it everywhere
Dynamic Routing passing data from one component to another
Get Post and User data from REST API call
Design Layout of Post Detail page
Destructing and setting Post and User data from Response to State variables
Displaying Post and User information on Screen
Styling the Post Detail and All Posts image
Implementing opening email and phone functionality
Working on Create, Edit, Delete Post functionality with API Integration
Implementing Create Post functionality
Alert message for Success and error scenarios
Update All Posts with Edit and Delete buttons
Edit Post reuse the Create Post flow
Testing edit and Create Post functionality
Delete Post and Show Alert message after deletion
Delete Confirmation Yes or No
Reload All Posts after deletion
Add a back button on Post Detail screen
Working on Signup, Login & Logout with API Integration
Creating Login and Signup screen with navigation
Axios Post Call for User Registration
Saving User data and Show success Alert Message
Clearing Signup Form Data after login
User Login with API call
Storing User data and Token secret in localStorage
User Session, Dynamic Menu, Redux, Context API
What is Redux and Why we need it
Define User Reducer with different actions
Props VS Context API
Implement Restricted Routes based on User Session with Context API and Redux
Dispatch Action to Reducer after successful login
Implementing Logout Functionality
Implement Dynamic Menu based on User session
Get All Posts For Logged in User
Testing All Functionality End to End
