Tutorialspoint

April Learning Carnival is here, Use code FEST10 for an extra 10% off

React Responsive Portfolio Website - Complete React Project

person icon Yazdani Chowdhury

4.6

React Responsive Portfolio Website - Complete React Project

Build React Portfolio Website, React Context API, Send E-mail from React App, React Hooks, React Packages, React theme

updated on icon Updated on Apr, 2024

language icon Language - English

person icon Yazdani Chowdhury

category icon Development,Web Development,React

Lectures -41

Resources -1

Duration -10 hours

4.6

price-loader

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

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.

Who this course is for:

  • If you want to build a complete portfolio website using react js
  • If you are learning to 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 a responsive website using react js that will support any kind of device

Goals

What will you learn in this course:

  • 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 a responsive website using bootstrap

  • How to deploy respond js project to netlify

  • How to download cv from your portfolio website

Prerequisites

What are the prerequisites for this course?

  • Students don't need to have any prior knowledge of react js for this course

React Responsive Portfolio Website - Complete React Project

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction
1 Lectures
  • play icon Introduction 02:42 02:42
Create Project and Design Sidebar
5 Lectures
Tutorialspoint
Home Section
3 Lectures
Tutorialspoint
About Section
1 Lectures
Tutorialspoint
Tech Stack Section
4 Lectures
Tutorialspoint
Project Section
4 Lectures
Tutorialspoint
Work experience Section
2 Lectures
Tutorialspoint
Education Section
1 Lectures
Tutorialspoint
Testimonial Section
3 Lectures
Tutorialspoint
Contact From Section
2 Lectures
Tutorialspoint
Scroll to Top Features
1 Lectures
Tutorialspoint
Sidebar Menu Smooth Scrolling
1 Lectures
Tutorialspoint
Responsive Navigation Bar for Mobile View
2 Lectures
Tutorialspoint
Responsive Design
1 Lectures
Tutorialspoint
Dark and Light Theme Features Using Context API
3 Lectures
Tutorialspoint
React JS Animation
1 Lectures
Tutorialspoint
Slick Slider Random Color Generate
1 Lectures
Tutorialspoint
Node JS- Design API Endpoint to Send E-mail
4 Lectures
Tutorialspoint
Deploy Project to Netllify Cloud Server
1 Lectures
Tutorialspoint

Instructor Details

Yazdani Chowdhury

Yazdani Chowdhury

Hi! If you want to know a little bit about me then here are a few things about me: I am a full-stack software developer and currently working in a German software company located in Berlin, Germany. I have been doing programming for over 6 years now. I have completed my graduation in software engineering. In the beginning, I started my career as a mobile developer. I worked as an android and ios app developer.  After working with a couple of big software companies I started teaching on Udemy.

It's been 5 years since I am creating courses for Udemy. I like to share my coding skills with my students. So that they can learn from me and build their career as a software developer. The feelings are really good when I get a mail from my students that they got a  job after completing my courses. That encourages me to create more and more courses... Till now I taught over 107,370 students from around the world.

Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Feedbacks

I

Ibnu Akil

a good start

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515