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
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!
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.
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!
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.
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
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
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 👍👍✨✨✨
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!
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?
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 ❤
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!
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
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.
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
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.
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.
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
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}
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.
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
@@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.
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
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
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 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.
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
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???
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"
@@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; }
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😢
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 UA-cam video where I've mentioned them
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
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
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!
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.
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!
I followed this tutorial and I implemented exactly what you are shown in the video...😊 Thank you
amazing work, You have such a clear understanding of front end
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.
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
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
thank you so much for this incredible tutorial!!! I've learnt so much :D
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 👍👍✨✨✨
One of the best video I have 'NEVER' seen lmaoo
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!
Followed this one superb result !
Great to hear! Thanks!
great video sir the css part is awesome
One of the best tutorial so far for a beginner like me, +1 sub. Thank you so much.
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?
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
Great video! Learned a lot and in such a great manner!! Kudos!
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
❤
AMAZING. Thank you so much for this video!!
Thank you for this tutorial clearly explained.
Thank you so much for making this video! I was able to follow easily and learned a lot
This is an amazing video. Thank you so much for sharing.
Glad it was useful!
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!
Add this Code in Navbar.module.css:
@media screen and (min-width: 831px) {
.menuBtn {
display: none;
}
}
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
this video is very useful, that was my first time using react and I learned a lot thx
Thank you so much i learned a lot of this tutorial keep going with these amazing videos
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.
Could you send this question in the Discord server linked in the description with a link to your repo? Thanks!
i have same issue the line "hi im ada " dissappeared after building app in vs code . Did you get a solution??
@@suniltamma379 I removed the CSS font styles and i kept it as a plain text
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
It is amazing. thank you for the tutorials. I learned a lot of things. thank you so much again.
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.
It ll show automatically but you have to push code in GitHub. Necessary to deploy again.
seriously , very underrated channel for frontend devs
Please make one more portfolio website with more coponents and nice UI using tailwind
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.
I had this same problem. I tried this way: moving the assets folder into src, the browser wasn't accepting it.
hey is the issue solved? if yes can u let me know the procedure?
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
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?
so you found the answer?
Could you please share the website url where you have deployed this portfolio..
just to refer
Thanks )
❤ Loved It
Please upload video frequently
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
For bigger screens you will still get the menu item Icon if u don't do this .menuBtn{
display: none;
}
yeah man it helped me
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!
SUPERB BRO
but you have not added functionality to he navbar elements
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}
hey i'm not getting the menuIcon from the assets folder in the menu bar . can someone help me get through this??
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.
how did you fixed it brother. I am facing the same problem.
@@ahsantamim2043 I make pull request in project
@@ahsantamim2043
Bro give menuBtn display block for above width: 830px in navbar.module.css , try it... once
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 👍
Pro I fix the main button issue except Pull request in github
why are you not using react-eouter for adding routing to your app
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
thank youuu!!!
Hi, how do I upload json server on this together?
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
Can you share what the exact message it shows is? If you could share it on the discord server that would be great!
@@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.
@@techtalk933you are my hero! Thx!
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
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
Good
Thank you for the video! May Allah bless you :)
Thanks
Thank you for everything
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
very nice tutorial
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!
same do you get the solution
@@MrRoy69 mistake in the classname or spelling somewhre i had the same problem
@@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.
Bring some real life project such as banking application
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
Could please create another one video using vite react + react-bootstrap...😊
In desktop version that menuopen and manu close icon is visible how it would be disappeared
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
Thanks bro.... I manually did display none in normal version
In the first step why my main. Jxs not like urs ?
how to deploy this project with vercel
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?
Can you tell me the website name from where you downloaded the skill logo icons ( Ex- Html, Css, React.....and all)
Its in the github link in the description under assets
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???
Did you see on console ?
@@rxn013 same here , i can see everything on local but while i deploy i just have a white screen
did you find any solution ?
same issue!! no error showing on the screen whole page is white..........console is also showing no error
was it solved
my png files in the navbar are not rendering can anyone help?
Have you got any solutions???
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"
@@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;
}
How the "dist" folder created automatically in your system?
Contact section and hero section not responsive..how to fix that?
Man do it yourself you are a developer 😅
@@Amin04😂😂😂😂😂😂
15.58 . Navbar is not showing
Great 👍
what is that vs extension
App.Css is not working in my code. it's not showing background color.
Same here,I've been stuck for 3days now. My app.module.css is not working
same here
Same here 😅
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";
Same here, still stuck. I already check the connection between them they are fine🥲
How do i upload this to hostinger?
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😢
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 UA-cam video where I've mentioned them
Ohk thank u 😁 if by chance i still dont get it I'll ask u on tht video again😅
Hello, I have an error. The id is not working, Can someone help me please?
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
Hi how to restart the server?
How to deploy without dist file? If dist file exist, why is this not covered on tutorial 😢
You will automatically get a dist file if you run
npm run build
same here , i can see everything on local but while i deploy i just have a white screen , anyone have idea ?
i am facing same problem Did you solved it yet
@@Gully_cric8 have you fixed it by any chance ! trying but cant till now
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
My images are not showing
same
@@harkaranrangi9471 Solve for me was changed the getImageUrl casing to getImageURL on utils.js page
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.
I guess wrong directory?
heyy, Hany solution found?
41:56
ERPF
30:00
16:04
49:28
not easy to follow for beginners.
1. A beginner shouldn't jump to creating a portfolio website
2. Not every tutorial video needs to be aimed at beginners
@@MercurySteel except when a tutorial is literally titled “ BEGINNERS TUTORIAL”
DU LÖWE
my webpage is not getting updated
44:25