Complete React Portfolio Website Tutorial | Build & Deploy | Beginners Tutorial

[@Code_Complete]

🌟 Want to level up your frontend skills even more? Check out Code Complete Labs for real-world challenges like the ones we built in this tutorial! 🚀 👉 codecompletelabs.com Test your skills, get feedback, and build an awesome portfolio! 💻🎨 Have questions or feedback? Head over to our Discord server! discord.gg/TWBtv5an7N Solve advanced programming challenges and become an expert software engineer with CodeCrafters! 40% discount on your membership - app.codecrafters.io/join?via=CodeCompleteYT

[@Nouman-pk3jo]

You've gained a new subscriber, buddy! The code was incredibly clean and easy to understand. I completed React JS this week and decided to practice by creating some website clones. Many people were using complex codes, which left me confused. Then, I stumbled upon your video. I followed it, understood each line of code, and successfully built my portfolio website. A big thanks to you! Please consider making more videos on building websites using HTML, CSS, and React JS. Thanks!

[@Histroryteller]

To be very honest with you, I find this video very helpful and educative. God bless you for taking out time to make this video. I am looking forward to seeing more from you.

[@FoxSeba]

Helped me a ton with a project for school! They did a great job with showing me how JS works and im pretty damn good on the command line and vim after only a few months, but the ways they'd try to explain react always puzzled me. This made it feel very elementary and easy to pick up on WHY you're doing things the way you are and HOW they work together! Thank's a ton, you made my brain expand today. Subbed!

[@sumangupta854]

amazing work, You have such a clear understanding of front end

[@Royal-1992]

I followed this tutorial and I implemented exactly what you are shown in the video...😊 Thank you

[@lebozikalala2470]

I have recommended many people to watch this video when they ask about how react works in a nutshell. It covers almost all the basic's one needs while on the journey to learn react

[@medislamm123]

thank you so much for this incredible tutorial!!! I've learnt so much :D

[@nandiniverma5273]

Thankyou soo much for making such kind of tutorials where a beginner person can easily understand each and every thing because of calm explanation. This is such a good tutorial. Thankyou for creating this video , me as a beginner found it helpful. Please do make more such videos.

[@saurabhsunilsingh]

Followed this one superb result !

[@Code_Complete]

Great to hear! Thanks!

[@WisdomBySunset]

Thank you so much! Came to watch parts of this video a few times now. I must say you explained the project very well and I even took some elements of the website for my website

[@riajikbal2938]

great video sir the css part is awesome

[@devvidit4740]

Great video! Learned a lot and in such a great manner!! Kudos!

[@CoreyP-w8g]

AMAZING. Thank you so much for this video!!

[@whysrishti]

This is an amazing video. Thank you so much for sharing.

[@Code_Complete]

Glad it was useful!

[@lilyjoy1338]

One of best video I have never seen. thankyou so much. Guys go for it the website looks so good easy to make and every step in video is we explained. Thankyou so much for creating such a masterpiece.liked and sub ur channel 👍👍✨✨✨

[@DemiBoiii]

One of the best video I have 'NEVER' seen lmaoo

[@dominic7129]

One of the best tutorial so far for a beginner like me, +1 sub. Thank you so much.

[@soufianeaknouche2508]

Thank you for this tutorial clearly explained.

[@sebastianhurtado979]

this video is very useful, that was my first time using react and I learned a lot thx

[@YourKidnay]

Thank you so much for making this video! I was able to follow easily and learned a lot

[@kimnana5375]

Thank you so much i learned a lot of this tutorial keep going with these amazing videos

[@ipreet6850]

seriously , very underrated channel for frontend devs

[@zoyabsaiyed1275]

The tutorial is really helpful. Could you please make a video on React js website using Figma or React material library? It will really help because there are no good tutorial like yours which are easy to understand and code along!

[@krishnanandyadav9248]

Hey , I am almost at the end of video and loving it, And here's the answer I think would be to your question at 1:36:48 , We can import our variable css file to App.jsx to use global css variables. Am I right?

[@Code_Complete]

Good try! Keep in mind we're using CSS modules so styles imported to a JSX file will only apply in that file and not globally

[@TharuGeeth]

It is amazing. thank you for the tutorials. I learned a lot of things. thank you so much again.

[@CodeNCoffe]

❤ Loved It

[@sivaranjiniganesan1397]

Could you please share the website url where you have deployed this portfolio.. just to refer Thanks )

[@RealisRare-xp8lf]

Very well designed content and definitely excellently taught. Sir, please try to launch a full stack project video if possible. And thank you so much for this ❤

[@seeukrainewithme8380]

