- CSS
- Metodologia BEM (Block Element Modifier)
- Resumo de regras da metodologia BEM:
- Block (Bloco)
- É um componente em si, ou seja, Blocks são independentes, reutilizáveis e possuem significado próprio.
- Exemplos:
.navbar,.product-card
- Element (Elemento)
- São como partes (subdivisões) de um Block e não possuem significado quando estão sozinhos.
- Elements seguem a seguinte estrutura de nomeação: Block + __ + Element.
- Exemplos:
.card__description,.form__button
- Modifier (Modificador)
- Utilizado para alterar o estilo, comportamento ou estado de um Block ou Element.
- Para criar um modifier, basta seguir essa regra de nomeação: Block/Element + -- + Modifier
- Exemplos:
.button--big,.photo__img--rounded
- Block (Bloco)
- A propriedade
object-fitdo CSS permite controlar o preenchimento de tagsimg(imagens) dentro do espaço disponibilizado pelo seu container. Para mais informações, clique aqui (Página doobject-fitna MDN Web Docs)
Instruções do desafio
Analise bem ele, veja que existe 2 variações de tamanho...
Já pode por a mão no código e criar a estilização dos componentes.
Não se esqueça que no conteúdo da Maratona de hoje o Daniel também criou o componente "Filme" da Netflix - estude o conteúdo ;)
Crie os componentes usando a metodologia BEM CSS (aula 1 do dia de hoje).
Agora você já pode montar página que lista todas as Playlists e também tem componentes que você criou no dia de ontem. O Design da página está no Figma.
Você pode usar suas playlits e conteúdos que mais gosta :D seja criativo no seu App! Coloque as instruções aqui
Foi implementado os componentes aproveitando-se das regras de nomenclatura de classes da metodologia BEM. Assim que todos componentes necessários foram criados e estilizados, foi possível construir a página inicial. O resultado final da interface pode ser conferido clicando aqui. Caso queira ver o repositório referente a este desafio, clique aqui.