Material-ui: [docs] Build a learn Material-Next tutorial

[oliviertassinari]

I really like what Next.js has built for teaching people how to use Next.js. I think that we have the opportunity to make the learning experience easier with a quick & simple tutorial. Alternatively, #9530 could be a different solution for the same pain point.

Let's gather the topics we can cover:

• Getting started with overrides
• Responsive helpers
• @media query
• Hidden
• Grid
• https://github.com/mui-org/material-ui/issues/8794

[kgregory]

A lot of questions on StackOverflow are related to customization and theme overrides.

[zeckdude]

This sounds like a great idea. I couldn’t find a single page that explains what any of the methods are to do the responsive media queries on the classes. I sort of figured it out by looking at the responsive drawer menu but I’m lucky I stumbled upon that.

[oliviertassinari]

@zeckdude Thanks for the feedback, we have made some progress on the breakpoints side with #9949.

[sathya9897]

@oliviertassinari It would be great if there is a tutorial section in the Getting started section and covers the following points:

1. Grid system and use cases of components.
2. What are the available classes to customise it and what values they can take.
3. Breakpoints or usage of components in the nesting that can lead to breakpoints.
4. What components are responsive and how they can be made responsive.
5. Media query usage.