Interface do Disney Plus com HTML, CSS e Javascript - Parte 1 | Tutorial para iniciantes

Published: 31 May 2022
on channel: Leo Vargas

6,546

381

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

Watch video Interface do Disney Plus com HTML, CSS e Javascript - Parte 1 | Tutorial para iniciantes online without registration, duration hours minute second in high quality. This video was added by user Leo Vargas 31 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,546 once and liked it 381 people.

16,668

239