Tutorial

Landing page do Meow Café

Nível
10 aulas
3h18

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.

🔗 Link do Figma

Screenshot

👉🏽 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.