Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive result summary page using HTML & CSS flexbox

@anshumansrivastava98

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Please provide feedback and tell me how I can improve

Community feedback

Adriano 310

@adriano-wb

Posted

O seu código está muito bom, mas pode melhorar a organização com algumas dicas:

1. Melhorar a organização do código HTML

  • Adicionar um espaço após o nome dos atributos;
  • Quebrar as linhas para facilitar a leitura.

2. Usar classes mais descritivas:

  • Alterar as classes "result-left-part" e "result-right-part" para nomes mais descritivos que descrevam melhor seu conteúdo.

3. Separar o CSS em arquivos separados por seções:

  • Separar o CSS em arquivos diferentes por seção (por exemplo, um arquivo para a parte de resultados e outro para a parte de resumo);
  • Utilizar nomes descritivos para os arquivos.

4. Evitar o uso de estilos inline:

  • Utilizar uma classe CSS para definir os estilos da tag.

5. Usar comentários para facilitar a manutenção do código:

  • Adicionar comentários explicando o que cada seção do código faz.

6. Adicionar fallbacks para garantir a acessibilidade:

  • Incluir texto alternativo para as imagens usando o atributo "alt".

7. Melhorar a semântica do HTML:

  • Usar tags semânticas (por exemplo, "header", "main" e "footer");
  • Adicionar uma descrição mais descritiva para a tag "title".

8. Melhorar a acessibilidade:

  • Adicionar uma descrição para o botão "Continue" usando o atributo "aria-label".
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord