Parte 1: Introdução e Configuração do Projeto
O vídeo começa com a apresentação do desafio “Bora Codar” número 33, que consiste em criar um gerador de ticket utilizando a API pública do GitHub. O palestrante agradece Jonas Milan, designer da Rocket, por desenvolver o projeto. Em seguida, ele configura um novo projeto, criando pastas e arquivos essenciais, como `index.html`, `style.css` e `main.js`.
Parte 2: Estruturação do HTML
Em seguida, o palestrante constrói a estrutura HTML, criando um contêiner, um cabeçalho com logotipo, um campo de entrada com rótulo e um botão para gerar o ticket. Ele explica que se concentrará na parte funcional do desafio e deixará a animação e o download como um exercício para os espectadores.
Parte 3: Estilizando a Página
O palestrante estiliza a página utilizando CSS, definindo a caixa de tamanho para bordo, largura e altura do corpo do elemento e selecionando fontes de um guia de estilo. Ele também define uma imagem de fundo para a página e menciona que o elemento Hero terá uma imagem de fundo do Figma.
Parte 4: Estilizando Elementos
Em seguida, o palestrante estiliza vários elementos da página, incluindo headings, rótulos, campos de entrada, mensagens de erro e botões. Ele explica suas decisões de design e processo de pensamento ao longo do caminho.
Parte 5: Estilização Final e Conclusão
Por fim, o palestrante ajusta a estilização da página, lidando com layout, padding e margens de vários elementos. Ele conclui que a estilização da página foi concluída e que agora passará a adicionar funcionalidades utilizando JavaScript.
Adicionando Funcionalidades com JavaScript
A segunda parte do vídeo apresenta como adicionar funcionalidades ao gerador de ticket utilizando JavaScript. O palestrante cria constantes para elementos HTML, adiciona um ouvinte de eventos ao botão que faz uma chamada API assíncrona à API do GitHub e extrai o nome de usuário e URL da imagem do avatar. Ele também adiciona tratamento de erros para exibir mensagens de erro adequadas. Por fim, o palestrante estiliza os elementos HTML para exibir a imagem do avatar e o nome de usuário.
Em resumo, este vídeo apresenta um passo a passo para criar um gerador de ticket simples utilizando JavaScript, HTML e CSS. O palestrante compartilha suas decisões de design e pensamento ao longo do caminho, tornando-o um guia valioso para desenvolvedores iniciantes e experientes.