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

Подписаться 1 млн

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

50% 1

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 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: drive.google.com/file/d/104e4...
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

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

1 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

@muhammadusmanali2029 4 дня назад

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

@KalmanWebDesign 11 дней назад

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.

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

Great job so far thanks I am following you

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

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.🙏🙏

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

Great work greatstack. learned alot.

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

You're a life saver bro!!!!

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

My Best RU-vidr Coding Tutor ❤ Thank you sir for this

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

Thanks you sir for creating this tutorial.😢😊

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

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?

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

Thankyou sir with this awesome content.

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

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

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

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

@ganeshsharma5810 14 дней назад

how should i change logo name to my name pls explain

@LaluMuhamadSaleh 23 дня назад

i like it this channels..very perfect

@sajeeb8797 13 дней назад

your videos so much helpful 😇😇

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

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

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

ill do for sure tq bro

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

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

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

You never disappoint

@-mohammadalakedy5417 Месяц назад

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

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

me too brro

@-mohammadalakedy5417 Месяц назад

Inshallah Soon bro ❤

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

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

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

wow bravo, lovely

@ayoubelandaloussi-nx4xv Месяц назад

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

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

best tutorial🤩🤩

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

Nice work but how did you come about your service data

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

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

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

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

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

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?

@AzizulHaque-vh8qc 29 дней назад

Which theme u are using in Vs Code?

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

Please bring full mern stack projects as much

@muhammadusmanali2029 4 дня назад

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

Good

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

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

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

Any reason for using always plain css ???

@user-pd9ew7ze4s День назад

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

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

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

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

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

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

😅😅😅

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

we always do

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

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

@Xhvdetech 3 дня назад

Web3form ain't loading. Is there any alternative?

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

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 🙏

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

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 Месяц назад

u can use canvas

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

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

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

🤣

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

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

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

Sir please post tutorial of admin panel

@KiranKumar-md7uh Месяц назад

We need more

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

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

@arpitgupta5607 28 дней назад

bro if we add our image how edit image in that

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

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

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

U have to import it from anchor link smooth scroll package

@arpitgupta5607 28 дней назад

where u create image??

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

hey please share your vs code setting😢

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

500+ done

@monishbl7254 18 дней назад

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

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

How to buy source code?

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

make a dynamic web bro please

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

it looks cook thought

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

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

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

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

@user-ux3tr7mg1v 5 дней назад

HELLO

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

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

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

its already on channel

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

smoothi scroll is not that perfect why I dt know

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

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

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

yes we need the backend too

@arpitgupta5607 28 дней назад

bro how to create image ?

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

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

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

deploy on platform like vercel or netlify

@user-sx8uq8xq9z Месяц назад

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 😭

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

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

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

make sure to import Anchor Link Tag

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

Not responsive for hand phone.

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

2:37:13

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

where to make image icons

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

u can use icons8

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

Is contact form working?

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

Yes, it is working

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

@@idevkrnot fr us

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

Im 1st😅❤

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

hey can anybody tell me the extension name

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

ES7+ React/Redux/React-Native snippets

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

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