Projeto seguindo os conceitos do Mobile First, onde a estruturação do projeto se inicia seguindo como base dispositivos mobile ao invés dos desktops. Esse projeto foi feito no curso de Layouts Responsivos da Alura, com o professor Matheus Alberto.
- Grande parte dos acessos e vendas vem de dispositivos mobile
- O design é minimalista e simplificado
- Foco em conteúdo
- A interface pode ter diversas features mais ricas
- Maior capacidade de banda e processamento
- O produto é otimizado para desktop (ex: Google Docs)
- 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;
- 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;
- Utilizar as unidades de viewport;
- Identificar a diferença entre unidades absolutas e relativas;
- Analisar as limitações físicas de dispositivos;
- 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;
- 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;