No video

MUI5 (Material UI) Crash Course

  Рет қаралды 222,583

Laith Academy

Laith Academy

Күн бұрын

This crash course will teach you how to utilize MUI5 in your next application.
Second Channel:
/ @laiture123
Repo:
github.com/har...
Timeline:
0:00 - Introduction
3:37 - Exploring the Docs
13:00 - Layout
21:51 - Typography
44:56 - Custom Themes with Providers
1:00:07 - Routing
1:06:00 - Other Components

Пікірлер: 155
@EmiliaKaida
@EmiliaKaida 2 жыл бұрын
Anyone votes for a Tailwind + React/Nextjs series in the future ?
@imashutoshsharma
@imashutoshsharma 2 жыл бұрын
Tailwind with mui 🙂
@hooyah
@hooyah 2 жыл бұрын
@@imashutoshsharma hell yeah. Tailwind+ mui. I love write css with tailwind but i getting confused how to create beauty component like mui. Specially for the date time calendar
@yoyo-yx1qx
@yoyo-yx1qx Жыл бұрын
@@hooyah why would you recreate it?,when you can just use prebuilt ones and build powerful applications faster
@valentineumeh8053
@valentineumeh8053 Жыл бұрын
It's meesy
@nested9301
@nested9301 Жыл бұрын
​@@yoyo-yx1qxsame thinking these kids doesn't know what an application is they just wanna customize everything
@besizzo
@besizzo 2 жыл бұрын
I'm really glad I stumbled across this video. Seems like you have a Buch of videos that will be useful for my current tasks. Thanks, bud. Appreciate your work!
@adamx97
@adamx97 7 ай бұрын
Very helpful. Watching this will save me more time than it took to watch.
@nanonkay5669
@nanonkay5669 2 жыл бұрын
Laith has done it again, omg I cannot take this awesomeness anymore ,😭😭😭. Exactly what I was looking for
@nademkhan931
@nademkhan931 4 ай бұрын
Thank you for this course. Not long, not short, and focused on the subject, Material UI
@akhrorbekabdukhamitov8872
@akhrorbekabdukhamitov8872 2 жыл бұрын
love your content. i was sceptical first but turns out you have the newest material on youtube. some of the other youtube tutorials are 1-2 years old and the content is outtaded and as a learner , it's hard to know what's depreciated. thank you :)
@anyonecandothat
@anyonecandothat Жыл бұрын
Thank you. This was an excellent introduction to Material UI, both the pace and content were first-rate.
@superlistCG
@superlistCG 2 жыл бұрын
Exactly what I was looking, a perfect crash course on MUI.
@Tarcisio0511
@Tarcisio0511 2 жыл бұрын
What a nice and fluid class! Thank you so much Laith, I really loved this video (mui gave me some really bad headaches...) and the way you talk. I really did not need the subtitles and this also makes the flow of the video so much better to me. Thanks again and best regards from one more more Brazilian fan and subscriber.
@d-landjs
@d-landjs 2 жыл бұрын
One of the best tutorials I've seen from MUI5 . Thanks ir!
@AbdulKader-hk1yl
@AbdulKader-hk1yl 2 жыл бұрын
Exactly what I was looking for. Thanks Laith :)
@albertszymanski7177
@albertszymanski7177 2 жыл бұрын
You're awesome. The amount of knowledge that you share is overwhelming for me, I can't decide what to start with. And everything for free... Thanks man. PS. I'm waiting for SQL with NodeJS course :)
@muhammadsofyansyah9571
@muhammadsofyansyah9571 2 жыл бұрын
Many people use mongodb
@liorjjj
@liorjjj 2 жыл бұрын
Man, this video is just A W S O M E , i came here that i know few stuff , and it make me arranged , and give the approach that i needed, thank you thank thank you
@diederikslob
@diederikslob 2 жыл бұрын
Sir, you are a godsend! I'd been looking for a decent MUI5 tutorial for hours. This has got me on my way. :D Shame on most of the commenters below. It's a free course, you're not entitled to anything. Stop acting like spoiled little brats.
@kenhan168
@kenhan168 4 ай бұрын
easy to follow, thanks for the great video!
@eduardojls
@eduardojls 2 жыл бұрын
Outstanding!! thanks for the whole explanation. Hope more videos like this comes for the future
@garudasaktifikkiaunair
@garudasaktifikkiaunair Жыл бұрын
I didn't know this video existed! Thanks bro! Really grateful.
@worldbest3097
@worldbest3097 2 жыл бұрын
oh my god, nowadays i am looking for mui for business. thx!!!
@ronemchowry180
@ronemchowry180 2 жыл бұрын
You earned my subscription. Absolute godsend. Love how you go over the documentation instead of just copy pasting.
@Abawtes
@Abawtes 2 жыл бұрын
very great tutorial.well explained all the concepts, methods and procedures!
@thomasvanreijn8569
@thomasvanreijn8569 2 жыл бұрын
Great video, very well explained. Thanks a lot. I bought a premium template(the front) from mui, but i didnt know how to adjust and work with it. Now i can thanks to this video. Thanks man!
@malikamunaweera2537
@malikamunaweera2537 2 жыл бұрын
Thank you so much for this! It literally saved me hours!!!
@MrSchattka
@MrSchattka Жыл бұрын
Thanks so much. I just completed your video and must say that I did learn quite a lot.
@Storkz0re
@Storkz0re 2 жыл бұрын
I like how you gone rocket fast in the end, true last in office developer) Last 20 minutes dense like neutron star
@omaracelys3217
@omaracelys3217 Жыл бұрын
Great video ! best one i found about this subject, recommend it !
@georgemardari6568
@georgemardari6568 Жыл бұрын
Halfway through the video you started talking really slow like you were dead tired and you just didn't want to do the tutorial anymore. Then I realized my playback speed was at 0.75 LOL. Anyways love the tutorial
@parthcodes1374
@parthcodes1374 2 жыл бұрын
just poped on my screen and saw full 1:30hr thanks for the video
@MohammadRezaTaheri-ii7hd
@MohammadRezaTaheri-ii7hd Жыл бұрын
Short and sweet! Thank you.
@WildHowlYT
@WildHowlYT 2 жыл бұрын
MUI is a game changer 💜
@khandoor7228
@khandoor7228 2 жыл бұрын
Love Material-ui, Thanks Laith!
@chrisanderson687
@chrisanderson687 Ай бұрын
Great video, really appreciate it! But I wanted to suggest: don't use index as a key (bad practice), you have id's in your data, so you can do key={city.id} and key={tour.id}
@calebw237
@calebw237 Жыл бұрын
Does anyone know how to do the thing at 40:58 where he splits the single line Rating component into a bunch of lines? I keep seeing it in various videos but can't seem to find the key combination.
@b25671
@b25671 22 күн бұрын
In this topic `Custom Themes with Providers` your diverging from the docs way of implementing.
@sumawav
@sumawav Жыл бұрын
This was supremely helpful!
@sulmanahmad6943
@sulmanahmad6943 9 ай бұрын
Easy to Understand 👍
@sergiisechka1993
@sergiisechka1993 2 жыл бұрын
Man it is really worth one, Thank You!
@rashedulalam7754
@rashedulalam7754 2 жыл бұрын
U r just a brilliant devloper
@samyfarahat8672
@samyfarahat8672 2 жыл бұрын
Thanks for the good tutorial, keep going mannn!!
@imthedaniels
@imthedaniels 2 жыл бұрын
Thanks from Brazil!
@user-yq9cq4xz7r
@user-yq9cq4xz7r 6 ай бұрын
This is very helpful. Thank you.
@aspasiapolitou8115
@aspasiapolitou8115 8 ай бұрын
It looks very useful, but I got error on 48:30 . Can anybody help me please? Server Error Error: Attempted to call createTheme() from the server but createTheme is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed props of a Client component.
@MrVipulLal
@MrVipulLal Жыл бұрын
Helpful video. Thanks
@alexandergeorgesquire220
@alexandergeorgesquire220 5 ай бұрын
This looks great
@saymoinsam1212
@saymoinsam1212 Жыл бұрын
There is a copy to clipboard button right there to copy the whole code
@akhrorbekabdukhamitov8872
@akhrorbekabdukhamitov8872 2 жыл бұрын
just finished this. thank you
@k303k
@k303k Жыл бұрын
Great tutorial! Thank you.
@AlexanderFarber
@AlexanderFarber 8 ай бұрын
Thanks for the tutorial! The files in the components and pages folders - shouldn't they better have the .jsx extention? For example components/AppBar.jsx
@christianlioneltokam2556
@christianlioneltokam2556 2 жыл бұрын
Thanks very much indeed bro! you're very powerful
@khaledmousa380
@khaledmousa380 Жыл бұрын
Excellent tutorial thank you very much.
@user-zd1dt7tz1u
@user-zd1dt7tz1u 9 ай бұрын
Excellet tutorial, thank you!
@soudaminipanda
@soudaminipanda 2 жыл бұрын
Simply Excellent
@jbc5126
@jbc5126 2 жыл бұрын
i would appreciate seeing a modal with a form and how to handle the state of the form and pass it back to the parent container
@HimanshuChanda
@HimanshuChanda 2 жыл бұрын
Super Cool! Thanks for the tutorial
@mauriziocozzetto
@mauriziocozzetto Жыл бұрын
I am not able to do what you said at 1:05. I thin I should do Tour({ id }) or something like that but it's not clear for me. Can you help me? Thanks.
@Fangh44
@Fangh44 Жыл бұрын
I legitimatly applaused at 59:36 !
@limehouseblues
@limehouseblues 2 жыл бұрын
thank-you , this was really great
@antoniors
@antoniors Жыл бұрын
Hey. I'm starting a new position and my employer said that I should go through Materiaul UI and said that they use "withStyles" as well. As much as I was able to understand, "withStyles" is legacy at this point and is not included in the way Material UI is supposed to be used? Is this correct?
@abusayedrakib7019
@abusayedrakib7019 2 жыл бұрын
Excellent 👍👍
@pranavyeole102
@pranavyeole102 2 жыл бұрын
Thankyou so much for this tutorial
@devshah4030
@devshah4030 Жыл бұрын
Thanks for this tutorial though I am finding MUI v5 in general very painful as there are so many breaking changes. the most annoying is the replacement of styled instead of the good old makeStyle. Do they expect us to create individual styles for each DOM element ? this is really bad move. Reminds me of horror stories of Angular migration when many people got burnt out. I am thinking about moving to more reliable CSS frameworks like Bootstrap etc,
@Cmxmxmmx7
@Cmxmxmmx7 2 жыл бұрын
Hey, guys! There is so many ways to style components in MUI, I got confused. How do we create global styles that we can reuse in different components across websites? Why do we need styled() if we can use sx inline styles or create styles object and place all styles there, than use for example?
@sagararyal9150
@sagararyal9150 2 жыл бұрын
In new version of MUI, we can customirize our components by three ways.Use sx={css styles} for MUI components only.Style={} and styled("div"/MUI Components){css styles} works for any components from your app.
@worldofwali6084
@worldofwali6084 Жыл бұрын
Thank you very much.
@sumdy508
@sumdy508 2 жыл бұрын
Спасибо) Translate: Thanks!!! ))
@alwin.js.29
@alwin.js.29 Жыл бұрын
When you give numerical values with no units what units are they being converted to ? Is it rem? Also how can I get that lorem auto typing
@shubhampawar7921
@shubhampawar7921 2 жыл бұрын
Chakra UI next please. Plus would love it to also include responsive design
@furqatbozorov4254
@furqatbozorov4254 2 жыл бұрын
Super! We got a lot!
@bijianwu5124
@bijianwu5124 Жыл бұрын
very informative, thanks
@kofinartey116
@kofinartey116 2 жыл бұрын
I have this problem with material ui where the styles I write work in development but break in production. Any idea how to fix it?
@biprajitdas9620
@biprajitdas9620 7 ай бұрын
Thank You a Lot 💌
@mrcharm767
@mrcharm767 2 жыл бұрын
is giving component in typography important for something?? we cant we just use variant because variant is the one filling the requirements
@xplore2000
@xplore2000 2 жыл бұрын
Great content sir.
@treksis
@treksis Жыл бұрын
good job. thank you so much
@AndriusLau
@AndriusLau 2 жыл бұрын
Maybe it's better to use , , from mui library to achieve the same result?
@juliencarvalho4881
@juliencarvalho4881 Жыл бұрын
Thanks for the tutorial
@pramodsavant3135
@pramodsavant3135 11 ай бұрын
Lifesaver ❤
@RW-pt5qv
@RW-pt5qv 2 жыл бұрын
For some reason when I add components it just displays a blank page. Is there a fix for this?
@Cmxmxmmx7
@Cmxmxmmx7 2 жыл бұрын
Hi. THanks for great video. Why in Typography we add variant h4 component h2? Why it is not just variant h4 component h4? What is the purpose?
@AndriusLau
@AndriusLau 2 жыл бұрын
the component describes the HTML element. In some cases, you wanna have an H1 which is a small bold text. And for the card name, you wanna have an h2 element, with a size of h4. For SEO purposes it's important to have h1, h2, and h3 tags.
@faizc9984
@faizc9984 2 жыл бұрын
Excellent!
@amirsedaghat8903
@amirsedaghat8903 2 жыл бұрын
wow , thank you so much
@CameronL
@CameronL 2 жыл бұрын
How do you make the number of grid items on a row decrease as the screen size decreases?
@codernerd7076
@codernerd7076 2 жыл бұрын
Honestly as someone that worked with MUI over the past 4 years or so... I can give you one tip... don't use it! The account of pain you gonna have debugging this UI library is simply not worth it! Same I know no one gonna listen and sadly will learn the hard way like I did 😔
@kavindudananjaya3290
@kavindudananjaya3290 2 жыл бұрын
tfs your opinion. can you suggest the better solution please
@codernerd7076
@codernerd7076 2 жыл бұрын
@@kavindudananjaya3290 we mostly use tailwind for everything now with custom UI components they are much lighter and we don't have to worry for breaking changes.
@SandeshMotoVlogs
@SandeshMotoVlogs 2 жыл бұрын
@@codernerd7076 Yes with the arrival of JIT in TW CSS 3 its ruling 🥵
@lardosian
@lardosian 2 жыл бұрын
@@codernerd7076 Any examples, I have used it a lot as well.
@jeevithas5346
@jeevithas5346 2 жыл бұрын
once i add themeprovider my output is going blank could you please help
@sandorium
@sandorium 7 ай бұрын
7:00, what? cssbaseline, did you read the doc or not?
@Hadi-cn4ug
@Hadi-cn4ug 2 жыл бұрын
Simple and useful
@illishhhazarika7727
@illishhhazarika7727 2 жыл бұрын
What the fuck man, you should have written MUI5 Copy and Paste Crash Course.
@RicAdbur
@RicAdbur 9 ай бұрын
Looks like one of the image links in your JSON data doesn't work anymore. ID: 5
@PostMeridianLyf
@PostMeridianLyf Жыл бұрын
ty dude
@nazirabubakar8373
@nazirabubakar8373 2 жыл бұрын
Thanks Laith
@hamednaderi7675
@hamednaderi7675 Жыл бұрын
thanks !
@kevalsathavara7421
@kevalsathavara7421 Жыл бұрын
Hello i am keval and many you tube channel are teaching multipal language, but not properly so i am requst you small example useing formik and api (db.json) submit button clicked and set values db.json and localstorage.
@joegopher9280
@joegopher9280 Жыл бұрын
Shift+F5 to force refesh
@covereye5731
@covereye5731 2 жыл бұрын
What's the benefit of using custom themes vs just giving them a class and changing the CSS? Seems like a lot of extra clutter.
@JakeSummers2424
@JakeSummers2424 2 жыл бұрын
My thoughts exactly. Basically it's for people who haven't learned how to structure css properly. That's all I see.
@ol1175
@ol1175 2 жыл бұрын
Thanks man💪
@lifeadventure859
@lifeadventure859 Жыл бұрын
thanks❤
@mohammadnoman2457
@mohammadnoman2457 2 жыл бұрын
superb
@salesforceWithParamita
@salesforceWithParamita 2 жыл бұрын
excellent
@sammyochabs5317
@sammyochabs5317 2 жыл бұрын
You are the best
@codedjango
@codedjango 2 жыл бұрын
Can you please do similar tutorial on Primevue UI library for Vue 3?
@rexroshan
@rexroshan 5 ай бұрын
feels like I'm watching a Traversy Media in 240p😂
@adolfusadams4615
@adolfusadams4615 2 жыл бұрын
Hey Laith, any plans to do a Svelte tutorial?
All useEffect Mistakes Every Junior React Developer Makes
22:23
The Story of Next.js
12:13
uidotdev
Рет қаралды 562 М.
A teacher captured the cutest moment at the nursery #shorts
00:33
Fabiosa Stories
Рет қаралды 61 МЛН
Secret Experiment Toothpaste Pt.4 😱 #shorts
00:35
Mr DegrEE
Рет қаралды 42 МЛН
小蚂蚁被感动了!火影忍者 #佐助 #家庭
00:54
火影忍者一家
Рет қаралды 52 МЛН
Learn MUI (Material UI) in under 10 min!
9:06
FrontStart
Рет қаралды 133 М.
Build any layout with tailwind | crash course
34:28
Hitesh Choudhary
Рет қаралды 64 М.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 215 М.
Avoid these 5 beginner CSS mistakes
21:38
Kevin Powell
Рет қаралды 80 М.
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,5 МЛН
The Microfrontend Crash Course
57:27
Laith Academy
Рет қаралды 33 М.
How To Debug React Apps Like A Senior Developer
21:07
Web Dev Simplified
Рет қаралды 114 М.
The ULTIMATE guide to styling/customizing Material UI (MUI)
10:29
The Greenwich Meridian is in the wrong place
25:07
Stand-up Maths
Рет қаралды 708 М.