Material UI Tutorial #2 - Typography

Hey gang, in this Material UI tutorial we'll take a look at the Typography component to make/style headings & normal text.
🐱‍💻 🐱‍💻 Course Files:
github.com/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
Modern JavaScript - www.thenetninj...
Vue JS 3 & Firebase - www.thenetninj...
D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Useful playlists:
Full React tutorial - • Full React Tutorial #1...
JSON Server Tutorial - • Up & Running with JSON...
🐱‍💻 🐱‍💻 Other links:
Material UI docs - material-ui.co...
Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@dannyman2200]

Shaun absolutely killing it again, there are no gif's that can properly convey how good at teaching this man is. 1 year of learning how to code and this guy has gotten me most of the way. Cheers dude!

[@dannyman2200]

If only he wasn't a manc 😉 YNWA

[@stephanpaul8954]

Its awesome how your going through this! Material UI can be really overwhelming when you first start using it... These basic instructions help a massive amount!

[@maskman4821]

yeah, so true !

[@piotrzacharski8097]

I've watched many tutorials so far, but thanks to Shaun I finally understand basics of React and JS. The best tutorials ever!

[@KodiLearn]

I was wishing to learn material ui and you created course. Thank You So Much

[@CodingNuggets]

Pay attention and you will learn so much from Shaun. Never miss a series!

[@siddharthpawar552]

Her: say those 3 magical words. Me: " Alright then gang! "

[@hubertnare5279]

😹 😹 You can say that again

[@AndriusLau]

Great course. And as a backend developer, I love using Material UI. It helps to avoid lots of styling with css/scss :)

[@zidanegimiga8180]

This was a refreshing tutorial, made me comfortable with @mui. I wish the framework itself had more customisation like selecting font-families that one desires to use in the ir projects.

[@Rahul-mc9rp]

Learnt a lot from your vuetify course and also hoping that this playlist would also include most of the UI components. Thank you so much

[@maskman4821]

and we want to know how to customize the component to match the figam desgin !!!

[@RexGalilae]

@@maskman4821 As someone who has worked with vuetify before, it's very difficult to customize it too much and it's an anti pattern as vuetify is an opinionated library. In my material ui projects more recently, I was able to use the useStyles() hook to customize my components to a degree. Beyond that, you need hacky CSS. I suggest tailwind if you're working with a figma design that doesn't follow material design spec to a T. You can check out his tailwind courses too

[@maskman4821]

Freaking awesome tutorial, this is exactly I have been looking forward to, thank you Ninja Pelling for reading our minds and create the course for us !!!

[@k5g4mer]

After a couple of days of trying to make the new mui/material to work with me, I am intrigue to start this course. Let the learning begins ! 🔥

[@NetNinja]

Have fun! :)

[@DeadPool-jr2er]

You're so amazing, without you I would be so lost. I'm so grateful for you. Eternally. Thanks for all this work you're doing for us.

[@naoufelbahassoune1080]

Hi man i love your content and also all the Moroccans watch you ❤️

[@NetNinja]

Thank you :)

[@RexGalilae]

The Numidian Kingdom has been endorsing the channel since the Punic wars

[@abderrahimslam2892]

@naoufel bahassoune Hi! I'm from morocco too and I'm learning material ui from The Net Ninja 👌

[@hubertnare5279]

Learnt a lot from this guy 👌

[@moniruzzamansaikat]

Hey, what are you learning?

[@hubertnare5279]

@@moniruzzamansaikat web development, I learnt reactjs from Shaun

[@justingolden21]

keep on learning

[@scarlaticious]

Hi Net Ninja. Awesome videos. Best MUI tutorial I found online! I am not sure I understood the variant/component properties. Why would you need an h6 variant that has the h2 component?

[@VS257]

What's the point of setting component=h2 as prop? Why is it necessary to have it viewed as h2 tag in the html code if we want it to look h6?

[@ajaysh73]

I hope I can get some answer of it as well. good question.

[@stand355]

I've found the answer to your question from the Typography API page, at the bottom under Accessibility->Heading hierarchy, "Don't skip heading levels. In order to solve this problem, you need to separate the semantics from the style.". The provided link on the w3 website explains that the arrangement order of the html header tags like h1,h2,h3 used in the html code is important for assistive technologies, such as screen readers. I feel that this should have been better explained in this video.

[@utkarshmahajan8505]

They are semantic tags , helpful in SEO (search engine optimization) , google it

[@suatbayrak2703]

Cant believe !!!! the net ninja and material ui course !!! thank you alot

[@AndriusLauFullstack]

For a backend developers, Material UI is an amazing library :) No need to mess with CSS :D

[@ryanbiztech9181]

This series is just what I was looking for. Thanks!

[@armin8016]

the goat comes again with another tutorial

[@BladesGamings]

Right on time ninja! Thank you. Btw still waiting for MERN full stack tut surprise :P

[@maskman4821]

dude, you don't need mern stack, using nextjs you can easily build a jamstack / fullstack app easily !!!

[@BladesGamings]

@@maskman4821 I'll check it out thx.

[@Shakeel714]

Thanks again for the amazing tutorial series.

[@CristianoRonaldo-hk6vz]

Thank you for the tutorial. It was very clear and concise!! A part that was confusing to me was why would you want the Typography component to look like an h6 but want the HTML to output an h2? Why not just use an h2 tag?

[@khaledmohammed4939]

