Learn MUI (Material UI) in under 10 min!

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.)
[e-mail]

[@frontstartdev]

Found this helpful? You can buy me a coffee ☕ bmc.link/frontstart Any topics you want to see me do? Comment below.

[@asparshraj9016]

Why not a video on Vue js or Svelte js ?

[@frontstartdev]

@@asparshraj9016 will be coming for sure 👌

[@ratao_kinax9194]

NextJS would be a great idea

[@usua1myanmarian]

Dude, you're like the second fireship 🔥. Please make videos about other component libraries and frameworks. I now learned MUI. DAMN!

[@voontaotan1095]

Can u include mui to nextjs 13 as well

[@asparshraj9016]

Bro your video production quality is amazing, just continue to upload more. Your channel will have millions of subscribers in no time..

[@frontstartdev]

Thanks! Next video is already cooking 👨‍🍳 stay tuned.

[@killzone3507]

Just like Fireship

[@TradeWithJon]

This is just the video I've been looking for, for a very long time! Thank you so much!

[@alesholman801]

I really love that Fireship editing style you went for. Keep up the good work !

[@frontstartdev]

Thanks. Yeah, he’s a big inspiration for me ;)

[@Hawk______]

how he do that ?(talking about how he show text without typing like an endless endo/redo)

[@frontstartdev]

@@Hawk______ Using Ctrl+V and video editing

[@amaan0]

@@Hawk______ I guess he writes the whole code first and then cuts the code in parts and then undos it.

[@Sammysapphira]

​@@Hawk______ he's a wizard and compiles his thoughts to code instantaneously

[@CodexLink]

Finally an MUI quickstart tutorial without making things complicated and loosed, kinda motivated to try it again, thank you for this broooo

[@nostranostra1176]

The production quality is great Great explanations!

[@yumyum7196]

gawd how I love these to-the-point tutorials

[@firasreggai5249]

Love how you tackled every concept by actually using it , this is my first time watching your channel , definitely subscribed!

[@frontstartdev]

Glad you found it helpful! Thanks!

[@rss-bn2ub]

Exactly what I needed to get started in 10 min! Thanks.

[@shiro66]

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.

[@ahmedmusawir]

Wow! You actually did it in 9 min ... I went in skeptical, but this gave me enough to get started! Amazing!!

[@katekelly008]

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!

[@frontstartdev]

Thanks! Glad it helped you!

[@filipedavila4366]

I've discovered your channel by this video and, man, that's a great work! Keep uploading more videos!

[@naveedalirehmani4135]

Thank you for providing such an amazing content in such a shot time span.

[@lashabidzinashvili299]

very high quality for 109 subscribers. definitely subbing and im already waiting for next videos!

[@frontstartdev]

Thanks! More videos coming very soon ;)

[@AliMalik-yt5ex]

Hehe I love the memes and the random gifs so much, makes learning so much more fun. You earned yourself a new sub.

[@frontstartdev]

Glad you like it ;)

[@vatsal_gamit]

This is really a good content!! Exactly what I was looking for. Hope you make more videos on MUI like this. 🥳🥳🥳

[@khuramshahzad9089]

Great video and information. I would love to watch more on MUI in react.♥️

[@kevinz1991]

really like the style/tone/content of this video hope there is more thank u very much

[@AnweshAdhikari]

Wow, thanks for this! I didn't knew how to use Material UI, will give it a try!♥️

[@NewsInsightsbyCharlie]

That is an excellent way to explain. Please, continue more videos like this.

[@lecoleadstefnum]

This is amazing. It will help me 10x my workflow on my SAAS. Thanks.

[@im_beh2272]

One of the best mui video . Upload more dude you are perfect

[@GuardingPearSoftware]

Thank you! Learned a lot. I was not sure if I should combine MUI+Tailwind but now MUI alone is my way to go 😊

[@brangtoggez6363]

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.

[@user-sf9ow6ir3o]

buddy, this video really help me to understand what mui is and actually start using it, thank you so much

[@basil127]

You explained it really well, thank you.. now I know the basic on how to start using it..

[@thesm9734]

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!! 👍

[@HarshPatel-zp5if]

Saviour bro...!!! Just loved the crash course. Really impressive. Keep up the good work.

[@adrianCoding]

Thanks man I needed a quick tutorial

[@harshitjoshi3082]

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 !!

[@frontstartdev]

Glad it helped you!

[@Ouba1]

great video, straight to the point

[@Creatos]

Please make more advanced tutorials on MUI! I love the editing style

[@crazychase443]

The perfect video that I needed, thank you!

[@ZombieInside]

that is the best and simplest video on MUI. thanks bro❤❤❤❤

[@fnfal113]

nice video, learned something new regarding the use of breakpoints on other props

[@khantsithu4383]

Amazing video! You've gained another subscriber.

[@duckmasterflex]

MUI has been a god send to me for building internal tool UIs, highly recommend

[@vladimirking1574]

Dude this is AMAZING!! Thank you alot!)

[@jamesmay5088]

Wow! Great video :) you rock! ;)

[@knaickerUK76]

Awesome kick-starter!

[@David-zh2kh]

Cool video, will practice MUI by this tutorial

