MUI5 (Material UI) Crash Course

Поділитися
Вставка
  • Опубліковано 29 чер 2024
  • This crash course will teach you how to utilize MUI5 in your next application.
    Second Channel:
    / @laiture123
    Repo:
    github.com/harblaith7/MUI5
    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

КОМЕНТАРІ • 153

  • @besizzo
    @besizzo 2 роки тому +24

    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!

  • @anyonecandothat
    @anyonecandothat 11 місяців тому +1

    Thank you. This was an excellent introduction to Material UI, both the pace and content were first-rate.

  • @d-landjs
    @d-landjs 2 роки тому +1

    One of the best tutorials I've seen from MUI5 . Thanks ir!

  • @akhrorbekabdukhamitov8872
    @akhrorbekabdukhamitov8872 2 роки тому +7

    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 :)

  • @Tarcisio0511
    @Tarcisio0511 2 роки тому +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.

  • @eduardojls
    @eduardojls 2 роки тому +1

    Outstanding!! thanks for the whole explanation. Hope more videos like this comes for the future

  • @superlistCG
    @superlistCG 2 роки тому +3

    Exactly what I was looking, a perfect crash course on MUI.

  • @adamx97
    @adamx97 5 місяців тому +2

    Very helpful. Watching this will save me more time than it took to watch.

  • @AbdulKader-hk1yl
    @AbdulKader-hk1yl 2 роки тому +3

    Exactly what I was looking for. Thanks Laith :)

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

  • @Abawtes
    @Abawtes Рік тому +1

    very great tutorial.well explained all the concepts, methods and procedures!

  • @nademkhan931
    @nademkhan931 3 місяці тому

    Thank you for this course. Not long, not short, and focused on the subject, Material UI

  • @nanonkay5669
    @nanonkay5669 2 роки тому +5

    Laith has done it again, omg I cannot take this awesomeness anymore ,😭😭😭. Exactly what I was looking for

  • @ronemchowry180
    @ronemchowry180 2 роки тому +2

    You earned my subscription. Absolute godsend. Love how you go over the documentation instead of just copy pasting.

  • @malikamunaweera2537
    @malikamunaweera2537 2 роки тому +2

    Thank you so much for this! It literally saved me hours!!!

  • @liorjjj
    @liorjjj 2 роки тому +1

    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

  • @garudasaktifikkiaunair
    @garudasaktifikkiaunair Рік тому

    I didn't know this video existed! Thanks bro! Really grateful.

  • @MrSchattka
    @MrSchattka Рік тому

    Thanks so much. I just completed your video and must say that I did learn quite a lot.

  • @khandoor7228
    @khandoor7228 2 роки тому

    Love Material-ui, Thanks Laith!

  • @omaracelys3217
    @omaracelys3217 11 місяців тому

    Great video ! best one i found about this subject, recommend it !

  • @MohammadRezaTaheri-ii7hd
    @MohammadRezaTaheri-ii7hd Рік тому

    Short and sweet! Thank you.

  • @samyfarahat8672
    @samyfarahat8672 2 роки тому

    Thanks for the good tutorial, keep going mannn!!

  • @sumawav
    @sumawav Рік тому +1

    This was supremely helpful!

  • @albertszymanski7177
    @albertszymanski7177 2 роки тому +3

    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 :)

  • @kenhan168
    @kenhan168 3 місяці тому

    easy to follow, thanks for the great video!

  • @sergiisechka1993
    @sergiisechka1993 2 роки тому

    Man it is really worth one, Thank You!

  • @EmiliaKaida
    @EmiliaKaida 2 роки тому +54

    Anyone votes for a Tailwind + React/Nextjs series in the future ?

    • @imashutoshsharma
      @imashutoshsharma 2 роки тому +2

      Tailwind with mui 🙂

    • @hooyah
      @hooyah Рік тому

      @@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 Рік тому +1

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

  • @HimanshuChanda
    @HimanshuChanda 2 роки тому

    Super Cool!
    Thanks for the tutorial

  • @k303k
    @k303k Рік тому

    Great tutorial! Thank you.

  • @akhrorbekabdukhamitov8872
    @akhrorbekabdukhamitov8872 2 роки тому

    just finished this. thank you

  • @user-yq9cq4xz7r
    @user-yq9cq4xz7r 4 місяці тому

    This is very helpful. Thank you.

  • @diederikslob
    @diederikslob 2 роки тому +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.

  • @soudaminipanda
    @soudaminipanda 2 роки тому

    Simply Excellent

  • @limehouseblues
    @limehouseblues 2 роки тому

    thank-you , this was really great

  • @xplore2000
    @xplore2000 2 роки тому

    Great content sir.

  • @khaledmousa380
    @khaledmousa380 Рік тому

    Excellent tutorial thank you very much.

  • @abusayedrakib7019
    @abusayedrakib7019 2 роки тому +1

    Excellent 👍👍

  • @alexandergeorgesquire220
    @alexandergeorgesquire220 3 місяці тому

    This looks great

  • @WildHowlYT
    @WildHowlYT 2 роки тому +1

    MUI is a game changer 💜

  • @imthedaniels
    @imthedaniels 2 роки тому

    Thanks from Brazil!

  • @MrVipulLal
    @MrVipulLal Рік тому

    Helpful video. Thanks

  • @pranavyeole102
    @pranavyeole102 2 роки тому

    Thankyou so much for this tutorial

  • @user-zd1dt7tz1u
    @user-zd1dt7tz1u 7 місяців тому

    Excellet tutorial, thank you!

  • @christianlioneltokam2556
    @christianlioneltokam2556 2 роки тому

    Thanks very much indeed bro! you're very powerful

  • @rashedulalam7754
    @rashedulalam7754 2 роки тому

    U r just a brilliant devloper

  • @sulmanahmad6943
    @sulmanahmad6943 7 місяців тому

    Easy to Understand 👍

  • @furqatbozorov4254
    @furqatbozorov4254 2 роки тому

    Super! We got a lot!

  • @bijianwu5124
    @bijianwu5124 Рік тому

    very informative, thanks

  • @georgemardari6568
    @georgemardari6568 Рік тому +1

    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

  • @faizc9984
    @faizc9984 2 роки тому

    Excellent!

  • @worldbest3097
    @worldbest3097 2 роки тому +1

    oh my god, nowadays i am looking for mui for business. thx!!!

  • @juliencarvalho4881
    @juliencarvalho4881 Рік тому

    Thanks for the tutorial

  • @parthcodes1374
    @parthcodes1374 Рік тому

    just poped on my screen and saw full 1:30hr
    thanks for the video

  • @treksis
    @treksis Рік тому

    good job. thank you so much

  • @pramodsavant3135
    @pramodsavant3135 10 місяців тому

    Lifesaver ❤

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

  • @ol1175
    @ol1175 2 роки тому

    Thanks man💪

  • @mohammadnoman2457
    @mohammadnoman2457 2 роки тому

    superb

  • @Hadi-cn4ug
    @Hadi-cn4ug 2 роки тому

    Simple and useful

  • @worldofwali6084
    @worldofwali6084 10 місяців тому

    Thank you very much.

  • @biprajitdas9620
    @biprajitdas9620 6 місяців тому

    Thank You a Lot 💌

  • @nazirabubakar8373
    @nazirabubakar8373 2 роки тому

    Thanks Laith

  • @amirsedaghat8903
    @amirsedaghat8903 2 роки тому

    wow , thank you so much

  • @salesforceWithParamita
    @salesforceWithParamita 2 роки тому

    excellent

  • @sleeping_code7765
    @sleeping_code7765 2 роки тому

    Awesomee

  • @sammyochabs5317
    @sammyochabs5317 2 роки тому

    You are the best

  • @sumdy508
    @sumdy508 2 роки тому

    Спасибо)
    Translate:
    Thanks!!! ))

  • @hamednaderi7675
    @hamednaderi7675 Рік тому

    thanks !

  • @lifeadventure859
    @lifeadventure859 Рік тому

    thanks❤

  • @manoj-k
    @manoj-k 2 роки тому

    🔥🔥🔥

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

  • @AlexanderFarber
    @AlexanderFarber 7 місяців тому

    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

  • @PostMeridianLyf
    @PostMeridianLyf Рік тому

    ty dude

  • @shubhampawar7921
    @shubhampawar7921 2 роки тому +2

    Chakra UI next please. Plus would love it to also include responsive design

  • @Fangh44
    @Fangh44 Рік тому

    I legitimatly applaused at 59:36 !

  • @benyamin4634
    @benyamin4634 2 роки тому

    thanks

  • @mohamedyoussef8835
    @mohamedyoussef8835 2 роки тому

    Awesome ++++++++++++++++++++++

  • @saymoinsam1212
    @saymoinsam1212 Рік тому +1

    There is a copy to clipboard button right there to copy the whole code

  • @rajahutan1988
    @rajahutan1988 2 роки тому

    keren banh

  • @calebw237
    @calebw237 11 місяців тому +1

    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.

  • @CameronL
    @CameronL 2 роки тому

    How do you make the number of grid items on a row decrease as the screen size decreases?

  • @chrisanderson687
    @chrisanderson687 2 дні тому

    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}

  • @michaelsaucedo3952
    @michaelsaucedo3952 2 роки тому

    🤩

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

  • @AndriusLau
    @AndriusLau 2 роки тому

    Maybe it's better to use , , from mui library to achieve the same result?

  • @adolfusadams4615
    @adolfusadams4615 2 роки тому

    Hey Laith, any plans to do a Svelte 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,

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

  • @codedjango
    @codedjango 2 роки тому

    Can you please do similar tutorial on Primevue UI library for Vue 3?

  • @alwinjs29
    @alwinjs29 Рік тому

    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

  • @Zagoorland
    @Zagoorland 2 роки тому

    i love your materials, but please - upload in 4K

  • @antoniors
    @antoniors 11 місяців тому

    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?

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

  • @aspasiapolitou8115
    @aspasiapolitou8115 6 місяців тому

    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.

  • @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 роки тому +1

      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.

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

  • @RW-pt5qv
    @RW-pt5qv 2 роки тому

    For some reason when I add components it just displays a blank page. Is there a fix for this?

  • @jeevithas5346
    @jeevithas5346 2 роки тому

    once i add themeprovider my output is going blank could you please help

  • @joegopher9280
    @joegopher9280 Рік тому

    Shift+F5 to force refesh

  • @rexroshan
    @rexroshan 4 місяці тому

    feels like I'm watching a Traversy Media in 240p😂