Neste projeto foi possível implementar todo o conhecimento adquirido durante os estudos da Formação Front-End da Alura. Seu foco principal é praticar o conceito de "Mobile First" (Móvel Primeiro, tradução nossa) que prioriza o desenvolvimento do projeto em formato para dispositivos celulares móveis e só então adaptar o layout para formatos maiores como tablets, desktops e TVs.
- Sobre o projeto
- Procedimento
- Desafios
- Créditos
Alura Books é o e-commerce fictício de livros de tecnologia, seu site é composto apenas por HTML e CSS e alguns frameworks utilizados para adicionar um carrosel ao projeto.
Nos foi apresentado o conceito de Mobile First, facilitando muito a adaptação para dispotivos maiores.
O método de layout Flexbox foi usado, tornando mais fácil de organizar várias classes. (O método de Grid também foi apresentado em outros cursos, mas para esse projeto, obtive melhores resultados com Flexbox.)
O carrosel foi adicionado usando SwiperJS. Com ele foi possível exibir as capas dos livros, escolher quantas e em qual velocidade elas apareceriam. O processo é bem simples, bastando copiar e colar os códigos para cada funcionalidade do carrosel. No meu projeto, fui além das sugestões do curso e adicionei as funcionalidades autoplay e loop para que as o usuário pudesse ver mais opções durante seu tempo no site.
O uso de Media Queries foi fundamental para a adaptação de tamanho do design de um dispositivo para o outro. Assim, agilizando muito o trabalho.
Curso HTML e CSS: responsividade com mobile-first pode ser encontrado aqui.
Instrutora: Monica Hillman.