How To Create Portfolio Website In React JS | Complete React JS Website Project Tutorial 2024

Рет қаралды 94,921

Күн бұрын

Learn How To Create Portfolio Website In React JS. Build Complete React JS Website Step by Step and deploy it online.
👉 Source code: greatstack.dev/go/alex
👉 Live link: greatstack.in/portfolio/
SUBSCRIBE: ‪@GreatStackDev‬
❤️ Complete JavaScript Course with Certification:
👉 greatstack.dev/go/javascript-...
✔️ Beginner + Advance + ES6 + Notes
✔️ 30 Project With Source Code
✔️ React Beginner course with project
✔️ Course Completion certificate
✔️ Chat Support
In this tutorial you will learn to build and deploy complete responsive portfolio website using React JS. This Portfolio website will be completely responsive and we will add react smooth scroll and working contact form on this personal portfolio website.
You can receive the contact form enquirers on your email address. This React JS portfolio website will be a great react project for beginners.
Download Assets: greatstack.dev/assets/portfol...
Get web hosting and domain:
👉greatstack.dev/go/hostinger
Watch Full Stack E-commerce Website tutorial:
👉 • How To Create Full Sta...
-------------------------
Timestamp:
00:00 Portfolio Website Overview
03:52 React Project Setup
10:11 Create Navigation Bar
19:32 Create Website Header section
30:29 Create About Section
51:04 Create Services Section
01:08:57 Create My Work Section
01:23:50 Create Contact Section
01:46:54 Create Footer for the website
02:08:00Add Smooth Scroll on Website
02:14:43 Send contact form data on email
02:19:29 Make the website responsive
02:55:42 Deploy website online
-----------------------------------------
Suggested Course:
Complete JavaScript course with 30 projects:
👉 greatstack.dev/go/javascript-...
Complete HTML and CSS with 8 projects:
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Beginner's HTML and CSS tutorial:
► • HTML And CSS Tutorial ...
Beginner's JavaScript tutorial:
► • JavaScript Full Course...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------
Stock Image and icon credit:
pexels.com
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

Пікірлер: 126

@GreatStackDev 3 ай бұрын

👉 Source code: greatstack.dev/go/alex 👉 Live link: greatstack.in/portfolio/

@muhammadusmanali2029 2 ай бұрын

I have used the Vercel for hosting the portfolio, the issue i am facing is that all the elements of portfolio have become bold, size of everything is increased, on local host it is looking good, but on network it is looking very bad! any solution for that?? please guide! @GreatStackdev

@doomhead9109 Ай бұрын

@@muhammadusmanali2029 I am facing same problem but on localhost. Have you got any solution ?

@adebowaleadegboye8623 4 ай бұрын

Great job so far thanks I am following you

@KalmanWebDesign 2 ай бұрын

Great tutorial. However, use rems instead of pixels to make the sizing relative (responsive), and each page should only have one h1 element. Use h2 elements for additional headings.

@umangraval73 4 ай бұрын

man is make content according to my needs lol i was just taking to my friend that i want to make portfolio website a you fullfill my need Master.🙏🙏

@danielsuccess1841 4 ай бұрын

My Best KZfaqr Coding Tutor ❤ Thank you sir for this

@bkimking 3 ай бұрын

Great work greatstack. learned alot.

@jkai_8 4 ай бұрын

You're a life saver bro!!!!

@Fnydo 4 ай бұрын

Thanks you sir for creating this tutorial.😢😊

@haifrendz 4 ай бұрын

perfect step by step explanation for beginners......waiting for next js tutorial

@ganeshsharma5810 2 ай бұрын

how should i change logo name to my name pls explain

@bennysimisi1046 4 ай бұрын

It's perfect, I learn every day with you, especially since recently I started learning React js. Otherwise why create buttons with a DIV tag?

@-mohammadalakedy5417 4 ай бұрын

You the best , Big Thanks From Syria ❤ I'm waiting the Food Dilvery App Backend Section Bro ❤❤

@eugeenhunter7384 4 ай бұрын

me too brro

@-mohammadalakedy5417 4 ай бұрын

Inshallah Soon bro ❤

@eugeenhunter7384 4 ай бұрын

A great video i have to try it out.....please do provide the other video for the back end of the food delivery

@piyush0mandloi 4 ай бұрын

Thankyou sir with this awesome content.

@francislungu815 4 ай бұрын

Am third... 😀😀 Great stuff man.. You the best.

@drexk6569 4 ай бұрын

Great Job thank you a lot, please dedicate a video on how to create a website with log in where one can can reset forgot password

@LaluMuhamadSaleh 3 ай бұрын

i like it this channels..very perfect

@ubaidullah4668 Ай бұрын

clean and proper styling in css, able to follow without any confusion

@GreatStackDev Ай бұрын

Thanks ubaid for your feedback

@rahulgandhi5844 28 күн бұрын

@@GreatStackDev is this mobile responsive?

@priyaranjan5584 4 ай бұрын

Nice portfolio website. Sir, please also upload backend part of Food Delivery Website as soon as possible.

