How to Make a React Website Using Styled Components - Beginner Tutorial Webull Stock Website Design
HTML-код
- Опубликовано: 16 май 2024
- If you want to get 2 FREE Stocks valued up to $1850, you can here bit.ly/webull-join
Learn how to make a react website using styled components in this beginner friendly tutorial. We will build the Webull stock website for the design. We will make the hero section and navbar. Feel free to refactor the code and send me your updates!
Source Code:
www.codavilla.com/posts/how-t...
Timeline
0:00 What we are building
1:12 Creating React App
3:40 Creating Project Files
6:04 Editing Hero Section
17:38 Editing Navbar
22:18 Installing React Router Dom
30:30 Creating Global Styles
32:35 Installing React Icons
Check out this awesome tech gear
Macbook M1: amzn.to/3nBvfkM
Wireless Keyboard: amzn.to/2Wxf5g1
Wireless Mouse: amzn.to/3r6VRfj
Wireless Earphones: amzn.to/3gZlLgt
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Check out my other React Website Videos
Make a React Real Estate Website
• Make a React Website w...
Make a React Website Using Tailwind CSS
• Make a React Website w...
Make a Website using Gatsby & Graph QL
• Build a Responsive Web...
Some links in the description are affiliate links, which means that if you use them I will receive a small commission.
I am very addicted to your tutorials. Happy to share my feeling with you. You are my motivation to learn React.
seriously, probably the best channel right now - salud
Definitively
one of the best React developers on YT, you should be invited to the Brad Traversy Channel. I like your websites created in React!!!
This is amazing. I learned a lot. Hope to see typescript and react tutorial website build for beginners. ✨😎
This is exactly what I needed. All the updoots!
I just Found your Channel and I love it. Great tutorials
awesome, man. Love these series so much. Ima click Ads banner to support you 🤩
You have the best video. Keep making !!!!!
Your content quality is dope 😀💥🔥🔥
thanks brother, everything I know about react is because I started with your videos before. Thanks for bringing such content for free.
great to hear Mateus! thanks
Thank you Brian it’s beautiful!
Thanks!
This is some very nice content ! I love your channel !
Hey Brian! Thanks for another great tutorial! Have you considered doing a tutorial of Gatsby and Strapi? All the best!
You're seriously amazing brian!
Thanks Dishant!
Really Amazing content !!!
Brian the hero again
Brian, you're so amazing bro!
Thanks Mateo!
Thanks you. React filter-select tutorial.
Great tutorial Brian !
Thanks!
Thank you Brother..
good content))
I gave up, it was very difficult for me. But I decided to go back
This is so great
I want to become like you
I hope you teach us how you pick your color palletes they are beautiful or whats your design process in structuring design? I really need to improve my design still sucks
Very good❤
Hey Brian, i love your work. Have you thought about pushing your channel to the next level by making dynamic websites ? With your React skills I think there is a way to make amazing projects !
yeah the only thing is websites with more complex parts take super long to build, so if I have the time I could, but rn I'm super busy with other projects and businesses atm
do you prefer tailwind or react-bootstrap for react js please suggest
what a saint
Brother need a help, so If I want to be a React developer, should I start with HTML, CSS, JS then React or, Should I learn design skills first, like you did the UX nanodegree, so should i start with the UX course by Google on coursera or first become a good react developer then improve my design skills?
what software you use to do screen recording?
This is fantastic, the only problem I have is that I closed the project and the website then the next day I tried opening it again but it said I must be in scope for it to work. How can I fix this?
can you make a video on how to make a react website saving client side data? maybe IndexedDB, or localstorage and even make an electron ap using dexie.js.
when I type yarn start it shows 'yarn : The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ yarn start
+ ~~~~
+ CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException'
what should I do now?
How does it autocorrect in js? mine only does it in css & html
greate
Somebody please help me,
I got error when me adding /macro into styled-components, it says ReferenceError: styled is not defined.
Does anyone know how to fix it?
Hey brian
23:17 my app crashed when i reloaded it pls help me!.
Want to learn more creating statistics Graph and heat map on React JS
Dang that's a great website
yeah webull site is pretty clean
Very good video as always Brian, but one thing that I would like is that you get a new microphone since there is this shhh sound in the background , other than that amazing tutorial as always , keep up the good work man :)
that's just my mac dying cause I'm recording + coding. I'll have to get a new computer soon so that noise will go away
@@briandesign Alright , very good news :D Greetings from Luxembourg ^^
Guys is the login signup working?
want more react project
Ever though about building a dynamic slider? I've been doing a lot of gatsby lately and think it be cool to build a react slider from scratch but then there is the challenge of GatsbyImage.
I made a basic react slider vid, but I haven't done it with gatsby yet. I made a gatsby site that maps through graphql data and shows images on your screen, but you'd have to refactor that code and somehow turn it into a slider instead. I'm sure there are other tutorials somewhere that show a gatsby image slider that you could learn from
@@briandesign ya so far I've done about every gatsby tutorial out there but some are gatsby 2 ans gatsby 3 regarding images is completely different now.
Create a master course about react For Beginner and also for advance developer. plz plz plz.
sir i have subscribe your channel.so want ecommers website only react with axios.please
how did you make so that it picked up autocomplete CSS? When I type CSS with styled components it just doesn't pop up like a normal CSS
nvm, just found my answer (vscode-styled-components extension) to highlight css...
@@TheLollercaster Thank you so much!
@@cuongquoc4936 you're welcome :)
Could you do this with material-ui?
I can add that to my list. If there's any other cool sites you like I could make those instead
@@briandesign I've had to start using styled components in material-ui and it's been challenging at times... especially if you want to use react-spring. Thanks
I made a basic website in react with tailwind css. Not sure if that helps, but you can check that vid out and see how I set things up
@@briandesign they are two different worlds.
no bots were harmed while making this video, so they stopped disliking
Clone Netflix in react js
29:16
First
we need justice. no video for 2 months. did you forget your youtube password ?
Now asking my self.
How i make better website development way better then this and not having a youtube channel