Início da Landing Page
Iniciando com mobile first
Planejamento Visual para HTML
Corrigindo Conexão CSS-HTML
Layout Inicial CSS/HTML
Técnicas de Css
CSS: Inspeção e Nomeação Eficiente
Estruturação de Site com BEM
Definindo Cores Primárias
Gradientes em Botões CSS
Construção do Header
Flexbox no Header: Navegação Fácil
Ajustes de Layout Flexbox
Ajustes no Design do Header
Seção de Produtos
Estrutura HTML para Produtos
CSS Flex e Otimização de Imagens
Caixa de Produto em HTML
Outras seções
Design Flex para Produtos
Estilizando Preços de Produtos
Reutilização de Código em HTML
Nova Seção da Landing Page
Footer
Otimização de Layout e Imagens
Formulário Responsivo: HTML e CSS
Estilizando Formulários HTML
Footer com Flexbox e Estilo
Versão desktop
Aprimoramento do Design Web
Menu Responsivo Personalizado
Redesign da Landing Page
Exibição de iPhones Ajustada
Integração Visual de Formulários
Melhorias no Layout e Legibilidade
Footer Flexível e Responsivo
Finalização
Extra! Detalhes
Início da Landing Page
Iniciando com mobile first
Planejamento Visual para HTML
Corrigindo Conexão CSS-HTML
Layout Inicial CSS/HTML
Técnicas de Css
CSS: Inspeção e Nomeação Eficiente
Estruturação de Site com BEM
Definindo Cores Primárias
Gradientes em Botões CSS
Construção do Header
Flexbox no Header: Navegação Fácil
Ajustes de Layout Flexbox
Ajustes no Design do Header
Seção de Produtos
Estrutura HTML para Produtos
CSS Flex e Otimização de Imagens
Caixa de Produto em HTML
Outras seções
Design Flex para Produtos
Estilizando Preços de Produtos
Reutilização de Código em HTML
Nova Seção da Landing Page
Footer
Otimização de Layout e Imagens
Formulário Responsivo: HTML e CSS
Estilizando Formulários HTML
Footer com Flexbox e Estilo
Versão desktop
Aprimoramento do Design Web
Menu Responsivo Personalizado
Redesign da Landing Page
Exibição de iPhones Ajustada
Integração Visual de Formulários
Melhorias no Layout e Legibilidade
Footer Flexível e Responsivo
Finalização
Extra! Detalhes
Introdução
Vamos desenvolver uma landing page de produtos tecnológicos, dividindo o projeto em duas partes: primeiro, criaremos o template com HTML e CSS; depois, adicionaremos funcionalidades usando JavaScript.