Build a responsive website in React using Styled Components - Intermediate React Project
HTML-код
- Опубликовано: 13 июн 2024
- In this episode you will see how to build a website in React.js using styled components. You can learn how to create a smooth scroll effect, react router, carousel and a responsive layout.
0:00 - Introduction
1:37 - Start
3:05 - Packages
3:50 - Global styles
8:05 - Components
9:18 - App.js and Router
11:03 - Hero section
15:03 - Fonts
16:14 - Navbar
23:59 - Features
26:43 - Content section
31:10 - Carousel
34:58 - Finishing up
LinkedIn: / aldarwizard
Patreon: www.patreon.com/user?u=62764356
Github: github.com/itSatoriCode/react...
******************************************************************
Find more about framer motion here: www.framer.com/motion/
**************************************************************************************
Learn Styled Components here: • Styled Components in 1...
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.
Guys new version of react replaces to and exact component = {Home} to element={}
Thank you. This is indeed the most important comment
I think best styled components video I have ever seen.
Thank you, I love this short tutorials! Subscribed
Thanks,
appreciate your feedback!
Great Job. Really impressive. Well done!
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!
You have done a great job
Very good tutorial!
Nice tutorial bro, you winned another sub
Thanks for subscribing, there will be more projects!
earned a follower...really impressive
i liked your video and made it 1K. Feels great!
love the react vids this is great
great work
Keep teaching.... Subscribed
Thanks :)
Bro thanks for your time
Wow super one ☝️
thank you
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?
Great video ! subed, liked and please more!! :) love u bro
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 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
Thanks for the video. Where did you get the vector images for the Hero Data?
Awsome! 👏 ✌ 👍
hey buddy, im interested in how you setup your global style. can you explain a little?
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 ruclips.net/video/Azfj1efPAH0/видео.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!
Sugoii!!
Excellent vid. But mine is not displaying anything else except for the navbar and footer. I can't seem to find the solution
Keep up. bro
Thanks a lot!
good work!!!! but how can i use buttonLabel: 'View Project' redirect to other link/page
You are awesome
where u got the deal.avg and other svg files ??
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
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.
did you create this design or did you get the figma ready?
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'
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
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!
Great for lazy programmers who'd love to just copy and paste your repo. I love coding along.
Could you build a nft project website with a minter.
Sounds interesting, I might take a look into it and build it =)
commenting for the algorithm
Thanks, appreciate it!
11:15
Sponsored by me. Hahahaha
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.