React Responsive Portfolio Website Complete React Project

React Responsive Portfolio Website – Complete React Project, available at $44.99, has an average rating of 4.35, with 42 lectures, based on 58 reviews, and has 6096 subscribers.

You will learn about You will build a complete responsive portfolio website You will learn how to send email from react js app using node js, express js , nodemailer and sendgrid You will learn different kinds of react js hooks You will learn how to add dark and light theme React js Context API How to build responsive website using bootstrap How to deploy react js project to netlify How to download cv from your portfolio website This course is ideal for individuals who are If you want to build a complete portfolio website using react js or If you are learning react js and want to build a complete project or If you want to improve your react js skills or If you want to learn how to build responsive website using react js that will support in any kind of device It is particularly useful for If you want to build a complete portfolio website using react js or If you are learning react js and want to build a complete project or If you want to improve your react js skills or If you want to learn how to build responsive website using react js that will support in any kind of device.

Enroll now: React Responsive Portfolio Website – Complete React Project

Summary

Title: React Responsive Portfolio Website – Complete React Project

Price: $44.99

Average Rating: 4.35

Number of Lectures: 42

Number of Published Lectures: 42

Number of Curriculum Items: 42

Number of Published Curriculum Objects: 42

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

You will build a complete responsive portfolio website

You will learn how to send email from react js app using node js, express js , nodemailer and sendgrid

You will learn different kinds of react js hooks

You will learn how to add dark and light theme

React js Context API

How to build responsive website using bootstrap

How to deploy react js project to netlify

How to download cv from your portfolio website

Who Should Attend

If you want to build a complete portfolio website using react js

If you are learning react js and want to build a complete project

If you want to improve your react js skills

If you want to learn how to build responsive website using react js that will support in any kind of device

Target Audiences

If you want to build a complete portfolio website using react js

If you are learning react js and want to build a complete project

If you want to improve your react js skills

If you want to learn how to build responsive website using react js that will support in any kind of device

Welcome to this react js course. In this course, you will learn how to build a complete responsive portfolio website.After finishing this course you will have a real-world portfolio website and you will learn how to deploy your website to Netlify cloud server so that anyone can from around the world.

Here are the lists that you are gonna learn from this  course:

1. React portfolio website.

2. Context API to add Dark and Light theme.

3. Bootstrap to make our website responsive for any device.

4. Typewriting effect.

5. React JS Vertical timeline component to show work experience and education section.

6. React js loads more pagination features.

7. React js sidebar with collapse features

8. React js slick slider. You will learn how to show a responsive slider to show testimonials.

9. React js post request to send email from contact form.

10. React js conditional rendering to generate different colors for different items.

11. Node js and express js for sending emails from the backend.

12. How to test API endpoint in postman for sending an email.

13. React js animation for different items of our app while loading the first time and scrolling.

14. How to add back-to-top scroll features in react js front end app.

15. Theme Features –  Dark theme and light theme for our react js app.

16. How to send email from react js using node js, express js, and send grid.

17. React on mouse Hover effect

18. React js Hooks

19. Bootstrap to make react js app responsively

20. How to deploy react js app to Netlify.

Dark and Light theme Features:You will learn how to dynamically change react app theme color. We will use react Context API to add dark and light theme features.

React Accordion Features:You will build react accordion system in the project section.  You will also learn how to mark a single item if the accordion is open and onMouseHover Effect.

React Context API: We will use react context API to add dark and light theme features.

React Hooks that you will use to build the complete react js app:

useState

createContext

Different packages that you will use in this course:

1. React smooth scrolling –  We will use This package to scroll from one section to another section when user clicks on the navbar.

2. Typewriting effect – We will use this package to add different types of writing effects to our app.

3. React slick slider – We will use this package for our testimonial section where we will show a list of testimonials in the slider. We will also make sure that our slider is responsive to any device.

4. React toastify –To show toast messages to our users when they send emails from the contact form.

5. Back-to-top scroll –This package will be used for scroll-to-top features. In a single-page web app, we have many sections on one page. Therefore when our user scrolls to the last section of the page the user again needs to scroll to reach the top section. To solve this problem we will use back-to-scroll features so that they can just click on the button and then it automatically goes to the top section.

