Interface do Disney Plus com HTML, CSS e Javascript - Parte 1 | Tutorial para iniciantes
Neste tutorial, você irá criar do zero a interface da Disney Plus com HTML, CSS e JavaScript.
Todo o conteúdo da aplicação será gerado dinamicamente ao utilizar o api da TMDB. Essa api fornece todos os dados filme, como título, descrição, capa, foto de background e nota de avaliação.
Para facilitar a codificação do projeto foi usado um protótipo do figma como base, o autor do layout é o design Itai Bracha(https://www.figma.com/@itaibracha).
Acessar projeto https://disney-plus.leonardovargas.dev/
🔗 𝗟𝗜𝗡𝗞𝗦
▸ Repositório do github: https://github.com/leovargasdev/disne...
▸ Protótipo no figma: https://www.figma.com/file/AfcZjKNRxD...
▸ Endpoint do filme: https://api.themoviedb.org/3/movie/15...
▸ Endpoint da image: https://image.tmdb.org/t/p/original/I...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗
/ discord
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦
Twitch: / leovargasdev
Instagram: / leuvargas
Twitter: / leovargasdev
Github: https://www.github.com/leovargasdev
Linkedin: / leonardo-luis-de-vargas
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💻 𝗦𝗘𝗧𝗨𝗣
OS: Pop OS 20.04
Notebook Dell (https://amzn.to/3lzdrdY)
Tela 1: Monitor AOC(https://amzn.to/402aIJ7)
Tela 2: Monitor MTEK
Suporte Ergonômico ELG (https://amzn.to/3lrlslj)
Hub USB C p/ usar na 2ª tela (https://amzn.to/40k7iBj)
Webcam Logitech BRIO (https://amzn.to/3lmcQfV)
Microfone Blue Yeticaster (https://amzn.to/3yNqRX0)
Teclado Redragon Varuna (https://amzn.to/40mhskM)
Mouse Logitech G300s (https://amzn.to/42rZCi2)
Mouse Pad (https://amzn.to/42B8YIG)
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
📑 𝗦𝗨𝗠𝗔𝗥𝗜𝗢 𝗗𝗢 𝗩𝗜́𝗗𝗘𝗢
00:00 - Introdução
01:42 - Extraindo cores
03:08 - Montado a estrura do HTML
09:58 - Criando os arquivos CSS
11:05 - Estilização do app.css
17:10 - Estilização do header.css
22:22 - Organizando os elementos da tag main
24:04 - Estilização do movie.css
34:15 - Estilização do movies.css
1:02:54 - Explicando a API do TMDB
1:05:35 - Buscando os dados do filme destaque
1:18:40 - Criando o método getUrlMovie e adicionando variaveis globais
1:23:00 - Pegando os id's dos filmes
1:25:07 - Evento para listar os filmes do menu lateral
1:34:00 - Evento para selecionar o filme destaque
1:40:50 - Melhorias gerais no código
1:43:09 - Encerrando o vídeo
#tutorialhtml #tutorialcss #apitmdb #criandoositedodisneyplus #aprendaacriarositedodisneyplus #tutorialparacriarositedadisneyplus #clonedisneyplus #criandosite
Смотрите видео Interface do Disney Plus com HTML, CSS e Javascript - Parte 1 | Tutorial para iniciantes онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Leo Vargas 31 Май 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 6,546 раз и оно понравилось 381 людям.