Frontend Mentor | Pagina feita usando os dados JSON locais para preencher dinamicamente. coding challenge solution

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

@pRicard0

Posted 14 days 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

Pagina feita usando os dados JSON locais para preencher dinamicamente.