6. React reveal –This package will help us to show animation for each item. You will learn how to add animation for any fields in your react js app.

7. React Vertical Timeline Component –To show work experience and education we will use a vertical timeline component with animation and custom design.

8. NodeMailer –   To send e-maill we will use nodemailer with node js, express js and sendgrid.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Project Demo – Details Explanation of The Project That You Will Build

Chapter 2: Create Project and Design Sidebar

Lecture 1: Part-1 Create Project and Install Bootstrap

Lecture 2: Part-2 Sidebar Section File Created

Lecture 3: Part-3 Sidebar Expand and Collapse Features

Lecture 4: Part-4 Sidebar Expand Profile Picture and Navbar Items

Lecture 5: Part-5 Sidebar Navbar Item List Design

Chapter 3: Home Section

Lecture 1: Part-6 Home Section Component

Lecture 2: Part-7 Home Section Typewriting Effect

Lecture 3: Part-8 Download CV Features

Chapter 4: About Section

Lecture 1: Part-9 About Section Design

Chapter 5: Tech Stack Section

Lecture 1: Part-10 Tech Stack Section API Design and Show Data

Lecture 2: Part-11 Random Color Generate for Tech Stack Item

Lecture 3: Part-12 Load More Pagination Features

Lecture 4: Part-13 Marked Tech Stack Item Based on the Index Position

Chapter 6: Project Section

Lecture 1: Part-14 Project Section API Design

Lecture 2: Part-15 Project Section Component and Show All the Data

Lecture 3: Part-16 Project Section Accordion Features(Collapse and Show)

Lecture 4: Part-17 React onMouseHoverEffect for Project Lists

Chapter 7: Work experience Section

Lecture 1: Part-18 Work Experience Section API Design & Install Vertical Timeline Component

Lecture 2: Part-19 Show Work Experience Data Into Vertical Timeline Component

Chapter 8: Education Section

Lecture 1: Part-20 Education Section Show Data in Vertical Timeline Component

Chapter 9: Testimonial Section

Lecture 1: Part-21 Testimonial Section API Design and Installed Slick Slider

Lecture 2: Part-22 Implement Slick Slider to Show Testimonial Data

Lecture 3: Part-23 Slick Slider Custom Design for Testimonial Section

Chapter 10: Contact From Section

Lecture 1: Part-24 Create Contact Form Section and Design Input Fields

Lecture 2: Part-25 Contact Form Design

Chapter 11: Scroll to Top Features

Lecture 1: Part-26 Scroll to Top Features and Custom Scroll Bar Design

Chapter 12: Sidebar Menu Smooth Scrolling

Lecture 1: Part-27 Sidebar Menu List Smooth Scrolling to Any Section

Chapter 13: Responsive Navigation Bar for Mobile View

Lecture 1: Part-28 Responsive Navbar for Mobile View

Lecture 2: Part-29 Mobile View Navbar Design

Chapter 14: Responsive Design

Lecture 1: Part-30 Fix Responsive Design Issues

Chapter 15: Dark and Light Theme Features Using Context API

Lecture 1: Part-31 Dark and Light Theme Features Using Context API

Lecture 2: Part-32 Change Component Color for Dark Theme

Lecture 3: Part-33 Switch Features to Change Dark and Light Theme in Mobile View Navbar

Chapter 16: React JS Animation

Lecture 1: Part-34 Add Animation to React Component

Chapter 17: Slick Slider Random Color Generate

Lecture 1: Part-35 Generate Random Color for Slick Slider and Project List Items

Chapter 18: Node JS- Design API Endpoint to Send E-mail

Lecture 1: Part-36 Install Node JS and Config SendGrid to Send E-mail

Lecture 2: Part-37 Create API End Point to Send E-mail

Lecture 3: Part-38 Send E-mail from React Contact form Using Backend API

Lecture 4: Part-39 Show React Toast Message

Chapter 19: Deploy Project to Netllify Cloud Server

Lecture 1: Part-40 Deploy Project to Netlify

Instructors

Yazdani Chowdhury
Software Developer, Android, Flutter, ios UI/UX-Designer

Rating Distribution

1 stars: 1 votes

2 stars: 0 votes

3 stars: 6 votes

4 stars: 18 votes

5 stars: 33 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!