A fim de testar os conhecimentos obtidos até o momento, resolvi recodificar e unificar os 3 projetos desenvolvidos da Barbearia Alura (Home, Produtos, Contato), desenvolvendo o html e o css do zero, usando apenas o que havia absorvido.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Refazendo Barbearia Alura |
| 🏷️ Tecnologias | html, css |
| 🚀 URL | https://yagojsantos.github.io/barbearia-refeita/ |
Na recodificação da página “Home”, após criar sua estrutura base, revisei o código a fim de eliminar configurações desnecessárias na estilização do css. Substitui alguns elementos HTML como, tags div para section e utilizei o float para melhor posicionar imagens.
| Antes | Depois |
|---|---|
 |
 |
Além da dificuldade de iniciar uma página do absoluto zero, encontrar boas imagens para compor a estrutura, não é tarefa fácil. Além disso, idealizar e posicionar tais figuras junto a outros elementos levou certo tempo, uso da lógica e propriedades especificas do css.
Próximos passos específicos: Incrementar com elementos externos, como fontes, vídeos e mapa de localização.
Criada a base, estilizei a lista não ordenada de itens focando a harmonização com os elementos de Cabeçalho e Rodapé presentes em todas as páginas. Elaborei um background com uma imagem que pode ser repetida tanto no eixo X quanto no Y, junto a uma camada a frente que determina a cor e opacidade, derivando assim, um efeito bacana no contexto geral no pano de fundo.
| Antes | Depois |
|---|---|
 |
 |
As imagens encontradas para representar cada item da lista de produtos, não ficavam boas usando os mesmos valores nos atributos de altura e largura no css, como solução, utilizei a ferramenta Gimp para editar cada figura, padronizando a resolução.
Após inserido elementos de input, legendas e figuras, modifiquei totalmente a estrutura do formulário se comparado ao modelo anterior. Optei em dividi-lo em Fields separadas de acordo com a semântica de cada parte, além de aplicar toda estilização com base nos padrões já desenvolvidos nas páginas anteriores. Nessa etapa do desenvolvimento, executei a manutenção do código css removendo seletores repetidos e/ou sem serventia.
| Antes | Depois |
|---|---|
 |
 |
Idealizar a nova proposta de layout do formulário foi uma árdua tarefa. Notei que levaria muito tempo se tivesse de voltar ao navegador, para utilizar o DevTools, sempre que quisesse conferir se o tamanho das divisões estava conflitando de alguma forma, então, resolvi definir uma cor de fundo diferente para cada uma delas. Isso além de agilizar o processo, facilitou em determinar e entender o funcionamento e características dos elementos a serem adicionados.
Conforme a meta, todas as páginas estão responsivas e se adaptam em telas de smartphones, tablets e notebooks/monitores.
Essa foi a primeira vez que trabalhei com as propriedades do Flexbox, media queries, variáveis css e o padrão BEM, sem auxílio de algum vídeo e empregando apenas o que havia anotado ou aprendido. O maior obstáculo (e o que me fez gastar mais tempo), foi a implementação do padrão de nomenclaturas BEM, já que por muitas vezes, foi necessário a utilização de Módulos dentro de Módulos, oque causou diversas dúvidas na hora de nomear as classes.
No processo de atualização da página “Home”, adicionei alguns elementos condizentes com o modelo apresentado durante o curso HTML5 e CSS3 parte 4: avançando no CSS, que estavam ausentes na versão anterior.
| Antes | Depois |
|---|---|
 |
 |
Uma página com número menor de elementos HTML se comparado às demais, porém, isso não facilitou o processo de adaptação do layout, pelo contrário, a pequena quantidade de itens fez com que o background personalizado não se adequasse, não preenchendo o espaço por inteiro. Como solução utilizei a propriedade “min-height: 100vh;“ e para impedir que o rodapé cobrisse os itens em determinadas resoluções de tela, apliquei “padding: 4rem 1rem;”.
Pela quantidade de elementos e divisões, fora as propriedades anteriormente empregadas para o posicionamento dos mesmos, posso dizer que essa, com toda a certeza, foi a página mais desafiadora do projeto, mas através da utilização da tag fieldset e um agrupamento estratégico, consegui elaborar uma lógica de responsividade robusta que supriu a necessidade de criar estilizações dentro dos breakingpoints para os demais dispositivos.
