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.
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'] }}
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!
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 !!
Great video! That put aside, this IS actually reinventing the wheel! Little to none advantage over writing modular CSS and learning a new "language" that's gonna be useful ONLY for this methodology (if not only for the current version). MHO to who may read it: learn proper CSS (SCSS) and use some modular template that somebody has already made, tweak it to your liking and there you go: now you know something that's truly useful on the market! 😉
But this is JSS (SCSS), the MUI developers have abstracted certain props to serve as themable properties, such as an 8-pixel grid, everything else is the same. It's important to note that this feature isn't just about styling, but also about construction. The SX prop or Emotion's CSS prop preprocessor accept SCSS, which is a game-changer in terms of building modular components. This technique enables the creation of truly scalable components, although the examples in the video do not fully demonstrate its potential. It's necessary to know how to write CSS for this, and doing so in vanilla CSS is considered outdated, generally. Even without using MUI, this is a easily replicable pattern that you can use on your own components, by leveraging Emotion's CSS prop into your project. Naming classes using SCSS is an old-school approach that this feature eliminates. This enables the recreation of class names and their availability for extension by component, which is difficult to achieve with vanilla CSS. While not impossible, it adds unnecessary complexity. It's worth noting that this feature is most beneficial for highly scalable applications rather than template-based layouts, although if your thing is doing it the right way, it should serve the same purpose. Just saying, if you use templates maybe you are not that much into frontend applications.
@@dallas-cole You only add to what I mean. Learn all that is too much for a project. I never said you don't use SCSS here, but you need to learn a full set of new directives and tags, structure and layout. I construct non-standard systems. This won't fit. If you like it tho, It's great that it exists, but my projects never resemble the previous one. I don't remember the last time I made a form to fill in data. Cheers.
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
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
I consider Tailwind and Material UI to be in two different categories. As you said, Tailwind is just for writing CSS and you have to build everything from scratch, whereas Material UI provides complete and functional components. I also totally prefer it over Bootstrap ;)
@@frontstartdev yes, I feel the same, when I want more control over the UI, I use Tailwind, but if I want a decent looking UI (mainly for testing backend etc) I use BS5
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!
@@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
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?
Regarding interviews and jobs, I have a few questions that you can answer. Your answers will be a great help. 1st = Is any computer science degree required for a job because I'm a commerce student and I'm in the second year of BBA. 2nd = Only those who can speak English fluently will get remote jobs, cause I'm from India 3rd= I have learned MERN stack and know the basics of java, is that enough? 4th= Is Data structures and algorithms required for the interview? 5th = best and fastest way to get a better remote job.
Yes, sure. 1. No, it’s not. Actually I don’t have a CS degree either. Will make a video on this topic soon. 2. I think your English is fine. Most of the work is programming anyway. You just have to be able to communicate with colleagues and understand requirements for what you’re building. 3. That will depend on the job that you apply for, but that sounds like a good start. 4. This again depends on the job and company. For web development it’s not really a requirement. Especially in the beginning. 5. I think there are websites exclusively for remote job postings. With a bit of Googling I’m sure you’ll find something. Also, applying directly to companies and asking whether you could work remotely is also an option. Hope this helps.
@@frontstartdevThanks bro, you are a nice guy because most people don't reply usually and yeah, your reply seems literally helpful. I forgot to ask if I could copy projects from the internet and put them on my resume in their current form or after making changes to them. Will that can cause any issues in the interview?
"the sx prop can be a good alternative to for example tailwind" *Proceeds to list off things that can all also easily be done in tailwind, thus giving no reason to not just use tailwind anyway*
![[#2024MAMA] BIGBANG (빅뱅) - 뱅뱅뱅 (BANG BANG BANG) + FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/EQsYfiPR9uM/mqdefault.jpg)
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
Finally an MUI quickstart tutorial without making things complicated and loosed, kinda motivated to try it again, thank you for this broooo
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
gawd how I love these to-the-point tutorials
Thank you so much for so much info in under 10 minutes. This is what i was looking for. Really appreciated.
This is just the video I've been looking for, for a very long time! Thank you so much!
Wow! You actually did it in 9 min ... I went in skeptical, but this gave me enough to get started! Amazing!!
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.
Exactly what I needed to get started in 10 min! Thanks.
MUI has been a god send to me for building internal tool UIs, highly recommend
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
buddy, this video really help me to understand what mui is and actually start using it, thank you so much
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 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!! 👍
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!
Thank you! Learned a lot. I was not sure if I should combine MUI+Tailwind but now MUI alone is my way to go 😊
Nice one. Why not you make a complete playlist of how to use MUI in React. I think It will help many aspring developers
very high quality for 109 subscribers. definitely subbing and im already waiting for next videos!
Thanks! More videos coming very soon ;)
very helpful thank you !!
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 ;)
Thank you for providing such an amazing content in such a shot time span.
Thanks, this video helps me prepare for an internship!
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!
Level of teaching! Just wow. From Bangladesh ❤️
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!
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.
Saviour bro...!!! Just loved the crash course. Really impressive. Keep up the good work.
OH MY GOD THIS IS LIFE CHANGING!!!
One of the best mui video . Upload more dude you are perfect
Great video and information.
I would love to watch more on MUI in react.♥️
really like the style/tone/content of this video hope there is more thank u very much
You explained it really well, thank you.. now I know the basic on how to start using it..
I've discovered your channel by this video and, man, that's a great work! Keep uploading more videos!
Wow, thanks for this! I didn't knew how to use Material UI, will give it a try!♥️
Come on bro keep doing your front-end design with this library love to see your work
Great introductory video bro, thanks a lot!
This is amazing. It will help me 10x my workflow on my SAAS. Thanks.
that is the best and simplest video on MUI. thanks bro❤❤❤❤
nice video, learned something new regarding the use of breakpoints on other props
Great video! That put aside, this IS actually reinventing the wheel! Little to none advantage over writing modular CSS and learning a new "language" that's gonna be useful ONLY for this methodology (if not only for the current version). MHO to who may read it: learn proper CSS (SCSS) and use some modular template that somebody has already made, tweak it to your liking and there you go: now you know something that's truly useful on the market! 😉
But this is JSS (SCSS), the MUI developers have abstracted certain props to serve as themable properties, such as an 8-pixel grid, everything else is the same. It's important to note that this feature isn't just about styling, but also about construction. The SX prop or Emotion's CSS prop preprocessor accept SCSS, which is a game-changer in terms of building modular components. This technique enables the creation of truly scalable components, although the examples in the video do not fully demonstrate its potential. It's necessary to know how to write CSS for this, and doing so in vanilla CSS is considered outdated, generally. Even without using MUI, this is a easily replicable pattern that you can use on your own components, by leveraging Emotion's CSS prop into your project.
Naming classes using SCSS is an old-school approach that this feature eliminates. This enables the recreation of class names and their availability for extension by component, which is difficult to achieve with vanilla CSS. While not impossible, it adds unnecessary complexity. It's worth noting that this feature is most beneficial for highly scalable applications rather than template-based layouts, although if your thing is doing it the right way, it should serve the same purpose. Just saying, if you use templates maybe you are not that much into frontend applications.
@@dallas-cole You only add to what I mean. Learn all that is too much for a project. I never said you don't use SCSS here, but you need to learn a full set of new directives and tags, structure and layout. I construct non-standard systems. This won't fit. If you like it tho, It's great that it exists, but my projects never resemble the previous one. I don't remember the last time I made a form to fill in data. Cheers.
i was struggling with material ui. This vid is really helpful for a beginner like me!
Glad to hear that!
No mention of versions used… awesome
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.
That is an excellent way to explain. Please, continue more videos like this.
Thanks man I needed a quick tutorial
The perfect video that I needed, thank you!
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
I consider Tailwind and Material UI to be in two different categories. As you said, Tailwind is just for writing CSS and you have to build everything from scratch, whereas Material UI provides complete and functional components. I also totally prefer it over Bootstrap ;)
@@frontstartdev yes, I feel the same, when I want more control over the UI, I use Tailwind, but if I want a decent looking UI (mainly for testing backend etc) I use BS5
Cool video, will practice MUI by this tutorial
Please make more advanced tutorials on MUI! I love the editing style
This is really a good content!! Exactly what I was looking for. Hope you make more videos on MUI like this. 🥳🥳🥳
great video, straight to the point
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 saved hours of my time. Thank ya
Awesome kick-starter!
best explanation of Mui , keep making videos like this
Thanks, appreciate it!
You dropped this bro 👑
Top level video, for sure. Thanks for the tutorial bro!
Thanks for the support :)
Great job! Perfect tempo for me
Amazing video! You've gained another subscriber.
Muy buen resumen. Muchas gracias. Me sirvió.
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
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!
Love this video, good luck mate!
Thanks!
Dude this is AMAZING!! Thank you alot!)
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.
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 🙏
Thank you. Now I have a more clear understanding of why I dislike MaterialUI and React so much.
Love this! Thank you!
ur sense of humor is a LEVEL !! XD
Thanks. Really helpful.
Nice presentation. Make more videos. Subscribed.
SO helpful thank you!
Completely alwsome, thanks a lot!!
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?
Can confirm, learned material ui and even react in like 9 minutes.
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🫡
Thanks bro! enjoyed the video
Wow! Great video :) you rock! ;)
You cleared my doubts thank you 😊
Gigachad instructor
i cant believe bro made a video about me im so honored (its a joke dont flame me please)
Lol
Helped a lot :)
sx={{ love: high }}
Great explanation!!!
Dude, you deserve 1m subs
Haha thanks!
Bro, amazing video. Keep it coming
Thanks! More content is on the way 👍
amazing. thank you sir :)
That was GREAT!!!
I subscribed to this legendary guy 🤝
Haha thanks!
Thanks! good video style. A deeper dive on some MUI specifics, like Forms would be cool. I think I got 1000 sub ;)
Congrats and thanks! That’s a good idea!
Wonder full!
bro’s gonna teach me mastered ultra instinct
Amazing way of teaching. Keep it up Bro
Thanks!
I think that sveltekit+tailwind is a combo really
Regarding interviews and jobs, I have a few questions that you can answer.
Your answers will be a great help.
1st = Is any computer science degree required for a job because I'm a commerce student and I'm in the second year of BBA.
2nd = Only those who can speak English fluently will get remote jobs, cause I'm from India
3rd= I have learned MERN stack and know the basics of java, is that enough?
4th= Is Data structures and algorithms required for the interview?
5th = best and fastest way to get a better remote job.
Yes, sure.
1. No, it’s not. Actually I don’t have a CS degree either. Will make a video on this topic soon.
2. I think your English is fine. Most of the work is programming anyway. You just have to be able to communicate with colleagues and understand requirements for what you’re building.
3. That will depend on the job that you apply for, but that sounds like a good start.
4. This again depends on the job and company. For web development it’s not really a requirement. Especially in the beginning.
5. I think there are websites exclusively for remote job postings. With a bit of Googling I’m sure you’ll find something. Also, applying directly to companies and asking whether you could work remotely is also an option.
Hope this helps.
@@frontstartdevThanks bro, you are a nice guy because most people don't reply usually and yeah, your reply seems literally helpful.
I forgot to ask if I could copy projects from the internet and put them on my resume in their current form or after making changes to them.
Will that can cause any issues in the interview?
@@henyadose build projects yourself, even if they are not very original, from scratch..
"the sx prop can be a good alternative to for example tailwind"
*Proceeds to list off things that can all also easily be done in tailwind, thus giving no reason to not just use tailwind anyway*
I never laughed while watching a informative video 😂
and can you also create a video on the MERN stack developer interview, please
Bruh is this video from
Thanks for the support. Appreciate it 🙏
Awesome content 🎉
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 👍