Design e Estruturação do Site
O tutorial começa com o design do site, criando uma nova pasta e arquivos no Visual Studio Code, e adicionando imagens ao projeto. Em seguida, o palestrante cria o conteúdo HTML, estiliza a página com CSS, adiciona um menu de navegação, seção de heróis, botões, ícones sociais e uma seção de logotipos.
Estilizando o Site
Nos vídeos 1-2, o palestrante trabalha em um efeito de marquee, seção de habilidades e estiliza a seção de habilidades. Ele define estilos CSS para a classe “holder-blue”, adiciona uma tag h2 e personaliza a lista ul e texto de parágrafo.
Criando uma Seção de Experiência de Trabalho
No vídeo 3, o palestrante cria um modelo HTML para mostrar experiência de trabalho, adiciona conteúdo e estiliza a seção de experiência de trabalho usando CSS.
Estilizando a Página
No vídeo 4, o palestrante estiliza uma página com CSS, definindo cor de fundo, padding e border radius, e estiliza a tag h3, div e parágrafo.
Estilizando a Seção de Experiência de Trabalho
No vídeo 5, o palestrante estiliza a seção de experiência de trabalho, adiciona um efeito de hover e cria uma seção de “Bento UI”, estilizando os itens de Bento.
Criando um Layout Responsivo
No vídeo 6, o palestrante cria um layout responsivo usando CSS grid, experimenta com diferentes dimensões de grid e adiciona consultas de mídia para tornar o grid responsivo em diferentes dispositivos e tamanhos de tela.
Integrando o Serviço de IA do Azure com Next.js
Por fim, o vídeo demonstra como integrar o serviço de IA do Azure com uma aplicação Next.js, incluindo criar uma pasta de API, instalar o pacote `@azure/openai`, configurar a API para interagir com o serviço de IA do Azure e implementar um chatbot.