React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)

React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website

In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch! By the end of this video, you will know how to create a react app from scratch, how to use the react icons library in your react projects, how to use react useState hooks, how to build modern website designs with CSS3, how to use SwiperJS (to create carousels/slides) in your react projects, how to add multiple contact options on your website (WhatsApp, Facebook Messenger, and Direct form submission using EmailJS), and more!

No prior react knowledge is required for this tutorial, as I will be explaining every step along the way.
Now Let's Build The Best React Personal Portfolio Website On YouTube!

Timestamps
00:00:00 Intro (Project Overview)
00:08:43 Buying Hosting & Claiming Free Domain on Hostinger
00:11:38 Installing Node & VSCode
00:12:21 Assets
00:12:56 Creating our React App using npx create-react-app
00:14:22 Managing and Creating files & folders
00:20:15 Creating all Components
00:27:40 CSS Variables & General CSS Styles
00:45:00 Header Component JSX
00:52:42 Installing React Icons and Using them in our project
00:56:18 Header Component CSS
01:04:20 Header Component Responsive Design
01:06:45 Floating Nav Component JSX
01:13:57 Floating Nav Component CSS
01:18:00 Managing Nav States using useState Hook
01:21:43 About Component JSX
01:28:29 About Component CSS
01:35:15 About Component Responsive Design
01:38:45 Experience Component JSX
01:44:17 Experience Component CSS
01:50:40 Experience Component Responsive Design
01:53:35 Services Component JSX
01:57:25 Services Component CSS
02:02:35 Services Component Responsive Design
02:04:15 Portfolio Component JSX
02:10:10 Portfolio Component CSS
02:14:45 Portfolio Component Responsive Design
02:16:02 Generating Portfolio Items from Array using map method
02:20:44 Testimonials Component JSX
02:24:03 Testimonials Component CSS
02:29:15 Testimonials Component Responsive Design
02:30:26 Generating Testimonials from Array using map method
02:33:40 Creating Carousel/Slides using SwiperJS
02:40:23 Contact Component JSX (Multiple contact options: Facebook Messenger, WhatsApp & Email)
02:51:02 Contact Component CSS
02:57:02 Contact Component Responsive Design
02:58:34 Form Submission using EmailJS
03:07:43 Footer Component JSX
03:11:53 Footer Component CSS
03:16:30 Footer Component Responsive Design
03:18:50 Deploying Our React Website

#reactjs #reactportfoliowebsite #reactjsprojects

[cmdaltctr]

I love the fact that you actually talk while you code, unlike some videos doing speed runs with crazy music in the background. Thank you so much!

[allanfernz]

I cannot thank you enough! This was such an amazing tutorial from start to finish. I was afraid of react but after this tutorial I can say I'm so much confident! Thank you again! 😀

[matthewgerloff]

I appreciate you for making this video! Hoping to use this as the framework for my own portfolio with some personalized tweaks, plus this doubles as some excellent react training! Keep up the great content

[rnd]

I've been watching Youtube tutorials for like last 3 month and the only tutorial i found in which the tutor explains the CSS and does not copy it from somewhere is this video . CSS is a very underrated factor in front-end development no one cares about.
Thanks sir for this good tutorial and LOVE when you say C'mon after every Typo LUL

[urbanadventures]

You're amazing just I wanted to say. Your file structure, way of teaching the concepts are really as good as a professional instructor's even better all of them. Thank you

[mariamaoune]

This was an amazing tutorial, sometimes hard to find on youtube. Thank you for sharing your knowledge and helping all of us. Felt so easy to follow!

[mikorecare]

I started my project using Angular right away and I thought learning react would be hard but there you are... You've enlightened those dark areas in my mind. Thanks a lot

[tanayasharma]

This is the best react tutorial i have come across, a lot of tutorials end up adding so many libraries that becomes hard to grasp in a single video

[nirajankarki]

Super tutorial for react beginners like me. This is a complete package for learning react as well as css. First react tutorial where css is also taken care properly. Everything is perfect and mastered, the way you explain things is next level... hats off to you man..! Learnt a lot from this tutoral. Huge ton of thanks!

[ThePrototypist]

sheer pleasure, I am speechless, this has to be by far the most intuitive and informative course on react I have ever seen, thanks for breaking things down and making such a wonderful video, you have gained a lifetime subscriber I look forward to go through all the other courses that you offer. #you are a great teacher, keep it up and thanks once again.

[harrypartridge]

This absolutely brilliant tutorial didn't miss anything. Really helped me understand CSS and how to make my own customizations. Great learning resource! Thank you!

[reginaldmercer]

Great walkthrough, I learned a lot more than if I was just reading from a book and trying to figure it out. Your accent is also very easy to understand, which isn't the case for many people who do these sort of videos. I'm definitely following your future content as a subscriber

[MrPanyako]

You are one hell of a man! Next generation content creator!

[thanushanx]

This is one of the best React/CSS tutorials, I learned a lot and thank you !!

[kenmuyesu]

Hands down one of the best React portfolio tutorials out here. Excellent work Sir! 👏🏿

[mohammedshibani]

Extremely helpful especially for react beginners who wants to build a real-world project

[tjcurran]

Well I can't thank you enough. My version of this sleek, modern portfolio site is up and running. This is a big milestone for me and likely every future-dev out there. I won't forget who helped along the way. My hats is off sir.

[giratinaMagicRush]

This was such a pleasure to follow. You explain a lot of the HTML and general structure of the code. Learned a lot about CSS conventions and styling as well. I followed the entire tutorial, and now I'm excited to learn more and build upon this and make it my own. Thank you for the amazing tutorial!

[floram]

Whenever I see post on Twitter about pls share your personal website for referrals I see lots of people have this design I was curious from where they build then finally searched for tutorial and found this video 🙌

[anonysmooth]

amazing tutorial, direct to the point, easy to follow. thank you for sharing god bless