Это видео недоступно.
Сожалеем об этом.
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)
HTML-код
- Опубликовано: 13 авг 2024
- React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website
Hostinger Discount: www.hostg.xyz/...
Responsive React Portfolio Website with Theme Customization (FULL COURSE): www.udemy.com/...
Source Code, Assets & Live Demo: www.buymeacoff...
Become a patron: / 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 RUclips!
Assets: drive.google.c...
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
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!
facts
factos
факты
bro i want to write this comment , hhhh thanx anyway u right bro
facte
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.
Hey Curran, Can u please provide the deployed link of your portfolio project?
Good day.
I trust that you're good. I'm more than 90% done with this project. I'm only having problem with the image in the section and the image in the section.
I used another image because I don't have the means to become Egator's Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed Egator closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
@@SDG-xu6pe I think yours wasnt transparent
can u provide me the source code of this project shown in the video
So, as long as this video help me modeling my own portfólio, i'd like to give a missing implementation for everyone who wants it. Basically, if you scroll the screen up and down, nav doesn't change automatically, so i made an implementation for that.
Header and Footer where not sections, so i had to implement conditionals to verificate if its the case do change. The case of header is simple, but for this implementation works on footer, i had to put an id footer on footer component in Footer.jsx.
To implement that, you hav to put a similar code before Return the Nav.jsx Component:
useEffect(() => {
const handleScroll = () => {
const sections = document.querySelectorAll('section');
const header = document.querySelector('header');
const footer = document.querySelector('footer');
const scrollPosition = window.scrollY || document.documentElement.scrollTop;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
for (let i = sections.length - 1; i >= 0; i--) {
const section = sections[i];
const sectionId = `#${section.id}`;
const sectionOffsetTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
if (
scrollPosition >= sectionOffsetTop - windowHeight * 0.7 &&
(scrollPosition < sectionOffsetTop + sectionHeight ||
scrollPosition >= documentHeight - windowHeight - footer.offsetHeight)
) {
setActiveNav(sectionId);
break;
}
}
// Verificar se o scrollPosition está no footer
if (
scrollPosition >= documentHeight - windowHeight - footer.offsetHeight &&
scrollPosition {
window.removeEventListener('scroll', handleScroll);
};
}, []);
Dont forget of import useEffect from 'react'. Hope i help someone like this video helped me.
This is the portfolio i'd made based on video design: lamenkazu.github.io/portifolio/
this is a nice touch! thanks for this
What is your github username
You are one hell of a man! Next generation content creator!
I've been watching RUclips 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
The key to big returns is not big moving stocks. It's managing risk in relationship to reward. Having the correct size on and turning your edge as many times as necessary to reach your goal. That holds true from long term investing to day trading
May I ask which stocks are good? I've been looking at a few different ones but want others' opinions as well
what i think you need is a Financial Adviser, who can help you get in and out of any stock you buy at any time and you'd sure be in Profit
who would you recommend?
*TERESA JENSEN WHITE,* That's whom i work with
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! 😀
This is one of those videos that I was able to watch and learn without needing stop because of complicated errors. I was able to make my first full stylized website thanks to you . I appreciate your work and Thank you so much ❤️❤️
same here
Can you please help me out I am stuck @Ashwin K
@@sabakhalid6628 What seems to be the problem ??
@@aswink2290 hey can you please give me ther source code
Sry I am having trouble posting the link here. Idk what's happening, every time I comment the link it gets deleted after sometime.
So plz look up ' Asterdev-03 ' and the repository is ' react-portfolio'.
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.
header and About section part is showing error can u please help😟
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
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!
I have completed 30% of the tutorial and I have almost no error while trying to code. Plus I'm learning a lot!! I plan to gather more skills and make a beautiful website for display like this.😀
Thank You Very Much @EGATOR !!
Good day.
I trust that you're good. I'm more than 95% done with this project. I'm only having problem with the image in the section and the image in the section.
I used another image because I don't have the means to become Egator's Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed Egator closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
@@SDG-xu6pe Congrats!! Yes, its problem with the image itself. Same happened with me too. Need to adjust size and quality.
@@SDG-xu6pe can you pls tell the size of the image should I use to get over from that image problem .I am using the same image as sir is using in the video ( download the assets folder from the description )
@@dataphile can you pls tell the size of the image should I use to get over from that image problem .I am using the same image as sir is using in the video ( download the assets folder from the description )
@@SDG-xu6pe the same error with me too .. did you find the solution ?
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!
Please make more videos of react, I have learned a lot! I feel really excited!
@Banned Rengar can u please share ur livesite are what are u made by followed by this course!
Good day.
I trust God that you're good. I'm more than 90% done with this project. I'm only having problem with the image in the section and the image in the section.
I used another image because I don't have the means to become Egator's Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed Egator closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
He explained his code pretty good. I definitely gotta start talking on my videos then
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
Dude.. i sat for straight 20 hours and finally completed the project. Thanks for the smoothest video ever.
Good day.
I trust that you're good. I'm more than 95% done with this project. I'm only having problem with the image in the section and the image in the section.
I used another image because I don't have the means to become Egator's Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed Egator closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
@@SDG-xu6pe can you pls tell the size of the image should I use to get over from that image problem .I am using the same image as sir is using in the video ( download the assets folder from the description )
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.
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!
This person is totally different from every youtuber on RUclips. His videos are remarkable and incredible... I love the way he explains everything from just the basic and fundamentals. I totally love him. Thank you sir for your invaluable videos.
Lots of love n support sir
Thankyou 💗💗💗
The best part about your tutorial is that you don't wave your hand at the CSS.
This is one of the best React/CSS tutorials, I learned a lot and thank you !!
Hello Egator, I wanna say a big thank you for this tutorial, I made my first react app with this and learnt a lot in the process. Thank you for your meticulousness, the time stamps, the detailed explanations and just everything about the video. I would have loved to give you a shout out on Twitter, but it seems you're not on Twitter.
Once again, thank you.
Good day.
I trust God that you're good. I'm more than 90% done with this project. I'm only having problem with the image in the section and the image in the section.
I used another image because I don't have the means to become Egator's Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed Egator closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
can you please share code
@@27meghana42 sure, how
How intelligent you are
thanks man you completed my dream to make a beautiful portfolio with reactjs thank you so much
i'm only 30minutes in and really this video deserves 1M views what a detailed buildup!, this is what i call C-O-D-I-N-G❤❤❤❤thanks!
Hii u make portfolio or not
Manh you are putting Africa on the map🤜🏿✅
First video and I subscribed... That shows how good your design is. Happy to be part of the family 😊
Same here
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 🙌
Bro Bro, i was having so much trouble trying to understand react, i come to your tutorial all of sudden i feel confident as hell to make my own react website, great work!
Great tutorial! Really loved it! One suggestion: in the experience element, we can create a separate react component for the Article and pass the skill name and skill level as props. This will reduce the repetitions a lot!
noticed that too for the about section...
Thank you very much for the contents you create.
It really helped me in learning web development.
Keep on creating good and useful contents.
I'm waiting for your other interesting contents.
Thank you very much.
Thank you...
Thank you so much . I learned and created my own portfolio website all because of 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...
Nice! love react material! keep up the good work!
Achieva, you doing a good job bro. Keep it up
Nyo nyo nyo nyo nyo🤘🤩
As a Ghanaian and getting to know that this Guy too is a Ghanaian has boosted my confidence level...🥰
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
amazing tutorial, direct to the point, easy to follow. thank you for sharing god bless
I wish that the floating nav could automatically update active link while scrolling down.
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
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
As a newcomer to ReactJS - I love your approach. You definately earned my subscription! Hope you make more videos in the future!
thank you for this amazing tutortial and also thank you for splitting in chapters because now i can do 5 chapters a day and than practice those 5 chapters until next day
Upadate: Don't copy CSS step by step it might not go same for every screen. like i have wide screen and some of the css stylization didn't got things right so i had to change some parameters
how did you make the css styling dynamic for every screen. Do you have github link to code?
Yea I found the same. The header becomes clipped depending on the screen size. I've been tinkering for a while but haven't solved it properly yet.
Thanks for this awesome project! Currently at 49:00, and I'm thoroughly enjoying building such a beautiful portfolio website.
However, I noticed that you didn't import the index.css file in the Header and CTA component.. but still your components accepted the styles declared in the index.css file. Can you please tell me why is this happening?
This is happening because we import index.css into the index.js. This js file calls App.jsx -> Header.jsx -> CTA.jsx. So the tags in the CTA.jsx file are able to reference in the styling in the index.css
Now if you are like me, you may have written ".a" (styling a class named "a") in the index.css file vs "a" (styling the hyperlink tag)
@@SamuraiGamers thank you! That actually makes sense. So, will I be correct in assuming that this phenomenon is known as CSS inheritance or something similar?
@@darkknight4205 I'm glad I could help! I'm still fairly new to this and uncertain with the exact lingo, but I would say yes.
I haven't watched this yet--going to!--but if he uses a standard "vanilla css style sheet" and calls it into index.js, which it sounds like he does, then that style sheet has global scope and can be accessed from any component. This can be both good and bad, as you can end up with style conflicts. That's why styled components as a means of controlling css to limit it to the component is written in is so popular. You may want to check out styled components as you move forward with your React journey!
Hey please send the codelink if you done your code .
3:23:13 thank you my dear friend! god bless you!
Thank you so much for this fantastic video. I learnt a lot about css and react. Much more than my teacher learnt me in months. Keep up the good work. This was really helpful. So grateful 😀
Thank you for amazing tutorials,i am newbie in React,but know how to code in generally in VSCode,but i am stuck in the 46:00 Section,my web is running slow and can't see any text inside the page.
Doesn't it show any error in the terminal? If yes, pasted it (:
Its not
@@orendaec my case is i'm getting a blank page no error is in terminal just getting blank page when i want to see my components working on the page like at 27:23
@@faizanahmed2853 It may be a link error, check that the components are in the folders you import
Thank you man. Wow, I always wanted to learn front-end development and I definitely learned a lot throughout the whole build!! Thanks to you I built my first site ;) Cheers and thank you for all the effort that you are putting in your videos. Simply awesome brother
Bro I have a problem can u solve that
@@shubhanshubb yeah tell me
this is actually one of the best portfolio i have seen easy to understand and your explanation while you code makes it so interesting. thanks a millions times. you are the best
Thanks for the tutorial, learnt a lot from this video. Thank you❤💯
Amzing very clean and well defined. Thanks for tutorial
The design is copied from bedimcodes, do checkout his channel as well.
Hey Balram! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?
@@shivani9840 Hey Shivani, I am interested in Web Development opportunities.
and the timestamps are on point too! I am really greatfull for the file structure you showed as well.
Hot tutorial ‼️ 🔥, I'm half away from finishing the video and I learned a lot of new things 👌, TY
This is the best porfolio website i had ever seen on RUclips
React is what I need now 😍😍😍 man you’re good 🇬🇭 🇬🇭🇬🇭🇬🇭
Thank you so much for this! I was able to deploy my first website and was able to understand React more! Thank you so so much again!!
Good day.
I trust that you're good. I'm more than 90% done with this project. I'm only having problem with the image in the section and the image in the section.
I used another image because I don't have the means to become Egator's Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed Egator closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
Thank you so much for being such a nice person and helping software beginners
A real gem of a tutorial.
i need help can you help ?
My English is still not that good, but it was still a great video! I've never worked with React and really the way you explain things and how you have everything perfectly ordered helped me a lot even if I'm not very good at listening to English. Thanks a lot, you really did a great job on your video! You are amazing!
Thank you, I coded while watching this video, I deployed my own responsive portfolio website. I made some tweaks, i didn't want floating nav, i wanted a simpler footer. I modified them.
Good day.
I trust that you're good. I'm more than 90% done with this project. I'm only having problem with the image in the section and the image in the section.
I used another image because I don't have the means to become Egator's Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed Egator closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
@@SDG-xu6pe can you pls tell the size of the image should I use to get over from that image problem .I am using the same image as sir is using in the video ( download the assets folder from the description )
Oh bro your UI is professional i love it
You're funny, man.
"A few moments later"
"Why can't I type today?"
"C'mon"
"This is the president"
🤣🤣
Hands down one of the best React portfolio tutorials out here. Excellent work Sir! 👏🏿
Thanks for this great project man. I was getting confuse how to make portfolio and it also helped me with understanding how to make website responsive. A lots of respect 🙏🙏🙏
I have to say that this is the best React video ever released, it helps a lot. Thanks for the good work.
Can u please share your code bro
guys React is not happy about this ( target="_blank" ) so it will give u a warning for some security reason so the solution is here ( target="_blank" rel="noopener noreferrer" ) so type it like that ok happy coding and thanx to this channel
I added an extra `_` to `_blank` and it helped fixed the error
@@danielmorales6617 That way you can only open that new window once. You could give it any name. It could be even "blank" or "potatos". But with "_blank" you open as many as you want because it's a nameless new tab and "_blank" is a reserved word.
Thank you so much for this , you have simplified everything , you have made the carrer so easy for me , This is what i needed
Can u please share the source code, what u made
Extremely helpful especially for react beginners who wants to build a real-world project
3 and half hour video took me 3 and half day to finish it😅...
Thank you🙌
best tutorial ever man! hands up greetings from argentina
Perfect tutorial, I love the way you do it, very didactic and explaining perfectly, new subscriber.. Thanks!!
Subscribed man, expecting lot of React projects from your channel.
I got you
The amount of things that I learned watching this video is simply amazing!!! Thanks
This is the best React Video Tutorials i have seen on the internet. Thanks sir very much for your time and effort.
I’m glad you find it helpful, Asare.
Eish! Shatta Wale make your list too?😂 Big ups man, you do all for the tutorial🙌👏 I go like make we connect for Whatsapp.
A very complete tutorial, thank you very much.
hello
Please i am having an issue with the conditional statement set in the Nav.jsx for the .active class. i would appreciate any help. The active class doesnt activate on clicking the icons. Thank you
Having the same issue here … it doesn’t give background lighter colour and icon doesn’t change - code is as per video. 🤔
Thank you, I have successfully made my portfolio and learned a lot of concepts too... appreciate it
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!
Good day, Egator.
I trust God that you're good. I'm more than 95% done with this project. I'm only having problem with the image in the section and the image in the section.
I used a personal image because I don't have the means to become a Patreon at the moment but I plan to be whenever I have the means.
I'm not sure if it's the quality of the image or if my code is wrong. I followed you closely on the code but didn't get it. So, I strongly suspect the quality of the image I used.
in app.jsx i list all the components and import but in my web am not able to see them listed
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
The best tutorial by far! Thank you so much! :)
I'm so happy to start the 2023 with this amazing tutorial thank you so much sir🙏
You are very welcome
Thank you so much for this tutorial. This helps me a lot in building up skills in Developer
This is really good. Perfect to learn! Beginner friendly! Just the same the comments below, amazing! Greetings from Argentina!
Thank you,
I enjoyed building this project.
there are no bullets appearing under my testimonials...
EDIT: Wow nevermind... i think there's a problem with adblock doing something to it because it appears find in Chrome without the extension
Great video. I really love to see more videos like this from you and learn more stuff. Thanks a lot.
I like the way you explain things in this video. would like to see more videos on react websites. thanks!
Completed.
Thanks so much for this great tutorial, Egator.
Glad it helped!
Thanks so much! I am new to react and after following this tutorial, I understood a lot of things that will help me later on.
Gracias por compartir...... una recomendacion cuando se usa;
target='_blank'
es recomendable añadir
rel="noopener noreferrer"
sir ur video is amazing god bless u
Finished it today. Thanks, EGATOR 🥰
This is the BEST tutorial. Thank you
The video was great I watched it until the end and learned many things thanks for the great content 😍🔥
I love this tutorial mahn!.. the way you did it is amazing.
The local stars names kraaa make me love it..
Thanks a lot! One thing remaining is to set the navigation icons to active when the user scrolls to the sections. I think intersection observer will do that.
Yeah. I may add that feature in a future project. Thanks bruh
Love you since I learned some advance django from your channel.
Everything is working perfectly now.
Nice
This has been so helpful, you've done a great work