Início Profile Projeto
Avatar de

Luís Felipe Mariscal Alves Arten

Fruta e Fruto - Arquitetura CSS

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