React JS Personal Portfolio Website | Beginner friendly tutorial
Vložit
- čas přidán 28. 07. 2024
- This tutorial is going to teach you how to build and design your own personal portfolio using one of the best JavaScript libraries, React JS.
This tutorial is also beginner friendly so if you have zero ideas about React, at the end of this tutorial, you would be able to build your own portfolio using React JS.
Build your next awesome project:
www.tubebuddy.com/quicknav/la...
Copy Code / GitHub Repo with Assets (GREEN BUTTON ➡️ DOWNLOAD AS ZIP )
github.com/Ade-mir/react-js-p...
Deployed Website
my-awesome-react-project.netl...
Netlify
www.netlify.com/
Chapters
00:00 What we are building / Finished portfolio website
01:23 Installing prerequisites
07:11 Setting up file structure
15:17 HeroSection.jsx
48:58 Navbar.jsx
1:15:43 MySkills.jsx
1:36:58 AbouMe.jsx
2:04:52 Testimonial.jsx and ContactMe.jsx
2:31:39 Footer.jsx
2:43:09 Deploying on Netlify
Full credit for the Figma design that inspired this Project goes to:
www.airdokan.com/
This video shows how to make the form work: czcams.com/video/ZtAEXhpTJXk/video.html
Great tutorial! Thank you!
Thank you! 🙏
Best tutorial yet for beginners for me at least Slow & Understandable.
Awesome, happy you are enjoying!
Amazing 😍❤...keep it sir 👏
Thank you very much, I will! 😊🙏
You are doing a great job man
Thank you man!
Thank you so much for this project this help me alots .Love from Nepal
I'm happy to hear that! Much love right back!
Thank you thankyu thankyou so much. You are amazing 🎉 thankyu tons and tons
My greatest pleasure, glad it was of help! 😊
@howtobecomeadeveloper thank you. I have been planning to convert the one you did with vanilla JS into React. This is great!
So cool, glad to hear it! 😊🙌
Build your next awesome project:
www.tubebuddy.com/quicknav/latest/UCkXqOdpo5ul8BosGBFlDgmw
Thank you so much sir ❤❤
You're very welcome!
Which link are we using to download the json and the public files?
Can you explain me the logic for the useEffect in the NavBar? 1. Why did you use the useEffect hook twice, couldn't you make a single function to use it once? 2. Also wanted to ask why if the width is
im having issue with importing footer to index file. how do i fix it?
Hi @howtobecomeadeveloper i got struck at 1:52:16 where you have replaced with different p after writing it by myself watching your code. in myPortfolio section the fields like front-end and back-end and all four were not displaying, can you please help me i have been trying from 20days
Hi , to anyone that can help,
may i know , after uploading the website , if there is something i want to change or add , how should i do that ??
Thank you
Hello Nice Craft on this one very superb, But Please the checkbox has this weird behaviour of sticky at the top when scroll on on desktop screens............Please how do i fix that?
The tutorial was good, but it would be helpful if you also explained the contact form and where the credentials go and get stored for beginners. But really helpful, thank you so much.
Noted for next time, thank you!
This one is for you 😉 czcams.com/video/ZtAEXhpTJXk/video.html
Thank you ,
and if possible can you please show a tutorial for small business using react and tailwind
Absolutely, tutorials like this are coming up! 🙌
@@howtobecomeadeveloper Thank you , Hope to learn better React and tailwind from you 🙂
Newest video is is perfect for you! 😊 czcams.com/video/v9q7g9SJkL0/video.htmlsi=vuN9WOHQ4GodO4U_
does this use cra or vite?
where is the package json
Nice tutorial but can be much better with explanation of some concepts used in the project.
Noted thank you, I will take this into account in the next videos!
Hellon nice video but I have a question about the responsive, I did'n find how to style the componentes to the mobile screen ( in which minute please)
At 2 hours and 40 minutes, I decided to let you copy the rest of the CSS code to save time, and this part includes the responsiveness. The reference code is in the description 😊
Please,how do I put my projects website links in the portfolio section ?
Bro Use anchor tags to give the links
Thank you so much for the tutorial. Could you let us know how do you make the "Contact me" form to a functional form from the dummy one?
This will be an upcomign video, thank you for suggesting!
This one is for you 😉 czcams.com/video/ZtAEXhpTJXk/video.html
Hi... Can you please help me in these? 1.) how to active Get in touch btn? 2.) When fill the contact form that time where data suppose to be submit and how to send/recieve email ? 3.)How to join github project link in portfolio?
1) you can use an email to link in html, or open a link to a profile you have like linkedin, or send them to contact form section.
2) This video shows how to setup a form: czcams.com/video/ldwlOzRvYOU/video.html
3) You just forward to your github repo url.
Hope it helps!
How do you set the links to your actual github from the Portfolio section
Several ways, wrapping btn in an anchor, or using onClick events:
stackoverflow.com/questions/41080481/in-reactjs-how-to-invoke-link-click-via-button-press
I know nothing about React but I do want to learn this skill. Do I need to learn JavaScript before heading to this course?
That's great! Yes, i absolutely think you should learn some JavaScript first. It will make it much easier to understand what is going on. I can highly reccomend the tutorials by Mosh here on CZcams. Then come back and delve into React. Good luck! 😊🙌
hey, you have used tailwing in your code right?
How do I setup , I coudlnt do it following the tailwind documentation
Tailwind was not used for this project, just plain CSS 👍
Newest video is is perfect for you if you want to learn to setup Tailwind! 😊 czcams.com/video/v9q7g9SJkL0/video.htmlsi=vuN9WOHQ4GodO4U_
Came across ur video Loved ur tutorials bro Pls How can I make the view in GitHub Link in the index.json file for the portfolio clickable and it actually takes one to the GitHub repo of a project displayed.
Hi I am new on React , can u please create a tutorial for beginner to start on react js
Absolutely, thank you for the suggestion!
This is not normal css right? I mean pretty hard to understand how you code those css parts in the very beaning of the Project even though didn't code the div parts of other sections.
This is normal CSS indeed.
Hi bro. Can't find the github SVG. Where can i get it?
Copy it from here:
github.com/Ade-mir/react-js-personal-portfolio/blob/main/src/Pages/Home/Footer.jsx
Why are you using decimal numbers for px?
That is an oversight on my part, as I write code usually using rem, then sometimes convert it to px for the user experience of the tutorial. Its still valid sizing, but it will just be rounded to the closest whole number :)
I have a question. Which used css program ?
It is vanilla CSS :)
Unsure if I missed it throughout the tutorial, but how were you able to link the "Contact Me" info to send the message to your email?
There will be a separate video coming out soon on this!
May I know what size the image is?
You can see the size of the image in the asset folder :)
Apart from the lack of "actual teaching", as this is just spoon-feeding with a guy mumbling while re-typing written scripts, this is a great video to demo beginners what a built portfolio website looks like.
What would you have liked instead of this spoon serving mumbling guy?
hi,when i try to upload on netlify it's shows me error how can i solve it? @howtobecomeadeveloper
Hi! Look into the error and see which line in your code it references. If there is no line, google the error message, this should point you in the correct direction, good luck!
@@howtobecomeadeveloperThank you for your reply.I set just my netlify.toml for index.html so it's just got that's so now error is gone but it didn't get more pages to render so I can see only white blank screen without any error so if you set any netlify.toml or webconfig.js at time of hosting on netlify then can you share it with me?