@black2thepiink 4 ай бұрын

ill do for sure tq bro

@sajeeb8797 2 ай бұрын

your videos so much helpful 😇😇

@gabrielkingori3375 4 ай бұрын

wow bravo, lovely

@NikhilPatil-c5h 2 күн бұрын

Very good representation such amazing for everyone who are new or experienced people.

@GreatStackDev Күн бұрын

Glad you found it helpful! Thank you so much.

@miazitechbd 4 ай бұрын

If do not thank for this project it is absolutely inference. I hope you will be putting this project using Tailwind shortly.

@user-hb9oq2mx8l 12 күн бұрын

Thank you i saw 100 plus adds in just 2hrs

@codefiltered 4 ай бұрын

best tutorial🤩🤩

@9jabot 4 ай бұрын

You never disappoint

@Benbeckmann3739 4 ай бұрын

You people saying you'll try the code on a 3 hr long video after 20 mins are crazy

@onigbindedavid6630 4 ай бұрын

😅😅😅

@eugeenhunter7384 4 ай бұрын

we always do

@howigrow 3 күн бұрын

Very helpful tutorial ❤

@GreatStackDev 3 күн бұрын

I'm so glad! 😊 Keep coding.

@chibuezealaekwe4212 2 күн бұрын

This is great , keep it up boss

@GreatStackDev Күн бұрын

Thanks, will do! Hope you built it.

@chibuezealaekwe4212 Күн бұрын

@@GreatStackDev On it now, once I'm done, will start looking for a front-end entry level jobs

@ndenosharo Ай бұрын

With this new technologies, i feel for junior devs

@ayoubelandaloussi-nx4xv 3 ай бұрын

very good video, I aprechiate your effort, I have a question, when I click on the services for example in the navbar, the anchor link takes me to it, but when I scroll up back the underline in the navbar stays in the services, how can I solve this issue and thank u

@sachin0507 4 ай бұрын

Any reason for using always plain css ???

@ujjawalpugalia2123 4 ай бұрын

Please bring full mern stack projects as much

@todsapon9854 Ай бұрын

thank you

@CodeCs_YT 4 ай бұрын

please sir make videos on angular 17 projects, angular is most demanded in big tech companies.

@ManhTien2001 Ай бұрын

Thank you for this video. Could you please add auto subtitles to it?

@igbinidujeremiah1490 3 ай бұрын

Nice work but how did you come about your service data

@soniakrishnan6436 3 ай бұрын

Why do you delete the react.svg under asset folder? Because when i deleted that, the host stated file/path is missing and error instead of a clean screen?

@indianmusic1770 4 ай бұрын

Good

@AzizulHaque-vh8qc 3 ай бұрын

Which theme u are using in Vs Code?

@AliShahab-zq7hc Ай бұрын

from where did you get the asset foler?

@ZhxadeTech 2 ай бұрын

Web3form ain't loading. Is there any alternative?

@smallboy3559 4 ай бұрын

Bro plz continue the food ordering website TOMATO series. U r not posted the continuation... Plzzzzz continue that one.

@User-lm4qq 18 күн бұрын

I used Email JS for form submission

@black2thepiink 3 ай бұрын

fr me anchor link smooth scroll error /// just about and contact section ,,, form is running good

@ajiteshmishra0005 4 ай бұрын

Please upload one video containing concepts Redux, Redux Saga, Redux Thunk in any React Application If it is possible to JWT also so it will be good for React Aspirants

@DeadlyGamerBD 4 ай бұрын

Sir plz make tutorial or use in website tailwind css plz sir its very demanding now rather than plain css so sir plz make tailwind css tutorial 🙏

@arpitgupta5607 3 ай бұрын

bro if we add our image how edit image in that

@anaghathorat2862 4 ай бұрын

Sir from which website have you created the logo? ALEX . I too wanted to make a custom logo for my portfolio. and thank you for this tutorial, it helped me a lot

@idevkr 3 ай бұрын

u can use canvas

@simaokane 4 ай бұрын

Hello Sir, I really appreciate your work. Is it possible to activate the subtitles, please?

@UpShares 4 ай бұрын

🤣

@simaokane 4 ай бұрын

@@UpShares I don't understang very well english...

@dreamCode807 4 ай бұрын

Sir please post tutorial of admin panel

@santhosharyan-w8g 3 күн бұрын

please help me i want to deploy your reactjs application in netlify or github

@KiranKumar-md7uh 3 ай бұрын

We need more

@User-lm4qq 18 күн бұрын

hey bro i write the sam e code but it is not mobile responsive whta may be the problem

@manojm1853 2 ай бұрын

how to make our own svg file for profile

@user-pd9ew7ze4s 2 ай бұрын

Without writing some if we click submit button then show Email send successfuly please fix this issue

@tharindujayasekara237 28 күн бұрын

add 'required' attribute on html input element

@User-lm4qq 18 күн бұрын

bro my components are not taking full width of screen, why this problem is arsing ? do you have any solutions

@malvernmabvira1562 3 ай бұрын

Installed anchorlinksmoothscroll, how can i import the AnchorLink from react?

