005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
39 lines
2.5 KiB
Markdown
39 lines
2.5 KiB
Markdown
# Learning resources
|
||
|
||
<p class="description">New to Material UI? Get up to speed quickly with our curated list of learning resources.</p>
|
||
|
||
## Your first component
|
||
|
||
The following demo shows a basic Material UI app that features a `<Button>` component.
|
||
Try changing the `variant` on the [Button](/material-ui/react-button/) to `outlined` to see how the style changes:
|
||
|
||
{{"demo": "../usage/ButtonUsage.js", "defaultCodeOpen": true}}
|
||
|
||
## Example projects
|
||
|
||
Visit the [example projects](/material-ui/getting-started/example-projects/) page to see how we recommend implementing Material UI with various React libraries and frameworks like Next.js, Vite, and more.
|
||
|
||
## Templates
|
||
|
||
Check out our [selection of basic templates](/material-ui/getting-started/templates/) to get started building your next app more quickly.
|
||
|
||
## Recommended resources
|
||
|
||
Beyond our official documentation, there are countless members of our community who create fantastic tutorials and guides for working with Material UI.
|
||
|
||
The following is a curated list of some of the best third-party resources we've found for learning how to build beautiful apps with our components.
|
||
|
||
### Free
|
||
|
||
- **[Material UI v7 Complete Course](https://www.youtube.com/watch?v=XQVcsGbMBCM)** by Code Genix: this comprehensive course covers everything you need to build with the latest version of Material UI.
|
||
|
||
- **[React + Material UI - From Zero to Hero](https://www.youtube.com/playlist?list=PLDxCaNaYIuUlG5ZqoQzFE27CUOoQvOqnQ)** video series by The Atypical Developer: build along with this in-depth series, from basic installation through advanced component implementation.
|
||
|
||
- **[Next.js 11 Setup with Material UI v5](https://www.youtube.com/watch?v=IFaFFmPYyMI)** by Leo Roese: learn how to integrate Material UI into your Next.js app, using Emotion as the style engine.
|
||
|
||
- **[Material UI v5 Crash Course + Intro to React (2022 Edition)](https://www.youtube.com/watch?v=_W3uuxDnySQ)** by Anthony Sistilli: how and why to use Material UI, plus guidance on theming and style customization.
|
||
|
||
- **[Material UI v5 Tutorial Playlist](https://www.youtube.com/playlist?list=PLlR2O33QQkfXnZMMZC0y22gLayBbB1UQd)** by Nikhil Thadani (Indian Coders): a detailed playlist covering almost every component of Material UI with Create React App.
|
||
|
||
- **[The Clever Dev](https://www.youtube.com/channel/UCb6AZy0_D1y661PMZck3jOw)** and **[The Smart Devpreneur](https://smartdevpreneur.com/category/javascript/material-ui/)** by Jon M: dozens of high-quality videos and articles digging deep into the nuts and bolts of Material UI.
|