Interface do Disney Plus com HTML, CSS e Javascript - Parte 2 | 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...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦
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
02:36 - Melhorias na imagem do filme destaque(html/css)
11:34 - Melhorias na imagem do filme destaque(javascript)
13:00 - Melhorias nas imagens do filme destaque(html/css)
21:40 - Melhorias nas imagens do filme destaque(javascript)
29:10 - Testando a performance do código antigo no Lighthouse
31:15 - Reduzindo o tamanho das imagens
34:00 - Testando a performance do código novo no Lighthouse
36:44 - Removendo a listagem dos filmes
40:20 - Criando o efeito no botão do menu
49:29 - Criando o menu lateral
1:15:12 - Corrigindo o problema das requisições repetidas
1:36:53 - Encerramento
#tutorialhtml #tutorialcss #apitmdb #criandoositedodisneyplus #aprendaacriarositedodisneyplus #tutorialparacriarositedadisneyplus #clonedisneyplus
Watch video Interface do Disney Plus com HTML, CSS e Javascript - Parte 2 | Tutorial para iniciantes online without registration, duration hours minute second in high quality. This video was added by user Leo Vargas 08 June 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,542 once and liked it 95 people.