Projeto Alura Books

Este é o 3º projeto desenvolvido que faz parte da Formação Front End da Platafroma Alura, apresentado por Guilherme Lima, Rafaella Ballerini e Monica Hillman.

Tecnologias   |    Projeto   |    Layout   |    Licença

🧑‍🚀 A idéia deste projeto foi disponibilizada no curso de formação Front End "A partir do zero: Html, Css para projetos web", contendo 6 módulos e um total de 51 horas apresentado por Guilherme Lima, Rafaella Ballerini e Monica Hillman ❤️‍🔥.

🚀 Tecnologias

Esse projeto está sendo desenvolvido com as seguintes tecnologias:

HTML

CSS

Figma

Git and GitHub

💻 Projeto

Foi utilizado a metodologia "BEM" neste projeto aplicado pela Instrutora Monica Hillman, onde ela adotou a abordagem de construção do projeto como "Mobile First", que se entende por qualquer projeto web que leve em consideração a usabilidade em dispositivos móveis primeiro.

Ela revisou alguns conceitos como flexbox, listas e ancoras, criou um menu suspenso interativo, com botão hamburguer sem o uso do JavaScript, algo que achei bem legal e ainda estilizamos com uso de pseudo classes ":hover" e ":checked", tendo o 1º contato também com combinadores tipo "~" no css. Também criamos campos de pesquisa com inputs e label.

A Monica nos apresentou o "SwiperJs", que é um framework de javascript criado e utilizado para a apresentação na forma de slides de uma forma moderna, estilizada e fácil de se implementar, disponível também em Angular, Vue, Solid, Svelte e React.

Também aplicamos o uso de "media-queries" para implementação dos layouts de responsividade conforme projeto desenvolvido no Figma para:

Mobile (min-width; 428px);

Tablet (min-widtth: 1024px);

Desktop (min-width: 1728px).

Como uma de minhas telas que utilizo é a do notebook de 15.6" com resolução HD, adaptei o código também para sua resolução com mais um media-querie screen (min-width: 1366px) com alguns ajustes adicionais, que se adapou perfeitamente ao projeto original.

Ao final do curso realizamos testes de usabilidade, responsividade multi telas e na folha de estilo "header.css", classe ".lista__menu", adicionei um "z-index: 2" devido ela estar aparecendo sob o "pagination" do primeiro carrossel no "Mobile", zerando qualquer "bug" visual no projeto.

Para visualizar a versão atual do projeto é só "Clicar aqui".🚀

🔖 Layout

🖼️ Este projeto no FIGMA foi desenvolvido por ALURA.

📝 Licença

Este projeto está sob a licença MIT.
---

Feito ❤️‍ by Roberto Junior 😁:wave:
🧑‍🚀Inscreva-se no canal do YouTube da Alura!

Obrigado por visitar meu Git e se chegou até aqui dê um "Follow" que retribuo, podemos nos conectar para trocas de ideias e novos projetos.

Até a próxima! 😁🖖.