React JS Personal Portfolio Website | Beginner friendly tutorial

Подписаться 15 тыс.

Просмотров 70 тыс.

50% 1

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/

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@howtobecomeadeveloper 25 дней назад

This video shows how to make the form work: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZtAEXhpTJXk.html

@4eB4eJluoc 9 месяцев назад

Great tutorial! Thank you!

@howtobecomeadeveloper 9 месяцев назад

Thank you! 🙏

@cheerio4742 3 месяца назад

Best tutorial yet for beginners for me at least Slow & Understandable.

@howtobecomeadeveloper 3 месяца назад

Awesome, happy you are enjoying!

@mohd.vaseem7410 9 месяцев назад

You are doing a great job man

@howtobecomeadeveloper 9 месяцев назад

Thank you man!

@Aman_yadav1419 9 месяцев назад

Amazing 😍❤...keep it sir 👏

@howtobecomeadeveloper 9 месяцев назад

Thank you very much, I will! 😊🙏

@milkywaymontage3263 9 месяцев назад

Thank you so much for this project this help me alots .Love from Nepal

@howtobecomeadeveloper 9 месяцев назад

I'm happy to hear that! Much love right back!

@miguelpinto5018 3 месяца назад

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

@abhishekraghunath95 8 месяцев назад

Thank you thankyu thankyou so much. You are amazing 🎉 thankyu tons and tons

@howtobecomeadeveloper 8 месяцев назад

My greatest pleasure, glad it was of help! 😊

@_abdulmahl 5 месяцев назад

Which link are we using to download the json and the public files?

@ugyenofficial 8 месяцев назад

Thank you so much sir ❤❤

@howtobecomeadeveloper 8 месяцев назад

You're very welcome!

@rohitnittala_5513 3 месяца назад

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.

@howtobecomeadeveloper 2 месяца назад

Noted for next time, thank you!

@howtobecomeadeveloper 25 дней назад

This one is for you 😉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZtAEXhpTJXk.html

@charlesegbe546 15 дней назад

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?

@dessfse6927 9 месяцев назад

@howtobecomeadeveloper thank you. I have been planning to convert the one you did with vanilla JS into React. This is great!

@howtobecomeadeveloper 9 месяцев назад

So cool, glad to hear it! 😊🙌

@VishalChandraChapa 22 дня назад

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

@farazalam1445 2 месяца назад

im having issue with importing footer to index file. how do i fix it?

@ashgen259 4 месяца назад

Thank you , and if possible can you please show a tutorial for small business using react and tailwind

@howtobecomeadeveloper 4 месяца назад

Absolutely, tutorials like this are coming up! 🙌

@ashgen259 4 месяца назад

@@howtobecomeadeveloper Thank you , Hope to learn better React and tailwind from you 🙂

@howtobecomeadeveloper 29 дней назад

Newest video is is perfect for you! 😊 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-v9q7g9SJkL0.htmlsi=vuN9WOHQ4GodO4U_

@RAJ_K_ Месяц назад

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?

@howtobecomeadeveloper 29 дней назад

This will be an upcomign video, thank you for suggesting!

@howtobecomeadeveloper 25 дней назад

This one is for you 😉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZtAEXhpTJXk.html

@jayshah5904 8 месяцев назад

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?

@howtobecomeadeveloper 8 месяцев назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ldwlOzRvYOU.html 3) You just forward to your github repo url. Hope it helps!

@alien6751 5 месяцев назад

hey, you have used tailwing in your code right? How do I setup , I coudlnt do it following the tailwind documentation

@howtobecomeadeveloper 5 месяцев назад

Tailwind was not used for this project, just plain CSS 👍

@howtobecomeadeveloper 29 дней назад

Newest video is is perfect for you if you want to learn to setup Tailwind! 😊 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-v9q7g9SJkL0.htmlsi=vuN9WOHQ4GodO4U_

@aminekebouche7686 8 месяцев назад

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)

@howtobecomeadeveloper 8 месяцев назад

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 😊

@jackywan6829 9 месяцев назад

I know nothing about React but I do want to learn this skill. Do I need to learn JavaScript before heading to this course?

@howtobecomeadeveloper 9 месяцев назад

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 RU-vid. Then come back and delve into React. Good luck! 😊🙌

@williamli12 8 дней назад

does this use cra or vite?

@obichiemeriewinner8135 2 месяца назад

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.

@richardstevenson6507 6 месяцев назад

Please,how do I put my projects website links in the portfolio section ?

@azhartahir618 2 месяца назад

Bro Use anchor tags to give the links

@ritikverma2588 8 месяцев назад

Nice tutorial but can be much better with explanation of some concepts used in the project.

@howtobecomeadeveloper 8 месяцев назад

Noted thank you, I will take this into account in the next videos!

@Randomgamingify 2 месяца назад

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

@Sjtgeseeker 7 месяцев назад

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.

@howtobecomeadeveloper 7 месяцев назад

This is normal CSS indeed.

@dankmemes5554 8 месяцев назад

How do you set the links to your actual github from the Portfolio section

@howtobecomeadeveloper 7 месяцев назад

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

@bananabaskets 2 месяца назад

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?

@howtobecomeadeveloper 2 месяца назад

There will be a separate video coming out soon on this!

@rotifamily479 8 месяцев назад

Hi bro. Can't find the github SVG. Where can i get it?

@howtobecomeadeveloper 7 месяцев назад

Copy it from here: github.com/Ade-mir/react-js-personal-portfolio/blob/main/src/Pages/Home/Footer.jsx

@shailendrasingh90 9 месяцев назад

Hi I am new on React , can u please create a tutorial for beginner to start on react js

@howtobecomeadeveloper 9 месяцев назад

Absolutely, thank you for the suggestion!

@emreyilmaz5367 8 месяцев назад

I have a question. Which used css program ?

@howtobecomeadeveloper 7 месяцев назад

It is vanilla CSS :)

@somanycreaditcards 8 месяцев назад

Why are you using decimal numbers for px?

@howtobecomeadeveloper 8 месяцев назад

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 :)

@mfarhanmuizaddin4101 7 месяцев назад

May I know what size the image is?

@howtobecomeadeveloper 7 месяцев назад

You can see the size of the image in the asset folder :)

@ezekielkolapo8066 Месяц назад

where is the package json

@howtobecomeadeveloper 10 месяцев назад

Build your next awesome project: www.tubebuddy.com/quicknav/latest/UCkXqOdpo5ul8BosGBFlDgmw

@dudhiadevanshu5932 7 месяцев назад

hi,when i try to upload on netlify it's shows me error how can i solve it? @howtobecomeadeveloper

@howtobecomeadeveloper 7 месяцев назад

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!

@dudhiadevanshu5932 7 месяцев назад

@@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?