thanks, its very useful ;)

[@godofwar8262]

Hey its great but can you tell me what library you use if so and also list auto major topics of react you used in it because it would be helpful for beginners like me

[@jayprakashjaiswaldeptofcom1250]

Please upload video frequently

[@vaibhav5269]

Thanks a lot for the tutorial. It was very easy to understand and implement. I had an issue when i deployed it into netlify, i can see that hero title(Hi,I'm Ada) was missing when i go to mobile website. I can see an warning in hero.module.css in title(-webkit-background-clip: text;) field. What may be the possible reason behind it. Once again thanks for the tutorial.

[@Code_Complete]

Could you send this question in the Discord server linked in the description with a link to your repo? Thanks!

[@suniltamma379]

i have same issue the line "hi im ada " dissappeared after building app in vs code . Did you get a solution??

[@vaibhav5269]

@@suniltamma379 I removed the CSS font styles and i kept it as a plain text

[@matcavieres]

First of all, thank you so much for the great work!!! Super clear, helpful and educative. In the other hand i have and observation. When you're in desktop you can still see the menu/close icon in the navbar, when you press it it changes states but doens't have any utility, but when you turn into mobile the button does the work intended. Is a fix that when you're in desktop the menu/close icon doens't appear, but when in mobile it shows? Thanks again for the video and your work. You have a new subscriber!

[@sallarba]

Add this Code in Navbar.module.css: @media screen and (min-width: 831px) { .menuBtn { display: none; } }

[@Code_Complete]

Glad you liked the video and sorry for the late response! Yup I missed a bit of code to hide the menu icon for wide screens but the solution should be there in the GitHub repo now similar to what @sallarba mentioned thanks to PRs by some viewers

[@Thor0056]

Please make one more portfolio website with more coponents and nice UI using tailwind

[@agent_spidey]

After we deploy the "dist" folder, how can we make changes to the uploaded website?? Do i have to build it again and then reupload?

[@samarthshrivastava8323]

so you found the answer?

[@Iliasduty]

Thank you for the video! May Allah bless you :)

[@bkishwarchavan7787]

SUPERB BRO

[@SakshiSharma-io4sh]

why are you not using react-eouter for adding routing to your app

[@Code_Complete]

react-router is usually useful when you have multiple pages in your app. Since we just have a single page and we're scrolling up and down to different sections, react router isn't really needed

[@abhinayayadav7019]

hey i'm not getting the menuIcon from the assets folder in the menu bar . can someone help me get through this??

[@mattpetro9204]

Where did you get the icons you used in the about section (the cursor, server etc.)? I would like to find other icons of the same style

[@dhivyamurugesan7091]

Thank you so much @Code Complete for Amazing Tutorial. I am new to react and trying to create my portfolio based on your tutorial. For some reason , my image file is not loading just displays menu-button in Navbar.jsx file. Any help appreciated.

[@dipitti7974]

I had this same problem. I tried this way: moving the assets folder into src, the browser wasn't accepting it.

[@abhinayayadav7019]

hey is the issue solved? if yes can u let me know the procedure?

[@maryemlahmer3184]

Thank you for this tutorial, very helpful. If I deploy the site and then I make modifications in the code ( for example adding a new project), does the site display these modifications automatically or do I have to deploy it again ? thank you again.

[@sarfarajnawazchowdhury4498]

It ll show automatically but you have to push code in GitHub. Necessary to deploy again.

[@Pareshbpatel]

A fine, step-by-step tutorial on building a Responsive Portfolio Website in ReactJS, so clearly explained. Thank you. PS Subscribed! {2023-08-21}, {2023-08-22}

[@ankitchouhan8828]

amazing video, I followed this step by step but there is a problem. I can't see any images when I run it in preview mode. Any idea on how to fix that?

[@techtalk933]

Hey some answer this if i close the react project and want to run the project again after some time. showing need to install npm. any one explain why

[@Code_Complete]

Can you share what the exact message it shows is? If you could share it on the discord server that would be great!

[@techtalk933]

@@Code_Complete thanks bro, what I did is I closed the vscode and try to open it again I gave cmd like npm run dev but that one is not worked and tried to do some experiment that time what did is 1st npm install and npm run and npm run dev worked. So I thought every time we need to do it like that but next directly I gave like npm run and it's worked.

[@SoJinnie23]

​@@techtalk933you are my hero! Thx!

[@cecepilot]

Thank you for everything

[@malcomk]

Hi, how do I upload json server on this together?

[@Hoid1014]

thank youuu!!!

[@Anurag-013]

very nice tutorial

[@StoiccOSRS]

