Fruta e Fruto - Arquitetura CSS
arquitetura-css
Projeto de site responsivo a ser desenvolvido focando em boas práticas, organização de código e diretórios.
🪧 Vitrine.Dev | |
---|---|
✨ Nome | Fruta e Fruto - Arquitetura CSS |
🏷️ Tecnologias | html, css |
🚀 URL | https://arquitetura-css-assets-navy.vercel.app/ |
🔥 Desafio | https://www.figma.com/file/0gMF5BPgplPYqQA6Om1T1sk9/alura-bootstrap |
Detalhes do projeto
Objetivo
Praticar conceitos de arquitetura como o Atomic Design e B-E-M em CSS. Entender sobre a importância da aplicação desses conceitos na construção de aplicações escaláveis, utilizando também design responsivo e melhores práticas de código limpo.
curso de arquitetura da Alura, instrutor Mateus Castiglioni.
Resumo das aulas
Aula 1: Construção do cabeçalho, implementando arquitetura CSS pelo método Atomic Design. Compartimentação do código em pequenos "átomos" (elementos da página, por exemplo um link da lista menu) formando "moléculas" menu e logo que compõem o "organismo" cabeçalho.
Aula 2: Construção do banner e sobre, implementando método BEM (Block Element Modifier, ou Bloco Elemento Modificador) nas classes HTML.
Aula 3: adição da seção de receitas.
Aula 4: Organização das estilizações CSS em ordem alfabética para facilitar a manutenção dos estilos. Retirando a tag img do banner, afinal o banner é contém uma imagem meramente ilustrativa. Assim, esta deve ser renderizada pelo CSS.
Aula 5: adição do rodapé e responsividade ao site.
Dica: B-E-M ==> B__E--M ==> Bloco__Elemento--Modificador.