React Portfolio Website Tutorial From Scratch – Build & Deploy React JS Portfolio Website
Hostinger Discount: https://www.hostg.xyz/SH8cs
Responsive React Portfolio Website with Theme Customization (FULL COURSE): https://www.udemy.com/course/react-js-portfolio-website-with-theme-customization/?referralCode=91FE72E9328ADD7A3214
Source Code, Assets & Live Demo: https://www.buymeacoffee.com/egator/e/56809
Become a patron: https://patreon.com/egator
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!
Assets: https://drive.google.com/file/d/18FpIv7YdbzermIl1yIzT-afqA10qxDTW/view?usp=sharing
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
source
Thank you so much for such a good video from basic to advance
1:19:29
1:06:41
whats your github name?
hostinger is not free ….
Great tutorial. Good job ЁЯЩВ
we can not not update our info without code it is not a good way you should add something like admin panel
doing all css from the beggining seems terrible. instead of explaining the logic behind structure and components. could be improved vastly
nice
I have reached till service.css.Everything is working perfectly except the css part of the experience and Service.I have rechecked my code part all of that is looking good.What would be the issue?
how can u just copy and paste that data object and not provide that to us? so are we supposed to just write the entire thing?
please i need a help whatsapp link just open the whatsapp app but not going to chat with number , how can i fix it ?
You are selling the code thay why don't grow @ EGATOR bad for community also teach for money.
Great ЁЯСН
how would you guys implement a state change for the menu bar when scrolling down?
3 and half hour video took me 3 and half day to finish itЁЯШЕ…
Thank youЁЯЩМ
Sir one humble request and many people searching for that content that sir please make a complete a video for how to making a complete website for google adsense approval without issues. I watching your all video and your are one of the honest youtuber you watching your subscriber all comment please sir…
can we host this anywhere for free?
Thanks for the beautiful tutorial. I have created my portfolio website with the help of this video. could you please make the short lesson for how to redirect the http to https in react and I have another problem also when I try to access my site with https Favicon didn't appeared.
Amazing bro I had a lot of fun learning thanks in advance
You're funny, man.
"A few moments later"
"Why can't I type today?"
"C'mon"
"This is the president"
ЁЯдгЁЯдг
The best part about your tutorial is that you don't wave your hand at the CSS.
at least provide live link of this website . i want to practice ЁЯШП
I like the way you explain things in this video. would like to see more videos on react websites. thanks!
ok Done: it's for absolute beginners: course anyone with 5% html and css can do it with no difficulty
1:15:00
Thank you! this is a nice video.
Can you possibly recommend a complete course for front end?
I have to say that this is the best React video ever released, it helps a lot. Thanks for the good work.
did u use redux or redux toolkit?
I don't know why i can't see my USER ID in my Email Js
Thank you so much for this , you have simplified everything , you have made the carrer so easy for me , This is what i needed
I'm not even halfway yet and already smiling alone in my condor. This is the kind of exposure I was looking for to make everything click. I just finished Scrimba's react course and didn't know what next, but I'm glad I came across this tutorial. From now on, I should be comfortable with React. Thanks for this fantastic content, it's what I needed.
this. course full ?
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 ЁЯЩМ
Hello! Thank you for your time. I am very new to react, this is a great tutorial. I have a question, in 1:49:29 you added a className='experience__details-icon' in multiple icon tag at once! What shortcut did you use to do that?
can you please share array file
Could you share the github code please?
This is the BEST tutorial. Thank you
1:02:52 I got stuck here from last 3 hour I am try but I don't why my image is not showing properly ЁЯЩГ please help me any one .
very grateful to find this channel because here I learn many new things in the field of programming тЭд. Thank you very much for the knowledge shared
Thanks God Bless You
Heloo bro can you please share picture folder
Thank you so much for this tutorial. This helps me a lot in building up skills in Developer