this video taught me more about how to actually use styled components in a project instead of a lot of those half baked tutorials whose code don't scale up at all.
I like your style you are a Pro, If you can slow down a bit so I can catch up with you, this is the kind a tutorial I can follow. Fix those skipped lines 43 to 80 in global styles
Love this video- i have a question tho hopefully you can help- im using react router dom v6 and in Navbar.js it is not rendering any of the pages from the navbardata.js do you have any insight?
Hey person, I know this website maybe a lot of code. I would say this tutorial is targeted for people who have some react knowledge. I will be releasing some short videos regarding react as well, e.g. how to build a modal, react hooks, styled components and scss.
getting this error when trying to build the carousel ./src/components/Carousel/CarouselStyles.js Module not found: Can't resolve 'react-slick' .seems like problem with react-slick. anybody experienced it.
Nice website, I´m trying to learn react for the frontend and flask in the backend. This helps me a lot. Although I get an error with the navbar when I click on "About". It shows me this error: TypeError: Cannot read properties of null (reading 'scrollIntoView'). Thanks for the hardwork and hope you can help me.
Absolutely love the videos man. Question though on this one - I want to have my nav links centered on the screen, not aligned to the right side in full desktop view. I have gone through every single parameter I can imagine in each folder to try and find what is making them align to the right and cannot seem to find it! I even followed the same coding from your other intermediate react tutorial where they are aligned in the center and all of my navbarstyles data matches completely, and it's still aligned to the right! I'm assuming this is probably a very easy fix, so any help you can give me would be greatly appreciated!
Hey, thanks for the feedback. The trick is margin-left:auto property on the line 82 in NavbarStyles.js Basically what it does is pushes everything to the left. In my other video I had a button on the right side of the navbar that also had a margin-left: auto, that pushed everything to its left, therefore centering those navlinks. To solve the problem for this specific project you need to add: > li:last-child { margin-right: auto; } after line 84 in NavbarStyles.js This video will be of help th-cam.com/video/Azfj1efPAH0/w-d-xo.html&ab_channel=KevinPowell It explains how to use margins well.
@@aldarsatori7764 holy christmas tree that response time was impressive! lol I actually removed the original text of the navlogo, changed the navicon to my own image but had to make it bigger so it would look like a normal size, so just doing what you said puts the navlinks slightly off center to the right - but, I am able to now adjust the "margin-left" parameter by a pixel value in order to get it perfectly centered on the screen. I'm sure there's a way to do this automatically which I'll try and see if the video you referenced might explain it, because while I use the pixel value to center it, it loses it's responsiveness until it transitions to mobile. Since my company logo is just text, I guess I could install the custom font into the template and go back to just using the text which should keep it centered perfectly without the additional sizing of the navicon. Either way, thank you SO much! I look forward to learning much more from your videos!
Hey , I am currently enrolled in a bootcamp - we just completed react , although i could follow along would relly appreciate it if you could make this video with regualar javascript.
Great Video, helped me so much in learning new React skills. Anyway i have a question i cant figure out alone it seems. In the Content Section, where the colors change and the text changes from left to right, the section with the animated svg´s: How can i configure seperate Linking in the buttons? How can i give the buttons seperate addresses to skip to, somehow the "linkTo" wont do what it should do and i cant imagine a different solution. Any ideas? Thank you so much anyway
Thank you for the great tutorial, I am getting a weird bug, checked all info and nothing Can't import the named export 'Children' from non EcmaScript module (only default export is available), my guess is a have to delete a dist file that was previously created the error ../node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs., in any event, any help would be appreciated.
Hey, are you using TypeScript any chance, or do you have a custom WebPack. If you configured your own WebPack try adding { type: 'javascript/auto', test: /\.mjs$/, use: [] }. I think the problem is your project cannot read .mjs files for some reason(there could be various reasons)
@@aldarsatori7764 not in this project but it might be webpack I confined in typescript this is where the dist file is coming from and also in visual code I might have enabled TS something lol that now reads each build as a typescript. I tried configuring already: const createExpoWebpackConfigAsync = require('@expo/webpack-config'); // Expo CLI will await this method so you can optionally return a promise. module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync(env, argv); // Allow named imports from CJS into ESM modules config.module.rules.push({ type: 'javascript/auto', test: /\.mjs$/, use: [] }); return config; };
@@aldarsatori7764 Yes, copy/paste fixed the problem I just used your package.json, next.js 12 came out ( I got no issues there) and it just makes our lives easier, Thank you again!
Hey, navbar component had quite a bit of things going on. I will upload a separate 40 minute video that will explain exactly how it works :) Stay tuned!
too much fast & not explained properly its seems complicated for a beginner like me please try to go slow & try to explain properly I watched almost the full video but still not able to understand
I highly doubt you would ever find a proper tutorial for a responsive website. They are all the same, the people making them DO NOT understand, that explaining what their CSS is doing is crucial for others wanting to learn it to understand what is going on. Also, a good tutorial should show a change in the code and the reflection of that change in the behavioiur/look of the webiste. Here the fella i just typing lots of gibberish, never opening the webiste and thinks he is doing a good job. Massive thumbs down.
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
Guys new version of react replaces to and exact component = {Home} to element={}
Thank you. This is indeed the most important comment
this video taught me more about how to actually use styled components in a project instead of a lot of those half baked tutorials whose code don't scale up at all.
This is exactly what i am looking for. Thank you so much
I like your style you are a Pro, If you can slow down a bit so I can catch up with you, this is the kind a tutorial I can follow. Fix those skipped lines 43 to 80 in global styles
I think best styled components video I have ever seen.
Thank you, I love this short tutorials! Subscribed
Thanks,
appreciate your feedback!
Nice tutorial bro, you winned another sub
Thanks for subscribing, there will be more projects!
i liked your video and made it 1K. Feels great!
Thanks for the video. Where did you get the vector images for the Hero Data?
You are awesome. This is a content worth subscribing. Please keep making such wonderful content.
Thanks for your comments, it's really motivating!
Excellent tutorial… thank you
Thanks!
earned a follower...really impressive
Love this video- i have a question tho hopefully you can help- im using react router dom v6 and in Navbar.js it is not rendering any of the pages from the navbardata.js do you have any insight?
hey buddy, im interested in how you setup your global style. can you explain a little?
Hi bro! the best video, but i' m worried with globa-lStyle from line 42 you jumped to line 104. can you fix that it is important to me as a learner
good work!!!! but how can i use buttonLabel: 'View Project' redirect to other link/page
great content, unfortunately I'm not yet able to understand every single line but i can see the light at the end of the tunnel. +1 sub
Hey person, I know this website maybe a lot of code. I would say this tutorial is targeted for people who have some react knowledge. I will be releasing some short videos regarding react as well, e.g. how to build a modal, react hooks, styled components and scss.
@@aldarsatori7764 best of luck, keep going
Great Job. Really impressive. Well done!
Excellent vid. But mine is not displaying anything else except for the navbar and footer. I can't seem to find the solution
Wow super one ☝️
getting this error when trying to build the carousel
./src/components/Carousel/CarouselStyles.js
Module not found: Can't resolve 'react-slick' .seems like problem with react-slick. anybody experienced it.
Hey, this problem can mean a lot of things. However, my guess is try to run 'npm uninstall react-slick' and then 'npm install react-slick'
You have done a great job
where u got the deal.avg and other svg files ??
Bro thanks for your time
Great for lazy programmers who'd love to just copy and paste your repo. I love coding along.
did you create this design or did you get the figma ready?
Nice website, I´m trying to learn react for the frontend and flask in the backend. This helps me a lot. Although I get an error with the navbar when I click on "About". It shows me this error: TypeError: Cannot read properties of null (reading 'scrollIntoView'). Thanks for the hardwork and hope you can help me.
great work
Keep up. bro
Thanks a lot!
love the react vids this is great
Very good tutorial!
Absolutely love the videos man. Question though on this one - I want to have my nav links centered on the screen, not aligned to the right side in full desktop view. I have gone through every single parameter I can imagine in each folder to try and find what is making them align to the right and cannot seem to find it! I even followed the same coding from your other intermediate react tutorial where they are aligned in the center and all of my navbarstyles data matches completely, and it's still aligned to the right! I'm assuming this is probably a very easy fix, so any help you can give me would be greatly appreciated!
Hey, thanks for the feedback. The trick is margin-left:auto property on the line 82 in NavbarStyles.js
Basically what it does is pushes everything to the left. In my other video I had a button on the right side of the navbar that also had a margin-left: auto, that pushed everything to its left, therefore centering those navlinks.
To solve the problem for this specific project you need to add:
> li:last-child {
margin-right: auto;
}
after line 84 in NavbarStyles.js
This video will be of help th-cam.com/video/Azfj1efPAH0/w-d-xo.html&ab_channel=KevinPowell
It explains how to use margins well.
@@aldarsatori7764 holy christmas tree that response time was impressive! lol
I actually removed the original text of the navlogo, changed the navicon to my own image but had to make it bigger so it would look like a normal size, so just doing what you said puts the navlinks slightly off center to the right - but, I am able to now adjust the "margin-left" parameter by a pixel value in order to get it perfectly centered on the screen.
I'm sure there's a way to do this automatically which I'll try and see if the video you referenced might explain it, because while I use the pixel value to center it, it loses it's responsiveness until it transitions to mobile.
Since my company logo is just text, I guess I could install the custom font into the template and go back to just using the text which should keep it centered perfectly without the additional sizing of the navicon.
Either way, thank you SO much! I look forward to learning much more from your videos!
thank you
Hey , I am currently enrolled in a bootcamp - we just completed react , although i could follow along would relly appreciate it if you could make this video with regualar javascript.
Great Video, helped me so much in learning new React skills. Anyway i have a question i cant figure out alone it seems.
In the Content Section, where the colors change and the text changes from left to right, the section with the animated svg´s: How can i configure seperate Linking in the buttons? How can i give the buttons seperate addresses to skip to, somehow the "linkTo" wont do what it should do and i cant imagine a different solution. Any ideas? Thank you so much anyway
nice job
Great video ! subed, liked and please more!! :) love u bro
Could you build a nft project website with a minter.
Sounds interesting, I might take a look into it and build it =)
Sugoii!!
how can i build multiple modals for auth in react? (Register modal , login modal , forgot password modal )
Hey, I will have a separate tutorial about a building a modal. Stay tuned!
@@aldarsatori7764 Waiting Impatiently
Awsome! 👏 ✌ 👍
commenting for the algorithm
Thanks, appreciate it!
You are awesome
Thank you for the great tutorial, I am getting a weird bug, checked all info and nothing Can't import the named export 'Children' from non EcmaScript module (only default export is available), my guess is a have to delete a dist file that was previously created the error ../node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs., in any event, any help would be appreciated.
Hey, are you using TypeScript any chance, or do you have a custom WebPack. If you configured your own WebPack try adding
{
type: 'javascript/auto',
test: /\.mjs$/,
use: []
}.
I think the problem is your project cannot read .mjs files for some reason(there could be various reasons)
@@aldarsatori7764 not in this project but it might be webpack I confined in typescript this is where the dist file is coming from and also in visual code I might have enabled TS something lol that now reads each build as a typescript. I tried configuring already:
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Allow named imports from CJS into ESM modules
config.module.rules.push({
type: 'javascript/auto',
test: /\.mjs$/,
use: []
});
return config;
};
@@aldarsatori7764 Yes, copy/paste fixed the problem I just used your package.json, next.js 12 came out ( I got no issues there) and it just makes our lives easier, Thank you again!
Sponsored by me. Hahahaha
now you can put nothing but route inside routes
You didn't show the Navbar styling, lol, otherwise the video would be perfect
Hey, navbar component had quite a bit of things going on. I will upload a separate 40 minute video that will explain exactly how it works :)
Stay tuned!
too much fast & not explained properly its seems complicated for a beginner like me please try to go slow & try to explain properly I watched almost the full video but still not able to understand
I highly doubt you would ever find a proper tutorial for a responsive website. They are all the same, the people making them DO NOT understand, that explaining what their CSS is doing is crucial for others wanting to learn it to understand what is going on. Also, a good tutorial should show a change in the code and the reflection of that change in the behavioiur/look of the webiste. Here the fella i just typing lots of gibberish, never opening the webiste and thinks he is doing a good job. Massive thumbs down.