Learn MUI (Material UI) in under 10 min!
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- In this video you will learn everything you need to know to get started using MUI's Material UI,
which is a React component library for Material Design.
If you found this video helpful,
please give it a like 👍 and subscribe 📨 for more.
🐦 Follow me on Twitter
/ 0xandriy
⏰ Timestamps
0:00 Intro - What is MUI / Material UI?
1:12 Material UI basics (Container, Box, Typography, sx prop)
4:58 Creating a website with Material UI
8:42 Outro
📎 Helpful links
MUI: mui.com/
Material UI: mui.com/material-ui/getting-s...
Material Design: m3.material.io/
🎵 Where I get my music from
Epidemic Sound: www.epidemicsound.com/referra...
Local Forecast - Slower by Kevin MacLeod
Link: filmmusic.io/song/3988-local-...
License: creativecommons.org/licenses/...
🤝 Services I use
NordVPN - go.nordvpn.net/SH4vc
🎥 My gear
Monitor - Dell S3423DWC 34
amzn.to/3XcAXuR
Headphones - AKG K240 Studio
amzn.to/3J7vAZJ
Earbuds - Jabra Elite 4 Active
amzn.to/3Hm4k8M
Mic - HyperX SoloCast
amzn.to/3QLS6tg
Keyboard - Apple Magic Keyboard
amzn.to/3GDz9UO
Trackpad - Apple Magic Trackpad
amzn.to/3CQAq9P
Camera - Sony a6400
amzn.to/3w4d7Wf
Lens 1 - Sony 16-50mm f/3.5-5.6
amzn.to/3iDSk99
Lens 2 - Sony - FE 50mm F1.8 Standard Lens
amzn.to/3GHFheU
Lens 3 - Samyang SY12M-E-BK 12mm F2.0
amzn.to/3WclDgM
📬 Inquiries (Collabs, Sponsorships etc.)
frontstartdev@gmail.com
Found this helpful? You can buy me a coffee ☕ bmc.link/frontstart
Any topics you want to see me do? Comment below.
Why not a video on Vue js or Svelte js ?
@@asparshraj9016 will be coming for sure 👌
NextJS would be a great idea
Dude, you're like the second fireship 🔥. Please make videos about other component libraries and frameworks. I now learned MUI. DAMN!
Can u include mui to nextjs 13 as well
Bro your video production quality is amazing, just continue to upload more. Your channel will have millions of subscribers in no time..
Thanks! Next video is already cooking 👨🍳 stay tuned.
Just like Fireship
This is just the video I've been looking for, for a very long time! Thank you so much!
Finally an MUI quickstart tutorial without making things complicated and loosed, kinda motivated to try it again, thank you for this broooo
I really love that Fireship editing style you went for. Keep up the good work !
Thanks. Yeah, he’s a big inspiration for me ;)
how he do that ?(talking about how he show text without typing like an endless endo/redo)
@@Hawk______ Using Ctrl+V and video editing
@@Hawk______ I guess he writes the whole code first and then cuts the code in parts and then undos it.
@@Hawk______ he's a wizard and compiles his thoughts to code instantaneously
gawd how I love these to-the-point tutorials
Love how you tackled every concept by actually using it , this is my first time watching your channel , definitely subscribed!
Glad you found it helpful! Thanks!
The production quality is great
Great explanations!
Wow! You actually did it in 9 min ... I went in skeptical, but this gave me enough to get started! Amazing!!
Thank you! Learned a lot. I was not sure if I should combine MUI+Tailwind but now MUI alone is my way to go 😊
Thank you, so helpful! I've watched this video four times now. I love that you pack so much practical content into a short and engaging video. Please keep making amazing content!
Thanks! Glad it helped you!
Exactly what I needed to get started in 10 min! Thanks.
Thank you for providing such an amazing content in such a shot time span.
I am so glad your video was recomended to me. I am gonna try doing it and customize it. You got yourself a new subscriber.
buddy, this video really help me to understand what mui is and actually start using it, thank you so much
I've discovered your channel by this video and, man, that's a great work! Keep uploading more videos!
Hehe I love the memes and the random gifs so much, makes learning so much more fun. You earned yourself a new sub.
Glad you like it ;)
The perfect video that I needed, thank you!
very high quality for 109 subscribers. definitely subbing and im already waiting for next videos!
Thanks! More videos coming very soon ;)
One of the best mui video . Upload more dude you are perfect
Wow, thanks for this! I didn't knew how to use Material UI, will give it a try!♥️
This is really a good content!! Exactly what I was looking for. Hope you make more videos on MUI like this. 🥳🥳🥳
really like the style/tone/content of this video hope there is more thank u very much
I just couldn't believe that MUI can be narrowed down to 10 minutes when I found your video, but you proved me wrong.
GREAT Video!!! Keep it up!! 👍
that is the best and simplest video on MUI. thanks bro❤❤❤❤
This is the best video for material-ui, i have seen so far, and i have seen many as of now, many video just start out with code and not explaining the benefits and reasons for the components we are using , but this video was exceptional ! Thank you very much for making this !!
Glad it helped you!
Great video, I was scared to learn Material UI since the docs aren't very good for beginners, but when I finished this video, I suddenly can read around 60% of the docs with ease.
Thanks man I needed a quick tutorial
That is an excellent way to explain. Please, continue more videos like this.
You explained it really well, thank you.. now I know the basic on how to start using it..
Great video and information.
I would love to watch more on MUI in react.♥️
MUI has been a god send to me for building internal tool UIs, highly recommend
This is amazing. It will help me 10x my workflow on my SAAS. Thanks.
Level of teaching! Just wow. From Bangladesh ❤️
Please make more advanced tutorials on MUI! I love the editing style
You saved hours of my time. Thank ya
Dude this is AMAZING!! Thank you alot!)
You dropped this bro 👑
OH MY GOD THIS IS LIFE CHANGING!!!
nice video, learned something new regarding the use of breakpoints on other props
Amazing video! You've gained another subscriber.
SO helpful thank you!
Cool video, will practice MUI by this tutorial
Great explanation!!!
Thanks bro! enjoyed the video
Great job! Perfect tempo for me
great video, straight to the point
Love this! Thank you!
That was GREAT!!!
Top level video, for sure. Thanks for the tutorial bro!
Thanks for the support :)
Completely alwsome, thanks a lot!!
ur sense of humor is a LEVEL !! XD
I have been avoiding styling libraries because I love SASS but I guess it's time to take a look~
wait 250 subs? I thought you had like 50k! amazing quality and pace!
You can use an array instead of the object for responsiveness as well, makes the code really clean once you know the value placements
Example
sx={{
width: ['100px', '200px'],
color: ['red', 'blue']
}}
the order is from [xs, sm, md] and so on?
@@DanielTames Yeah low to high
@@fronix5060 awesome!! That’s good to know
Came to the comments to say exactly this. Makes responsive CSS declarations super easy. I have become a big fan of styled-system and emotion.
Nice one. Why not you make a complete playlist of how to use MUI in React. I think It will help many aspring developers
Muy buen resumen. Muchas gracias. Me sirvió.
Love this video, good luck mate!
Thanks!
Wow! Great video :) you rock! ;)
Wonder full!
Thanks. Really helpful.
Nice presentation. Make more videos. Subscribed.
i was struggling with material ui. This vid is really helpful for a beginner like me!
Glad to hear that!
You cleared my doubts thank you 😊
Come on bro keep doing your front-end design with this library love to see your work
amazing. thank you sir :)
I have begun using Tailwind and I love it so far, it's more work to create the UI similar to Material UI, but it's still manageable, but I prefer Mui over Bootstrap 5, the components are better looking by default
best explanation of Mui , keep making videos like this
Thanks, appreciate it!
wow i love you ure a hero of the week
MUI will save me alot of time making my portfolio site which im designing so sloowlyyyy even without a small details ehhh
Thanks. It really is a time-saver. Have fun trying it out.
Good explained.... thanks
Thanks man!
Great Tutorial
Thank you!
Excellent video, you keep my attention the whole video which is really rare since I have the attention span of a squirrel in drugs. Overall good job!
Haha, glad to hear that!
Awesome content 🎉
Bro, amazing video. Keep it coming
Thanks! More content is on the way 👍
Great Content
cooool video!
Amazing way of teaching. Keep it up Bro
Thanks!
I really like the video and the video style! It’s very comprehensive for its length and I have understood some really important MUI concepts (Container, Box, ThemeProvider, sx..) How do you find the Joy UI Design System from MUI? I’ll definitely have a look at it because I find Material UI a little bit boring. Box and sx are in combination an interesting concept but regarding sx I am unsure. I don’t like concepts like Tailwind because you always have to learn both (CSS and the Tailwind API) and the code gets very hard to read after a few years (when you forgot most about Tailwind) or for team members who don’t know Tailwind. With sx it’s the same. Perhaps I use Emotion css props with normal divs where you write normal CSS in literal templates and pass those strings to the CSS prop of the component. Ok, you definitely write more code, but it stays always understandable over the years when you know CSS. I don’t know if Emotion css prop works properly together with MUI because Emotion stated that you shouldn’t mix up Emotion styled components and css props. Do you have experience with that?
that's amazing
Thanks ❤
what the fuck? You only have 41 subs? Prepare to hit 10k in a few months. Your content is top-tier
Thanks! Glad you like it 🙏
Really nice intro..
Gigachad instructor
Super video, please going on
amazing video!
Thanks!
Thank you.
thank you so much
Dude, you deserve 1m subs
Haha thanks!
Helped a lot :)
sx={{ love: high }}
good explanation bro
I subscribed to this legendary guy 🤝
Haha thanks!
no way i wish i knew about this sooner... was doing css on my own and just beating myself up for not understanding transitioning and color theming lol
Great video. 👍
Thanks!
Great Video!! It would be amazing if you teach us how to personalize MUI more, it would be really useful.
Thanks! That's a good idea. I think 'll make one soon. Let me know if you have something specific you wanna know.
@@frontstartdev How to make components not look like material ui, or at least not that much, like a navbar, how to make it look better. I don't have a lot of experience in web dev and I have built a couple of sites using react-material ui and they both look pretty much the same
@@pacoluna7969 I see. There are a lot of ways to fully customize them. I’ll make a video on that soon. Stay tuned.
Nice❤
Awesome !
Thanks!
thanks!
Yoo nice video
Amazing
Love the production quality here, surprised you only have 75 subscribers -- but please get a pop filter for your mic lol.
Thanks! Yeah it hurts my ears too haha. Gonna fix that 👍