What is the react extension used so it auto imports for you? I'm getting really tired of having to type out every single import!

[@k.gbojamma7296]

My codes are not running parallelly in the chrome what extension is used in your chrome I'm using Microsoft bing as my web page so what extension can i use

[@kushbudhiraja4927]

but you have not added functionality to he navbar elements

[@ludkamotylikova3060]

Hi, can I use my own pictures and to not use figma?

[@sd6280]

Contact section and hero section not responsive..how to fix that?

[@Amin04]

Man do it yourself you are a developer 😅

[@javiersistemas]

​@@Amin04😂😂😂😂😂😂

[@FoxSeba]

having trouble with the hero section of this page// no errors popping up in the terminal or in the console browser, and most everything else was working fine until this point but none of the hero.modules.css are applying to my page. It'll save and npm will restart the browser but it isn't taking effect with the color transparency and image isnt floating around

[@FoxSeba]

the problem was the hero folder being store inside of nav rather than the components, easy fix just switched the folder location and edited the imports

[@thehypotenusestudios]

my png files in the navbar are not rendering can anyone help?

[@ramchandraparab6421]

Have you got any solutions???

[@MewVSMewtwo89]

First one was the navbar and I was stuck on it. The only way it worked for me was getting rid of the getImageUrl from the utils.js and just doing this. instead of: import { getImageUrl } from "../../utils; I just did it the old fashion way and it worked for me: import menuIcon from "../../../assets/nav/menuIcon.png"

[@rhaNdzz123]

@@MewVSMewtwo89 try this i just add /src/ and its working for me export const getImageUrl = (path) => { return new URL(`/src/assets/${path}` , import.meta.url).href; }

[@DevDiveTG]

A very beautiful page, but I faced a problem with the menu button appearing in the size of the large screen. I fixed it and let me know about it. My sister, Sakhira, asked me for a personal page to show to her friends at school. This will be great for her.

[@ahsantamim2043]

how did you fixed it brother. I am facing the same problem.

[@DevDiveTG]

@@ahsantamim2043 I make pull request in project

[@singamreddyanitha2367]

@@ahsantamim2043 Bro give menuBtn display block for above width: 830px in navbar.module.css , try it... once

[@Code_Complete]

Glad to know my tutorial helped! Sorry about the mistake with the menu icon and thanks for the PRs guys, it should be fixed in the GitHub repo now 👍

[@DevDiveTG]

Pro I fix the main button issue except Pull request in github

[@shortandsweetreel]

sir where did the dist folder come from ,i think its trimmed

[@mukundkumar9899]

have one doubt after deleting that vite.svg and that assest folder how youre able to remove the error facing issue with that how to resolve can anyone please tell

[@codewithabhishek8840]

Hy i am trying to upload my file after doing that step but my all page is not showing on server its show only home page

[@abin6983]

15.58 . Navbar is not showing

[@mohitw3singh114]

In desktop version that menuopen and manu close icon is visible how it would be disappeared

[@Code_Complete]

My bad! If you go to the GitHub repo and check the code for the nav bar, it should have the fixed code thanks to PRs from other viewers

[@mohitw3singh114]

Thanks bro.... I manually did display none in normal version

[@jacobjaetzold6886]

My entire webpage is just showing white, no errors received I cannot figure out what's going on.. no errors in devtools inspect or in console for vs code. Help anyone???

[@rxn013]

Did you see on console ?

[@sencxx6368]

@@rxn013 same here , i can see everything on local but while i deploy i just have a white screen

[@sencxx6368]

did you find any solution ?

[@shinchan876-s2y]

same issue!! no error showing on the screen whole page is white..........console is also showing no error

[@paragsewani7961]

was it solved

[@claylay1239]

the utils.js function is not working for me. images are not loading. is there something I might've forgotten?

[@ekofirlianto4808]

how to deploy this project with vercel

[@jayati91]

App.Css is not working in my code. it's not showing background color.

[@chinenyenwamirabel]

Same here,I've been stuck for 3days now. My app.module.css is not working

[@youssefelassaoui9111]

same here

[@HeyyUmer]

Same here 😅

[@MewVSMewtwo89]

make sure you have the App.module.css imported on your App.jsx file and in your App.module.css file make sure you have the @import "./vars.css";

[@dagsion2454]

Same here, still stuck. I already check the connection between them they are fine🥲

[@evangora3910]

So I am following this tutorial and it is going great so far. I am about 30 minutes in at the part where you are adding the menu button. For some reason when I am adding the menu button to the html in my Navbar.jsx, the whole nav bar disappears. If anyone could help me with this, that would be great!

[@MrRoy69]

same do you get the solution

