Diário de um grupo de estudos sobre front-end
Tags: braziliandevs, beginners, devjournal
Published: 2023-03-07 20:22:44

## Contextualização

Durante o mês de março está acontecendo o **6º Challenge de front-end da Alura Cursos Online**. O Challenge é uma implementação do Challenge Based Learning, onde você vai se engajar em cima de um problema, para investigar soluções e por fim colocar seu projeto no ar. Tudo isso com você comentando e ajudando nos projetos de outros alunos e alunas.

O projeto que será desenvolvido é o **CodeChella,** um festival de música alternativa que acontece anualmente, é composto por gêneros diversos e visa promover uma experiência encantadora e inesquecível para o visitante, proporcionando uma integração multicultural e social. 

Durante a semana um do desafio, o objetivo é desenvolver os elementos da tela inicial, da sobre as experiências fornecidas e setores do festival. E, assim como em uma sala de aula, temos vários alunos discutindo sobre diferentes abordagens de como seguir no desenvolvimento do projeto. 

## Grupo de estudos

Sempre me posiciono no mesmo degrau que os alunos, e no grupo de estudos não seria diferente. Não compareci com todas soluções construídas. Melhor ainda: apareci com nada preparado. Na produção de uma aula nós estudamos o conteúdo anteriormente, chegamos com o passo a passo de como chegar no resultado, mas eu não queria isso. Queria me unir, pesquisar, construir, tudo em conjunto. Transformar o aluno em personagem principal nesse desafio.

E não foi atoa, vamos destacar os conteúdos trazidos durante a conversa:

- **Qual a diferença entre a tag ``<span>`` e ``<div>``?**

Ambas não tem valor semântico, mas enquanto a tag span serve ao código com atributo display inline, a tag div serve ao código de tem como atributo display block.

- **Há diferença de acessibilidade entre construir um menu hamburguer somente com HTML e CSS e com JavaScript?**

A conclusão foi de que provavelmente não, desde que a pessoa desenvolvedora tome cuidado com os elementos escolhidos e caso necessário, usar atributos relacionados a acessibilidade.

- **Quais atributos ajudam a deixar meus elementos acessíveis?**

Foi discutido brevemente sobre [“ARIA roles”]([https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)). É um atributo que permite atribuir “cargos” para os elementos, melhorando seu significado semântico. Isso foi abordado pra desenvolver o menu hamburguer, na problematização de como poderíamos inserir a imagem como ``background-image`` de um ``<span>`` mas ainda assim respeitando a acessibilidade daquele botão. 

- **Como remover os estilos padrões da página?**

Você pode usar o arquivo ``reset.css`` que já entrega isso pronto. Tanto utilizando um [arquivo css]([https://meyerweb.com/eric/tools/css/reset/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library](https://meyerweb.com/eric/tools/css/reset/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library)) exclusivamente pra isso quanto importando um [pacote]([https://cdnjs.com/libraries/meyer-reset](https://cdnjs.com/libraries/meyer-reset)).

Há também o artigo [”O que é o reset.css?”]([https://www.alura.com.br/artigos/o-que-e-reset-css](https://www.alura.com.br/artigos/o-que-e-reset-css)) da Alura que comenta sobre isso.

- **Como remover os estilos de um elemento?**

Uma curiosidade trazida é a propriedade CSS chamada “all”. Resumidamente, ela redefine todas as propriedades de um elemento. Ela pode definir os valores como o seu inicial, como o herdado dos elementos pais, ou valores especificados em outros locais.

Um lugar bacana pra ler mais sobre essa propriedade é a [MDN Web Docs]([https://developer.mozilla.org/en-US/docs/Web/CSS/all](https://developer.mozilla.org/en-US/docs/Web/CSS/all)).

- **Como colocar os efeitos nas imagens igual ao do Figma?**

Geralmente podemos contar com o inspecionar do Figma, ao clicar no elemento. No caso do layout do CodeChella, a propriedade que está sendo usada é a ``mix-blend-mode``.

Essa propriedade descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background. Há vários valores que podem ser inseridos. No caso do projeto, é o ``multiply``. Você pode visualizar as outras na documentação do [MDN Web Docs]([https://developer.mozilla.org/pt-BR/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/pt-BR/docs/Web/CSS/mix-blend-mode)).

- **Como lidar com a imagem de fundo das seções?**

Aqui depende do caso, temos várias propriedades CSS que podem ser utilizadas. Algumas delas são: ``background``, ``background-size``, ``background-position`` e ``background-repeat``.

Sendo o ``background`` ou ``background-image`` onde colocamos a url da imagem que será inserida, o ``background-size`` referente ao tamanho que ela ocupará, o ``background-position`` define a posição inicial da imagem de fundo e o ``background-repeat`` determina como as imagens serão repetidas.

Apesar de termos vistos essas propriedades, o problema de alguns estudantes não foram resolvidos. Então ficará para o próximo grupo de estudos continuar neste tópico.

---

Isso tudo foram assuntos abordados em somente uma hora de discussão. Apesar de, na prática, termos programado poucos elementos, a troca de conhecimentos pode ter ajudado a tirar dúvidas e estimulado a curiosidade de quem está iniciando. Essa será uma prática que tentarei aplicar no mínimo duas vezes por semana, e quem sabe, relatar os aprendizados por aqui.

Agradecimentos especiais ao <a href="https://github.com/marcelluscaio">Caio Marcellus</a> que disponibilizou a maioria dos links disponibilizados aqui 🙂

## Links interessantes

- [Entendendo CSS: Display Inline, Block e Inline-Block]([https://dev.to/sucodelarangela/entendendo-css-display-inline-block-e-inline-block-lic](https://dev.to/sucodelarangela/entendendo-css-display-inline-block-e-inline-block-lic))
- [Entendendo CSS: Pseudo-Classes e Pseudo-Elementos]([https://dev.to/sucodelarangela/entendendo-css-pseudo-classes-e-pseudo-elementos-b83](https://dev.to/sucodelarangela/entendendo-css-pseudo-classes-e-pseudo-elementos-b83))
- [Como aplicar opacidade em background-image sem afetar textos]([https://dev.to/sucodelarangela/como-aplicar-opacidade-em-background-image-sem-afetar-textos-31fj](https://dev.to/sucodelarangela/como-aplicar-opacidade-em-background-image-sem-afetar-textos-31fj))