Landing page do Meow Café
Assistir agora
1. Introdução do Meow Café
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Landing page do Meow Café.
Descrição do projeto
Dê vida ao design do "Meow Café" presente no Figma, transformando-o em uma página funcional! O principal objetivo deste mini projeto é refinar suas habilidades em HTML, JavaScript e CSS, construindo uma landing page sem depender de frameworks ou bibliotecas externas.
🔨 Requisitos
- A aplicação deverá ser responsiva. Considere pelo menos 2 tamanhos de tela (mobile e desktop).
- Transforme o design do Figma em um site funcional usando apenas HTML, JavaScript e CSS.
- O desafio principal é fazer a página sem o uso de frameworks ou bibliotecas, mas fica ao seu critério caso você queira utilizar alguma ferramenta que você está estudando (verifique o FAQ para mais informações).
- Estilize sua aplicação para que ela se assemelhe o máximo possível ao design sugerido.
- Faça o deploy e submeta sua implementação no Codante.
🔍 Dicas
- Utilize Flexbox e/ou Grid para criar o layout da página.
- Para tornar sua página responsiva, considere o uso de media queries em seu CSS.
🎨 Design
Temos um design disponível no Figma.
👉🏽 Sobre esse mini-projeto
Tecnologias sugeridas
- HTML
- CSS
- JavaScript Puro
Pré-requisitos
HTML, CSS
JavaScript
Créditos
Esse design foi criado por Camilly Vianna inspirado no tema Coffee Shop by Astra
❓ FAQ
Posso utilizar frameworks ou bibliotecas para criar este mini projeto?
Esse projeto foi pensado para ser desenvolvido sem o uso de frameworks ou libs externas, portanto a resolução oficial será feita dessa forma. Porém não limitamos os projetos a uma tecnologia exclusiva, dessa forma, se você preferir pode utilizar outras tecnologias.
Como faço para ver a resolução oficial?
A resolução oficial sempre é disponibilizada no site oficial do Codante. Verifique na nossa agenda se a data da resolução deste mini projeto já está definida.
Seu Instrutor
Aulas
- 1.
Introdução do Meow Café
05:53 - 2.
Configurando o projeto Meow Café
10:01 - 3.
Implementando a Navbar
38:18 Tornando a navbar responsiva
20:42Criando a seção de Cafés
27:25Implementando a seção de Croissants
27:11Implementando a seção de Delivery
14:05Implementando a seção Sobre nós
14:24Implementando a seção de Endereço (Meow Enjoy)
24:42Implementando o Footer e finalizando o projeto
16:03