Build a Complete Responsive Portfolio Website with React (Part 2/2)
407 بار بازدید -
7 ماه پیش
-
Craft a stunning and responsive
Craft a stunning and responsive portfolio website using React. Learn how to build a complete responsive portfolio website with ReactJS.
React Hooks Mastery: useEffect, useState, useContext Examples
☞ https://morioh.com/p/6dbc8360f0b6
12+ React Projects to Boost Your Skills (with Source Code)
☞ https://morioh.com/p/88190490720d
Lazy Loading in React: Everything You Need to Know to Get Started
☞ https://morioh.com/p/9f2b3b4c7b78
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:
React portfolio website.
Context API to add Dark and Light theme.
Bootstrap to make our website responsive for any device.
Typewriting effect.
React JS Vertical timeline component to show work experience and education section.
React js loads more pagination features.
React js sidebar with collapse features
React js slick slider. You will learn how to show a responsive slider to show testimonials.
React js post request to send email from contact form.
React js conditional rendering to generate different colors for different items.
Node js and express js for sending emails from the backend.
How to test API endpoint in postman for sending an email.
React js animation for different items of our app while loading the first time and scrolling.
How to add back-to-top scroll features in react js front end app.
Theme Features - Dark theme and light theme for our react js app.
How to send email from react js using node js, express js, and send grid.
React on mouse Hover effect
React js Hooks
Bootstrap to make react js app responsively
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:
React smooth scrolling - We will use This package to scroll from one section to another section when user clicks on the navbar.
Typewriting effect - We will use this package to add different types of writing effects to our app.
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.
React toastify - To show toast messages to our users when they send emails from the contact form.
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.
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.
React Vertical Timeline Component - To show work experience and education we will use a vertical timeline component with animation and custom design.
NodeMailer - To send e-maill we will use nodemailer with node js, express js and sendgrid.
What you'll 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
#React #Reactjs #Morioh
____________________________________________
Book for Developer:
📔 Python: https://bit.ly/3REqgBm
📙 JavaScript: https://bit.ly/3RLdPUJ
📘 React: https://bit.ly/3ruQtb7
Please note I may earn a small commission for any purchase through these links - Thanks for supporting the channel!
____________________________________________
Note: If you have any copyright issue with the content used in our channel or you find something that belongs to you, before you claim it to Youtube, SEND US A MESSAGE and the respective content will be DELETED right away. Thanks for understanding.
React Hooks Mastery: useEffect, useState, useContext Examples
☞ https://morioh.com/p/6dbc8360f0b6
12+ React Projects to Boost Your Skills (with Source Code)
☞ https://morioh.com/p/88190490720d
Lazy Loading in React: Everything You Need to Know to Get Started
☞ https://morioh.com/p/9f2b3b4c7b78
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:
React portfolio website.
Context API to add Dark and Light theme.
Bootstrap to make our website responsive for any device.
Typewriting effect.
React JS Vertical timeline component to show work experience and education section.
React js loads more pagination features.
React js sidebar with collapse features
React js slick slider. You will learn how to show a responsive slider to show testimonials.
React js post request to send email from contact form.
React js conditional rendering to generate different colors for different items.
Node js and express js for sending emails from the backend.
How to test API endpoint in postman for sending an email.
React js animation for different items of our app while loading the first time and scrolling.
How to add back-to-top scroll features in react js front end app.
Theme Features - Dark theme and light theme for our react js app.
How to send email from react js using node js, express js, and send grid.
React on mouse Hover effect
React js Hooks
Bootstrap to make react js app responsively
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:
React smooth scrolling - We will use This package to scroll from one section to another section when user clicks on the navbar.
Typewriting effect - We will use this package to add different types of writing effects to our app.
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.
React toastify - To show toast messages to our users when they send emails from the contact form.
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.
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.
React Vertical Timeline Component - To show work experience and education we will use a vertical timeline component with animation and custom design.
NodeMailer - To send e-maill we will use nodemailer with node js, express js and sendgrid.
What you'll 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
#React #Reactjs #Morioh
____________________________________________
Book for Developer:
📔 Python: https://bit.ly/3REqgBm
📙 JavaScript: https://bit.ly/3RLdPUJ
📘 React: https://bit.ly/3ruQtb7
Please note I may earn a small commission for any purchase through these links - Thanks for supporting the channel!
____________________________________________
Note: If you have any copyright issue with the content used in our channel or you find something that belongs to you, before you claim it to Youtube, SEND US A MESSAGE and the respective content will be DELETED right away. Thanks for understanding.
7 ماه پیش
در تاریخ 1402/09/19 منتشر شده
است.
407
بـار بازدید شده