Frontend Mentor - Solução de componente de resumo de resultados

Esta é uma solução para o Results summary component challenge on Frontend Mentor. Os desafios do Frontend Mentor ajudam-no a melhorar as suas capacidades de codificação através da construção de projectos realistas.

Tabela de conteúdos

Note: Apague esta nota e actualize o índice com base nas secções que guarda.

O desafio

Os utilizadores devem ser capazes de o fazer:

  • Ver a disposição óptima da interface, dependendo do tamanho do ecrã do seu dispositivo
  • Ver os estados de pairar e focar para todos os elementos interactivos na página

Imagem de ecrã

Mobile

Ligações

O meu processo

Basicamente eu demorei algumas horas pra finalizar esse projeto. Eu comecei dando as classes pra todos elementos html, refatorando tudo pra inglês, pois é uma forma de eu começar a praticar o inglês nos códigos.

Antes de finalizar busquei refatorar todo código css pra diminuir as linhas.

Construído com

  • Marcação HTML5 semântico
  • Propriedades personalizadas do CSS
  • Flexbox
  • Fluxo de trabalho Dekstop-primeiro
  • HTML - Biblioteca do HTML
  • CSS - Biblioteca do CSS

O que aprendi

Apenas botei em prática tudo que aprendi. Eu fiquei muito em dúvida no sumário, como eu chamaria os socres visual, memory, reaction, verbal. Após algum estudo resolvi chamar eles pela classe span

Continuação do desenvolvimento

Primeiramente refatorar o CSS. Atualmente está com 171 linhas. Quero reduzir bem ele, e as variáveis estão em português.

Autor

Autores

Agradecimentos ao Allan que me ajudou a ver um erro em meu código onde eu estava fazendo uma chamada global no body com view-heighte não view-width e a disponibilizar seu tempo pra sempre tentar ajudar.

Foto do Allan Rodrigues no GitHub
Allan Rodrigues
Foto do Gustavo Araújo no GitHub
Gustavo Araújo