Skip to content
Submitted 6 months ago

Pagina feita usando os dados JSON locais para preencher dinamicamente.

Vinicio :)•140
@JoseVinicioo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Em ter conseguido colocar os dados dinamicamente utilizando o arquivo .json

What challenges did you encounter, and how did you overcome them?

Em colocar as cores dos títulos e das caixas dentro de summary de maneira dinâmica, mas coloquei o código das cores dentro do próprio arquivo json

What specific areas of your project would you like help with?

Qualquer ajuda é bem vinda :D

Community feedback

  • P. Ricardo•2,370
    @pRicard0Posted 6 months ago

    Projeto ta top, vou só dar algumas dicas e explicações sobre alguma coisas.

    Dicas HTML.

    • Ao invés de usar <div> com a classe "info", é mais semântico utilizar <section>
    • Sabe esses logos a esquerda de Reaction, Memory e tals? Deixe o atributo alt em branco. São imagens meramente ilustrativas e não devem conter descrições pois isso pode prejudicar a acessibilidade. O atributo alt serve para um leitor de tela explicar para alguém com deficiência visual o que aquela imagem se trata e fornecer o contexto necessário para ele. Por exemplo... uma imagem de QR Code é algo importante e alguém cego precisa saber. Mas e esses ícones, sabe? Pode atrapalhar.
    • É recomendado especificar o tipo do botão. <button type="button">. É uma boa prática e evita que o padrão possa ser do tipo "submit" que é botão para envio de formulário.

    Diquinha CSS

    • É recomendado que você utilize rem ao invés do em na maioria dos casos. Recomendo saber a diferença. O rem é relativo ao root que é a raiz do documento enquanto em é relativo ao elemento pai, elemento alvo. O em é bem mais situacional de se usar e pode adicionar uma complexidade meio desnecessária, claro, é útil em alguns casos.
    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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