Complete React Project: Responsive Portfolio Website in React
In this course, you will learn how to create a comprehensive responsive portfolio website. After completing this course, you’ll have a functioning portfolio website and know how to publish it to the N...
- All levels
- English
Course Description
In this course, you will learn how to create a comprehensive responsive portfolio website. After completing this course, you’ll have a functioning portfolio website and know how to publish it to the Netlify cloud server so that anybody in the world may see it. - Dark and Light theme Features: You will learn how to dynamically change react app theme color. We will use react Context API to add d...
In this course, you will learn how to create a comprehensive responsive portfolio website. After completing this course, you’ll have a functioning portfolio website and know how to publish it to the Netlify cloud server so that anybody in the world may see it. - 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. -- Various software programs you’ll utilize in this course include: 1. React smooth scrolling: When a user clicks on the navbar, we’ll utilize this package to smoothly glide from one area to the next. 2. Typewriting Effects: Using this package, we’ll provide our app with a variety of writing effects. 3. React sleek slider: We’ll use this package to display a list of testimonials in a slider in our testimonials section. Additionally, we’ll make sure that every device can use our slider. 4. React toastify: When users submit emails from the contact form, React Toasty displays toast messages to them. 5. Back-to-top scroll: This package will be used for scroll-to-top features. Back-to-top scrolling We have several components on one page in a single-page web application. As a result, after reaching the page’s last portion, our user must scroll once more to get to the top of the page. We’ll employ back-to-scroll capabilities to address this issue, so that users may just click a button to get to the top area without having to scroll. 6. React reveal: With the assistance of this package, we may display animation for each item. In your ReactJS project, you will learn how to apply motion to any field. 7. React Vertical Timeline Component: We’ll use a vertical timeline component with animation and a unique design to demonstrate professional experience and education. 8. NodeMailer: We’ll utilize nodemailer with node JS, Express JS, and SendGrid to send an email.
What you’ll learn
- You’ll create a fully functional, responsive portfolio website.
- You will learn how to use Node JS, Express JS, Nodemailer, and SendGrid to send emails from the React JS application.
- You’ll discover many JS hook types
- How to add dark and light themes will be covered.
- API for context in ReactJS
- How to use Bootstrap to create a responsive website
- How to Deploy a ReactJS Project Using Netlify
- How to get a CV from the internet for your portfolio
Covering Topics
site for a reaction portfolio.
Use the Context API to add Dark and Light themes.
Our website is mobile-responsive thanks to Bootstrap.
written-word impact
To show the job experience and education sections, use the vertical timeline component in React JS.
More pagination options are available in ReactJS.
Sidebar for ReactJS with collapse capabilities.
A cool ReactJS slider
You’ll learn how to display testimonials using a responsive slider.
Email sending with ReactJS post request from the contact form.
Conditional rendering is a technique used by ReactJS to provide unique colors for various elements.
Express.js and Node.js are used to send emails from the backend.
How to use Postman to test an API endpoint for sending emails.
ReactJS animation for various app elements during initial loading and scrolling.
This is the best way to add back-to-top scrolling to a ReactJS front-end application.
Features of our ReactJS app’s themes include a dark theme and a bright theme.
How to send email from React JS using SendGrid, Express JS, and node JS.
Hovering mouse effect
JS Hooks for React
Making responsive React JS applications using Bootstrap
I am deploying a ReactJS application to Netlify.
Curriculum
Frequently Asked Questions
This course includes
- Lectures 19
- Duration 10 Hour
- Month 00 Month
- Language English
- Certificate No