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”. É 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 exclusivamente pra isso quanto importando um pacote.

Há também o artigo ”O que é o 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.

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

• 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 Caio Marcellus que disponibilizou a maioria dos links disponibilizados aqui 🙂

Links interessantes

• Entendendo CSS: Display Inline, Block e Inline-Block
• Entendendo CSS: Pseudo-Classes e Pseudo-Elementos
• Como aplicar opacidade em background-image sem afetar textos