RECRIANDO A INTERFACE DO YOUTUBE COM MATERIAL-UI + REACT.JS | Clone #01
Neste vídeo vamos mostrar em um projeto React.js como recriar a tela inicial do YouTube com a biblioteca Material-UI que é baseada em Material Design (Linguagem de Design criada pelo Google)
✔ ÍNDICE:
0:00 | Introdução
4:04 | Create-react-app
5:24 | Instalando Material-UI
6:36 | Utilizando Material-UI
10:25 | Css baseline
12:40 | Customizando tema do Material-UI
18:15 | Estilizando componente com MakeStyles
25:00 | Criando TopBar
37:01 | Criando Navbar (Menu lateral)
39:47 | Customizando componentes Material-UI
50:07 | Listagem de Vídeos
O principal objetivo deste vídeo é mostraras os principais recursos que podemos utilizar da biblioteca Material-UI, como:
Componentes Material Design
Customização de Temas
Estilização de componentes
Customização de componentes
Layout responsivo
Para replicar esta demo você pode utilizar suas próprias imagens, ou utilizar as imagens deste exemplo, basta baixa-las no repositório (Link nas referências).
✔ PLATAFORMA:
https://www.wazana.dev/
✔ REDES SOCIAIS:
Instagram: https://instagram.com/wazana.dev
Linkedin: https://www.linkedin.com/company/wazana-dev/
✔ REFERÊNCIAS:
Material-UI: https://material-ui.com/
React.js: https://reactjs.org/
VS Code: https://code.visualstudio.com/
Repositório Git: https://github.com/lucasnhimi/clone-youtube-materialui
Видео RECRIANDO A INTERFACE DO YOUTUBE COM MATERIAL-UI + REACT.JS | Clone #01 канала Lucas Nhimi
✔ ÍNDICE:
0:00 | Introdução
4:04 | Create-react-app
5:24 | Instalando Material-UI
6:36 | Utilizando Material-UI
10:25 | Css baseline
12:40 | Customizando tema do Material-UI
18:15 | Estilizando componente com MakeStyles
25:00 | Criando TopBar
37:01 | Criando Navbar (Menu lateral)
39:47 | Customizando componentes Material-UI
50:07 | Listagem de Vídeos
O principal objetivo deste vídeo é mostraras os principais recursos que podemos utilizar da biblioteca Material-UI, como:
Componentes Material Design
Customização de Temas
Estilização de componentes
Customização de componentes
Layout responsivo
Para replicar esta demo você pode utilizar suas próprias imagens, ou utilizar as imagens deste exemplo, basta baixa-las no repositório (Link nas referências).
✔ PLATAFORMA:
https://www.wazana.dev/
✔ REDES SOCIAIS:
Instagram: https://instagram.com/wazana.dev
Linkedin: https://www.linkedin.com/company/wazana-dev/
✔ REFERÊNCIAS:
Material-UI: https://material-ui.com/
React.js: https://reactjs.org/
VS Code: https://code.visualstudio.com/
Repositório Git: https://github.com/lucasnhimi/clone-youtube-materialui
Видео RECRIANDO A INTERFACE DO YOUTUBE COM MATERIAL-UI + REACT.JS | Clone #01 канала Lucas Nhimi
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Learn Material UI in One Hour - React Material UI Project Tutorial [2022]](https://i.ytimg.com/vi/Xoz31I1FuiY/default.jpg)
![Recriando interface do Github com ReactJS | UI Clone #8](https://i.ytimg.com/vi/iLEbGQXsg3k/default.jpg)
![Introdução ao TailwindCSS com React - #B7Live 2](https://i.ytimg.com/vi/kDK8xeQIve8/default.jpg)
![MERN Stack Advanced Authentication Tutorial](https://i.ytimg.com/vi/YocRq-KesCM/default.jpg)
![Se Você Passar Por Esses 5 Desafios, Você Aprendeu React JS](https://i.ytimg.com/vi/aJR7f45dBNs/default.jpg)
![NEXT.JS: O FRAMEWORK QUE VOCÊ DEVERIA CONHECER [PARTE #01]](https://i.ytimg.com/vi/9eI0o8io7I0/default.jpg)
![Angular vs React.js vs Vue.js - Qual framework frontend escolher para 2021?](https://i.ytimg.com/vi/DTy3oIU-NN4/default.jpg)
![React Context API para INICIANTES](https://i.ytimg.com/vi/H6bCSzxxiNc/default.jpg)
![React JS - Criando um App do Zero - Programador Br](https://i.ytimg.com/vi/tbLziJchz48/default.jpg)
![Homepage da Tesla com ReactJS | UI Clone #14](https://i.ytimg.com/vi/Mf4Se4ZGcG8/default.jpg)
![React Native & Firebase Firestore CRUD (usando Expo)](https://i.ytimg.com/vi/VE7J0SA1PRQ/default.jpg)
![Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web](https://i.ytimg.com/vi/IaJqMcOMuDM/default.jpg)
![Deep Dive into Redux Toolkit with React - Complete Guide](https://i.ytimg.com/vi/9lCmbth63k0/default.jpg)
![The Essential Guide to Material-UI Styled Components (MUI v5)](https://i.ytimg.com/vi/ByG--A6jPYk/default.jpg)
![React - Tornando a Context API mais performática - Code/drops #77](https://i.ytimg.com/vi/JtO6UwQs8I0/default.jpg)
![Learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js)](https://i.ytimg.com/vi/7CqJlxBYj-M/default.jpg)
![MUI5 (Material UI) Crash Course](https://i.ytimg.com/vi/o1chMISeTC0/default.jpg)
![Build a Shopping Cart with React and TypeScript - Tutorial](https://i.ytimg.com/vi/sfmL6bGbiN8/default.jpg)
![React JS + TypeScript. Введение в Типизацию (+ React Router DOM)](https://i.ytimg.com/vi/OvLWWvjoi8s/default.jpg)
![Styled Components Crash Course & Project](https://i.ytimg.com/vi/02zO0hZmwnw/default.jpg)