cause the variant gives it different styling if h6 it's a lot smaller than the h2 but he wants to fool others who open the dev tool to see ur code and view that h6 as an h2

[@jalaliyev]

I don't like material-ui icons instead of I use react-icons because it grabs whole icons and better than material-ui/icons design but I wanna deep dive into the material-ui concepts. Good job Shaun. I am waiting Bootstrap and Nodejs course. Thanks!

[@hubertnare5279]

Nodejs course is already available, he updated it infact which is great

[@jalaliyev]

@@hubertnare5279 I already watched two times. I said advanced version

[@RexGalilae]

Thank you for introducing me to react icons. It seems react icons aren't a distinct icon set from material icons but it provides a react wrapper around popular icon packs, one of which is material ui

[@AlexanderFarber]

Why use variant="h6" component="h2" in MUI Typography? It would use an "h2" HTML element, but what is the benefit of that? Thanks for the videos, Shaun.

[@taharehman6439]

can you please make a video on which extensions you have installed in vscode

[@dalmvicky]

Nice tutorial Shaun, are you planning to update to version 5 ?

[@kazimdminhajulhaider3709]

./node_modules/@material-ui/core/esm/Typography/index.js Module not found: Can't resolve 'C:\Users\USER\Desktop\Web development\material-recap\material-app ode_modules eact-scripts ode_modules\babel-loader\lib\index.js' in 'C:\Users\USER\Desktop\Web development\material-recap\material-app' getting this error how to solve that?

[@markkthemk]

Why do you want the h2 tag? What is the benefit of having it over the h6 tag?

[@learncodingandearn238]

good course learn a lot Thanks net ninja keep it up Bundle of Thanks

[@anastasiaescher8007]

Great tutorial, great channel, and you have a very beautiful voice.

[@diegovillafane6313]

Hello, currently using Material V4, can you scroll inside a typography? or a container?

[@fadhilsaheer8877]

Hey ninja, can you create a tutorial on webRTC 😅 , Thanks in advance 🤗, Love your tutorials !!

[@Franiveliuselmago]

Nice video, I'm struggling to add some locally hosted .ttf fonts.

[@dragoran149]

Is it possible to have a 3 lined text (maybe in a box) and if it is too long it will be cut on the 3rd line with "..."

[@garraouiameur7752]

I'm kinda lost between using bootstrap or material ui for my project. Any tips gang ? thank you in advance

[@jayanspaliwal5907]

Just want to say that while using the color property it is showing multiple options like plum, purple, etc. It is also accepting hex codes. Why is it so? Please reply, Shawn........

[@helloWorldPlus]

Hello, how can be changed the typography font?

[@ТэмүүлэнХишигжаргал]

Thank you 😊

[@calebadoumadje2266]

Hi I get this error when trying to use Typography element with material-ui-5: export 'default' (imported as 'typography') was not found in '@mui/material/typography' here is my code: import React from 'react'; import Typography from '@mui/material'; export default function Create() { return ( Create Page ) }

[@prafulrane3591]

Need a roadmap video to follow your channel content!!!

[@Sam-xv5ko]

❤️

[@eltoneycomerad8758]

Awesome

[@nikhil_squats]

what component="h2" will do??

[@AbhishekVaid]

should have covered why do we have the option to have a component overriding a variant. Why not just use variant correctly.

[@ngatuna05]

Please do a serverless project with Mongodb Atlas and Realm and regular front end - html/JS

[@ridl27]

ty

[@fabtjar]

Why would it matter what the tag is being outputted to in the html?

[@hammadnadir5394]

Nice

[@akashchauhan6784]

💚💚💚

[@dailydoseofchocolate9411]

Can someone explain to me why importing with bracket is less performant? at 3:18

[@michalnowak2181]

thx

[@ravi_sorathiya]

I seriously want to learn mern stack Give me special suggestions , path , way , tips anthing to lern it in certain manner . What concept what things i need to focus on to learn it??

[@MikeLiteros]

Why would you want to output an h2 as an h6. It didnt change

[@barca6097]

Flutter 2 please ❤❤❤

[@NetNinja]

It will come at some point :)

[@eltoneycomerad8758]

please bro we need chakra ui react tutorial

[@maskman4821]

yeah, that's true !

[@chaitanyajharbadem-1740]

Amazing work buddy but keep the subtitle on your accent is cute but little difficult to understand 😅

[@nielfollero5]

how do you do this 5:35

[@TheHumanistX]

Like being taught coding by Blanco White

[@uchennaiheanacho1]

Flutter with hooks next please 🙏

[@realmonzeromer]

i copied your code from the github repo and ITS NOT WORKING!

[@realmonzeromer]

its finally working

[@ChandanKumar-of1je]

I guess the audio is really dimm in this section

[@NetNinja]

Apologies - for some reason I didn't boost the audio for this video. All the rest will be higher!

[@rahulr_01]

first😃

[@syedumair9554]

first view

[@naoufelbahassoune1080]

Fiiiiiiirst

[@usmanmughal5916]

Do you hate typescript?

[@NetNinja]

Not at all, I really like it

[@usmanmughal5916]

@@NetNinja Then make a typescript project.

[@prashanttanwar3261]

@@usmanmughal5916 mind being a bit polite??

[@usmanmughal5916]

@@prashanttanwar3261 I was polite and still am.

[@nielfollero5]

@@usmanmughal5916 It's not like he can do that by just waving his wand

[@redabaha7621]

The way of import has changed to: import { Typography } from '@mui/material'

[@devillyach2970]

thx