Learn MUI (Material UI) in under 10 min!
HTML-код
- Опубликовано: 14 май 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
Exactly what I needed to get started in 10 min! Thanks.
This is just the video I've been looking for, for a very long time! Thank you so much!
I've discovered your channel by this video and, man, that's a great work! Keep uploading more videos!
The production quality is great
Great explanations!
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.
This is really a good content!! Exactly what I was looking for. Hope you make more videos on MUI like this. 🥳🥳🥳
Finally an MUI quickstart tutorial without making things complicated and loosed, kinda motivated to try it again, thank you for this broooo
gawd how I love these to-the-point tutorials
Great video and information.
I would love to watch more on MUI in react.♥️
Thank you for providing such an amazing content in such a shot time span.
really like the style/tone/content of this video hope there is more thank u very much
Wow, thanks for this! I didn't knew how to use Material UI, will give it a try!♥️
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
That is an excellent way to explain. Please, continue more videos like this.
This is amazing. It will help me 10x my workflow on my SAAS. Thanks.
Wow! You actually did it in 9 min ... I went in skeptical, but this gave me enough to get started! Amazing!!
You explained it really well, thank you.. now I know the basic on how to start using it..
buddy, this video really help me to understand what mui is and actually start using it, thank you so much
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!
One of the best mui video . Upload more dude you are perfect
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.
The perfect video that I needed, thank you!
that is the best and simplest video on MUI. thanks bro❤❤❤❤
nice video, learned something new regarding the use of breakpoints on other props
Please make more advanced tutorials on MUI! I love the editing style
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!! 👍
very high quality for 109 subscribers. definitely subbing and im already waiting for next videos!
Thanks! More videos coming very soon ;)
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 ;)
Thanks man I needed a quick tutorial
MUI has been a god send to me for building internal tool UIs, highly recommend
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!
Dude this is AMAZING!! Thank you alot!)
Level of teaching! Just wow. From Bangladesh ❤️
great video, straight to the point
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!
Amazing video! You've gained another subscriber.
Cool video, will practice MUI by this tutorial
Love this! Thank you!
Top level video, for sure. Thanks for the tutorial bro!
Thanks for the support :)
Nice one. Why not you make a complete playlist of how to use MUI in React. I think It will help many aspring developers
Thanks bro! enjoyed the video
You saved hours of my time. Thank ya
SO helpful thank you!
OH MY GOD THIS IS LIFE CHANGING!!!
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!
Wow! Great video :) you rock! ;)
Great job! Perfect tempo for me
You cleared my doubts thank you 😊
Muy buen resumen. Muchas gracias. Me sirvió.
Come on bro keep doing your front-end design with this library love to see your work
You dropped this bro 👑
Great explanation!!!
Completely alwsome, thanks a lot!!
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
That was GREAT!!!
Love this video, good luck mate!
Thanks!
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.
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?
ur sense of humor is a LEVEL !! XD
Wonder full!
amazing. thank you sir :)
i was struggling with material ui. This vid is really helpful for a beginner like me!
Glad to hear that!
Thanks man!
Awesome content 🎉
that's amazing
Good explained.... thanks
Bro, amazing video. Keep it coming
Thanks! More content is on the way 👍
Great Tutorial
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.
best explanation of Mui , keep making videos like this
Thanks, appreciate it!
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!
Amazing way of teaching. Keep it up Bro
Thanks!
Thank you!
Super video, please going on
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 🙏
cooool video!
Thanks. Really helpful.
Nice presentation. Make more videos. Subscribed.
Great Content
Gigachad instructor
Really nice intro..
Thanks ❤
Great video. 👍
Thanks!
thank you so much
good explanation bro
Thank you.
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.
Yoo nice video
Nice❤
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
amazing video!
Thanks!
More videos like that and I am sure your going to get thousands of subscribers in no time
Thanks! Next one is one the way🫡
Awesome !
Thanks!
Amazing
thanks!
Dude, you deserve 1m subs
Haha thanks!
I subscribed to this legendary guy 🤝
Haha thanks!
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 👍
Need more videos!!!