[@npcstoic1942]

@@MrRoy69 mistake in the classname or spelling somewhre i had the same problem

[@evangora3910]

@@MrRoy69 I ended up importing each image separately at the top of each file instead of using the getImageURL method that he wrote. It fixed the problem for me.

[@getflashedkid6760]

Good

[@samarthshrivastava8323]

How the "dist" folder created automatically in your system?

[@GHOSTOFFICIAL-s6i]

Can you tell me the website name from where you downloaded the skill logo icons ( Ex- Html, Css, React.....and all)

[@PeterMorganelli]

Its in the github link in the description under assets

[@mustahoshinhossainahamedaf8456]

For bigger screens you will still get the menu item Icon if u don't do this .menuBtn{ display: none; }

[@khewang27]

yeah man it helped me

[@Royal-1992]

Could please create another one video using vite react + react-bootstrap...😊

[@chiggywiggy524]

Thanks

[@vanshikasoni6950]

I dont know why my Portfolio is not horizontally aligned with the menuBtn on small screen. I have tried a lot but it is not helping. Can anyone help?

[@Elekir]

In the first step why my main. Jxs not like urs ?

[@sarathkrishnanpv9341]

what is that vs extension

[@jagdishjena9058]

Bring some real life project such as banking application

[@JamesJames-nv6ps]

Great 👍

[@yellowrice8633]

How do i upload this to hostinger?

[@annefrank-rk9ug]

What is the shortcut key that u r using... when all required: whether b terminating signs or braces are used.... Help please.😅 Sorry bt as a beginner i searched everywhere bt unable to still learn wht was the key.... kindly help😢

[@Code_Complete]

Hmm I'm not sure which shortcut key you're talking about. If you want to take a look at the VS Code extensions I use, you can check out the beginning of my NextJS KZbin video where I've mentioned them

[@annefrank-rk9ug]

Ohk thank u 😁 if by chance i still dont get it I'll ask u on tht video again😅

[@sencxx6368]

same here , i can see everything on local but while i deploy i just have a white screen , anyone have idea ?

[@Gully_cric8]

i am facing same problem Did you solved it yet

[@eugenbardhoshi1109]

@@Gully_cric8 have you fixed it by any chance ! trying but cant till now

[@TaeKim-z2z]

Hello, I have an error. The id is not working, Can someone help me please?

[@muskaankohli9607]

My images are not showing

[@harkaranrangi9471]

same

[@NitDraws]

@@harkaranrangi9471 Solve for me was changed the getImageUrl casing to getImageURL on utils.js page

[@NitDraws]

Eventually he will call them getImageUrl, so it might better to correct them all just to getImageUrl . Just find the way you like and stick with it.

[@gjsksn]

I guess wrong directory?

[@priyankazala6857]

heyy, Hany solution found?

[@anshkumartripathi3021]

Hi how to restart the server?

[@mayurrathour8423]

bro can you plzzzzzzzzzzz make a video how can I push this website on aws because i have trying for whole day to deploy it on aws but got no result plz reply

[@gjsksn]

How to deploy without dist file? If dist file exist, why is this not covered on tutorial 😢

[@miggzcervantes3792]

You will automatically get a dist file if you run npm run build

[@ajaysaini2349]

30:00

[@kasemmuhammad9820]

41:56

[@LevinPamay]

U helped me allot man if i could visite u in India i would ngl i would buy u a döner aswell on my nacken

[@soumyajitparia3275]

16:04

[@kasemmuhammad9820]

44:25

[@ranjanrana4906]

ERPF

[@innocentgamer847]

This not beginners friendly tutorial You did not explain about the file structure you make. How did you make custom css file and what's inside that file

[@LevinPamay]

DU LÖWE

[@ndongo-rk1mk]

not easy to follow for beginners.

[@MercurySteel]

1. A beginner shouldn't jump to creating a portfolio website 2. Not every tutorial video needs to be aimed at beginners

[@ndongo-rk1mk]

@@MercurySteel except when a tutorial is literally titled “ BEGINNERS TUTORIAL”

[@GeekyAfros]

Pause and rewind….weve all had to do it even with degrees in this….if you want something bad you’ll work for it

[@GeekyAfros]

Also first do a Udemy course for web development and then revisit here again

[@wld-and]

This video is great but I think it's not for beginners . I mean there is no clear explanation , it's just reading CSS lines 😔

[@NicolaHartman-e6p]

White Michael Rodriguez Elizabeth Harris Barbara

[@SuryaMahajan-zu5wp]

my webpage is not getting updated

[@bonnywish]

37:42

[@kasemmuhammad9820]

49:28