[@dude2542]

OH MY GOD THIS IS LIFE CHANGING!!!

[@ratao_kinax9194]

Top level video, for sure. Thanks for the tutorial bro!

[@frontstartdev]

Thanks for the support :)

[@battlebear]

Love this! Thank you!

[@azimuddinahamed]

Level of teaching! Just wow. From Bangladesh ❤️

[@olymahmud9909]

Thanks bro! enjoyed the video

[@prasenjitbasu6152]

Nice one. Why not you make a complete playlist of how to use MUI in React. I think It will help many aspring developers

[@Basil_Porphyrogenitos]

You dropped this bro 👑

[@enjamurisagar3554]

You saved hours of my time. Thank ya

[@eeshau]

SO helpful thank you!

[@felixsvensson5265]

Great job! Perfect tempo for me

[@nirajbhanushali7693]

You cleared my doubts thank you 😊

[@hemakasen007]

Love this video, good luck mate!

[@frontstartdev]

Thanks!

[@letaciogalvao9908]

Completely alwsome, thanks a lot!!

[@sumanthachark]

Great explanation!!!

[@sdfsfsfd437]

Muy buen resumen. Muchas gracias. Me sirvió.

[@fronix5060]

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'] }}

[@DanielTames]

the order is from [xs, sm, md] and so on?

[@fronix5060]

@@DanielTames Yeah low to high

[@DanielTames]

@@fronix5060 awesome!! That’s good to know

[@theresamclaird1572]

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.

[@nidhinsnair]

Thanks. Really helpful. Nice presentation. Make more videos. Subscribed.

[@tunde6159]

That was GREAT!!!

[@sweatypotato248]

Come on bro keep doing your front-end design with this library love to see your work

[@jnayehsirine6222]

ur sense of humor is a LEVEL !! XD

[@8koi245]

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!

[@joshDotJS]

amazing. thank you sir :)

[@CJ-nz5rt]

i was struggling with material ui. This vid is really helpful for a beginner like me!

[@frontstartdev]

Glad to hear that!

[@kasper369]

Bro, amazing video. Keep it coming

[@frontstartdev]

Thanks! More content is on the way 👍

[@ankusarmah6795]

best explanation of Mui , keep making videos like this

[@frontstartdev]

Thanks, appreciate it!

[@jeanchristophegomis4650]

Wonder full!

[@oluap7449]

Awesome content 🎉

[@hamzamo.7180]

what the fuck? You only have 41 subs? Prepare to hit 10k in a few months. Your content is top-tier

[@frontstartdev]

Thanks! Glad you like it 🙏

[@1Chitus]

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

[@y0z64]

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!

[@frontstartdev]

Haha, glad to hear that!

[@qweqwe_Flinstone]

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

[@frontstartdev]

Thanks. It really is a time-saver. Have fun trying it out.

[@psicotrogato]

Good explained.... thanks

[@vinushan24]

Thanks man!

[@tumon001]

Great Tutorial

[@hamzasohail3646]

Amazing way of teaching. Keep it up Bro

[@frontstartdev]

Thanks!

[@danielgruner]

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?

[@natnaelsisay1424]

Great Content

[@lazyfrontender]

Super video, please going on

[@dinesh.p8642]

Thank you!

[@roze1571]

cooool video!

[@faizanahmed9304]

amazing video!

[@frontstartdev]

Thanks!

[@mnnw148]

that's amazing

[@kushalp9159]

Great video. 👍

[@frontstartdev]

Thanks!

[@Blinknone]

Really nice intro..

[@mrunknown7405]

Gigachad instructor

[@nemila4904]

More videos like that and I am sure your going to get thousands of subscribers in no time

[@frontstartdev]

Thanks! Next one is one the way🫡

[@oceansi]

I subscribed to this legendary guy 🤝

[@frontstartdev]

Haha thanks!

[@henyadose]

good explanation bro

[@njengathegeek]

Dude, you deserve 1m subs

[@frontstartdev]

Haha thanks!

[@pacoluna7969]

Great Video!! It would be amazing if you teach us how to personalize MUI more, it would be really useful.

[@frontstartdev]

Thanks! That's a good idea. I think 'll make one soon. Let me know if you have something specific you wanna know.

[@pacoluna7969]

@@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

[@frontstartdev]

@@pacoluna7969 I see. There are a lot of ways to fully customize them. I’ll make a video on that soon. Stay tuned.

[@lottexy]

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

[@chetanpadhen7780]

Thanks ❤

[@prakash-niroula]

Yoo nice video

[@SadieandCompany]

Thanks! good video style. A deeper dive on some MUI specifics, like Forms would be cool. I think I got 1000 sub ;)

[@frontstartdev]

Congrats and thanks! That’s a good idea!

[@user-tf1lj3bf9x]

thank you so much

[@nickoates]

Love the production quality here, surprised you only have 75 subscribers -- but please get a pop filter for your mic lol.

[@frontstartdev]

Thanks! Yeah it hurts my ears too haha. Gonna fix that 👍

[@sathasivamthirumoorthi7950]

Awesome !

[@frontstartdev]

Thanks!

[@krishna-santosh]

Thank you.