Projeto Apeperia

Projeto com tecnologias CSS e HTML para exemplificar a responsividade mobile/web. Curso Alura

Utilizando Emmet

---

Mobile first:

---

Tablet:

---

Web:

---

01.

• Analisar e desmembrar o layout recebido;
• Usar o EMMET para criar blocos de código HTML;
• Usar as unidades relativas REM e EM;
• Tipos de imagens e SVGs;

02.

• O que é e para que serve mobile-first;
• Como funciona o initial-scale dentro do conteúdo do Viewport;
• Como declarar e chamar variáveis CSS;

- Algumas motivações para usar mobile-first:
Grande parte dos acessos e vendas vem de dispositivos mobile
O design é minimalista e simplificado
Foco em conteúdo

- Algumas motivações para usar desktop-first:
A interface pode ter diversas features mais ricas
Maior capacidade de banda e processamento
O produto é otimizado para desktop (ex: Google Docs)

03.

• Utilizar as unidades de viewport;
• Identificar a diferença entre unidades absolutas e relativas;
• Analisar as limitações físicas de dispositivos;

04.

• Como lidar com as imagens do layout que recebemos;
• Tags e atributos que têm mais função de semântica do que estilo;
• A importância de escrever um código semântico;

05.

• Criar estilizações diferentes para diversos dispositivos com media queries;
• Adaptar estrutura e conteúdo para layouts diferentes;
• Progredir de um layout mobile até um layout para desktop;