/layout-mobile-apeperia

Desenvolvimento do Projeto Apeperia - Curso: Layouts responsivos - trabalhando com layouts mobile (Alura).

Primary LanguageCSS

Projeto Apeperia

Curso: Layouts responsivos - trabalhando com layouts mobile.

ONE | Fase 3 - Especialização Front-End

Tecnologias   |    Projeto   |    Layout   |    Aulas


🚀 Tecnologias

Projeto desenvolvido com as seguintes tecnologias:

  • HTML
  • CSS

💻 Projeto

A proposta do curso é o desenvolvimento da Apeperia, de forma responsiva, ou seja, que se adapta a diversos dispositivos. Vamos também ver o processo de desenvolvimento a partir de um layout pronto no Figma e as vantagens de se utilizar o conceito de Mobile First.

🔖 Layout

Figma do Projeto!

📚 Aulas:

Módulo 1: Ferramentas, unidades e imagens.

Conteúdo:

  • Preparação do ambiente (estruturando HTML, importando reset, fontes e estilos);
  • 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.

Módulo 2: Layout mobile e variáveis CSS.

  • Conceito de mobile first;
  • Viewport e seu conteúdo;
  • Variáveis CSS.

Módulo 3: Particularidades de telas.

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

Módulo 4: Trabalhando a semântica HTML.

  • 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.

Módulo 5: Evoluindo do mobile ao desktop.

  • Informações sobre breakpoints;
  • 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.