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
Смотрите видео Interface do Disney Plus com HTML, CSS e Javascript - Parte 2 | Tutorial para iniciantes онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Leo Vargas 08 Июнь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,542 раз и оно понравилось 95 людям.