3
respostas

[Projeto] Exercício em HTML

Olá queria algumas sugestões onde posso melhorar nesse código? Agradeço pela atenção

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Boa noite, João! Tudo bom?

Antes de apontar alguns problemas que seu código possui, preciso saber para qual finalidade você pede melhorias no código:

1 - Boas práticas e código limpo 2 - Se o código possui erros 3 - Algum resultado inesperado na hora da execução?

Estarei pronto pra te ajudar!

Boa Tarde, Felipe! Agradeço pela atenção para tira minhas duvidas

Queria saber mesmo se o código possui alguns erros para poder melhorar?

Perfeito! Vamos lá!

Inicialmente seu código parece bem estruturado e a medida que seu projeto for crescendo, automaticamente aprenderá os conceitos de seções e flexbox para os posicionamentos do código.

Porém, podemos melhorar a lista não ordenada (tag ul) que você criou...

Quando temos uma lista, independente se é ou não ordenada, o conteúdo personalizado precisa estar dentro dos items da lista (tag li) que faz parte da composição do elemento. Então temos:

<ul>
    <li>Seu conteúdo 1</li>
    <li>Seu conteúdo 2</li>
</ul>

No seu caso, podemos melhorar para a seguinte maneira:

<ul>
    <li>
        <h4>DONG WU</h4>
        <img src=".../">
        <span>Características do Game</span>
    </li>
    <li>
        <h4>Games of Fate</h4>
        <img src=".../">
        <span>Características do Game</span>
    </li>
    <li>
        ...
    </li>
</ul>

Isso que foi feito melhora a compreensão na hora da pessoa se encontrar no código, boas práticas e semântica para facilitar a leitura do navegador.

Qualquer outro ajuste que for necessário fazer, visualmente falando, não será papel do HTML, mas sim, do CSS.