@idevkr 3 ай бұрын

U have to import it from anchor link smooth scroll package

@hindikhaniachiachi 4 ай бұрын

Sir create a currency converter using HTML CSS and JavaScript 😊😊😊😊

@Wonderfully_ok 20 күн бұрын

please deploy on render

@arpitgupta5607 3 ай бұрын

where u create image??

@NoobCorporations 4 ай бұрын

Please Made A Full stack website bro 🙂 like for college ❤

@idevkr 3 ай бұрын

its already on channel

@pranaydas1271 16 күн бұрын

The source link is unable to use

@r-kr-k6136 2 ай бұрын

Mobile responsive not fixing please upload the correction video

@User-lm4qq 18 күн бұрын

bro did u get the solution i am just frustated , the width are automatically decreasing while inspecting plzz help

@Jibonbd360 4 ай бұрын

hey please share your vs code setting😢

@JB007 Ай бұрын

its not mobile responsive can anybody help me with it. The content taking half of the width idk why

@User-lm4qq 18 күн бұрын

bro did u get the solution i am just frustated , the width are automatically decreasing while inspecting plzz help

@black2thepiink 3 ай бұрын

smoothi scroll is not that perfect why I dt know

@sandyechon5608 3 ай бұрын

Not responsive for hand phone.

@Afganmedia42033 4 ай бұрын

make a dynamic web bro please

@ajiteshdakua2023 4 ай бұрын

2:37:13

@eugenehunter6305 4 ай бұрын

under email submission am not getting any notification yet i have double checked everything, what might be the problems?? Please or kindly respond

@pulkitagrawal5091 3 ай бұрын

hey you need to use the hook which is used in the react form for email and under submit button you need to use {result} to submit the form on your email id

@TejaSays 9 күн бұрын

where do you create all these logos and others?

@GreatStackDev 8 күн бұрын

Hi Teja, I use Figma to create these logo and UI design.

@TejaSays 8 күн бұрын

@@GreatStackDev ohh.. thanks a lot.. it helps me to create my own

@celticspyd5887 4 ай бұрын

Sir i texted on insta What about Admin page of food delivery?

@eugeenhunter7384 4 ай бұрын

yes we need the backend too

@muhammadusmanali2029 2 ай бұрын

@josephokpere583 27 күн бұрын

I have the same issue too, have you found a solution to this?

@shaanu_03 14 күн бұрын

@@josephokpere583 same issue

@piyush0mandloi 3 ай бұрын

500+ done

@asmawaheed3873 4 ай бұрын

how can we make usefull i meanwhen i share a url so people can see

@idevkr 3 ай бұрын

deploy on platform like vercel or netlify

@UpShares 4 ай бұрын

it looks cook thought

@santhosharyan-w8g 3 күн бұрын

there is a problem with your project it is not deploying in netlify

@arunkanagaraj1078 3 ай бұрын

How to buy source code?

@azad5674 Ай бұрын

i dont understand one thing that is when i am writing the same code as you then why my user interface look differnt from you like in size of headings and the services portion i dont understand why?

@GreatStackDev Ай бұрын

It happens due to different laptop screen settings. Check you display settings and select other display resolution to understand it.

@shaanu_03 14 күн бұрын

@@GreatStackDev sir, you made the website when your device display scaling is at 100%, but all ours display is at 125%(which is recommended display setting by windows and its default), our webpage is looking zoomed in even we wrote the exact same code as yours. and thats you its not mobile responsive also. Can you please give us the updated css styling with 125% display?

@monishbl7254 2 ай бұрын

Comment stating design is similar to @pixiteezy's portfolio is now deleted, just wow 👍, good job mods and creator

@arpitgupta5607 3 ай бұрын

bro how to create image ?

@CreativeMinds100 4 ай бұрын

Anchor link tag use after page will shows blank . 😢 Please help me anyone

@idevkr 3 ай бұрын

make sure to import Anchor Link Tag

@user-ux3tr7mg1v 2 ай бұрын

HELLO

@thevikramsoni7352 3 ай бұрын

where to make image icons

@idevkr 3 ай бұрын

u can use icons8

@musicwithanimator 4 ай бұрын

Please .i am your biggest subscriber . i want to create something like this , for my own . please share codes by any platform you can share with me . pleamse 😭

@abhishekcode 3 ай бұрын

Is contact form working?

@idevkr 3 ай бұрын

Yes, it is working

@black2thepiink 3 ай бұрын

@@idevkrnot fr us

@mobagamerofficial1639 7 күн бұрын

Video seems good but you dont seem to have much knowledge on responsiveness, you need to take into account every device screen size for responsiveness, it would be better if you used rem and em for sizes.

@Vk585 3 ай бұрын

hey can anybody tell me the extension name

@idevkr 3 ай бұрын

ES7+ React/Redux/React-Native snippets

@lakshanjayaweera6232 3 ай бұрын

@Myytthh 4 ай бұрын

Hello , i need your help with something so can i have your discord account or how can i manage to contact you while i can share screen ? i like watching ur channel btw