Unknown: explode(): Passing null to parameter #2 ($string) of type string is deprecated in /home/skilramit/htdocs/www.skilr.com/public/catalog/controller/product/product.php on line 502Web Development Bootcamp Online Course | Skilr Learning
This course provides a complete guide to modern frontend development with React, Redux, and the Context API. You’ll begin by setting up your development environment with VS Code and Node.js, then learn to consume APIs using GET, POST, PUT, and DELETE endpoints. Next, you’ll build your first React app while integrating Bootstrap 5, FontAwesome, Google Fonts, and key NPM packages to enhance design and functionality. You’ll create a professional website with features like navigation, hero sections, carousels, portfolio showcases, and contact pages. Alongside UI design, you’ll implement CRUD operations, authentication, dynamic navigation, and efficient state management using Redux and Context API.
By the end, you’ll have the skills to build professional, feature-rich, and visually appealing web applications.
Who should take this Course?
This course is ideal for aspiring frontend developers, web designers, and JavaScript programmers who want to master React and modern web technologies. Beginners with basic HTML, CSS, and JavaScript knowledge can quickly advance by building real-world projects. It also suits developers aiming to improve their state management skills with Redux and Context API. Anyone looking to create scalable, dynamic, and visually engaging web applications will find this course highly valuable.
What you will learn
Learn about Bootstrap 5 and how to use different Bootstrap CSS classes
Gain insights into ReactJS project organization and optimize performance
Learn to integrate GET, POST, PUT, DELETE REST APIs with React app
Study Redux state management and Context API, and how to use them together
Understand how to use Google Fonts and Font Awesome Icons
Study and implement the Responsive Web Development
Course Outline
Introduction and Setup
Course Introduction
Install Visual Studio Code editor
Installing NodeJS runtime
Create React App and Start Dev Server
Understanding React Project Structure and Lifecycle
Integrating Bootstrap5, Google Fonts, and FontAwesome
Designing NavBar, About us, Contact us with Routing
Creating First React Component the NavBar
Styling NavBar Component with Bootstrap5 NavBar
Customizing NavBar Menu
Creating About and Contact Pages
Installing NPM Package for react-router-dom
Adding Routing for All the Components
Single Page Behavior on Menu Items Click with NavLink
Designing About Us Page Header Section
Designing About Us Page Content Section
Styling Our Contact Us Form with Bootstrap - Part 1
Styling Our Contact Us Form with Bootstrap - Part 2
Designing Footer, Homepage, and 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
Homepage Layout
Designing Homepage Hero Section Slider
Designing Homepage Featured Post Section
Designing Homepage Latest Post Section
Designing Homepage Portfolio Section
Add Home Link to the NavBar
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
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 a 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
Destructuring 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 Images
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 the Post Detail Screen
Working on Signup, Login, and Logout with API Integration
Creating Login and Signup Screen with Navigation
Axios Post Call for User Registration
Saving User Data and Showing Success Alert Message
Clearing Signup Form Data after Login
User Login with an 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 Versus Context API
Implement Restricted Routes Based on User Session with Context API and Redux