1
resposta

[Projeto] Lista de exercícios

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio de Mauro Cahú</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#contato">Contato</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Bem-vindo ao meu portfólio!</h1>
        <p>Olá! Sou Mauro Cahú, desenvolvedor web. Ajudo empresas a melhorar sua presença digital com soluções eficientes e criativas. Vamos conversar?</p>
        
        <button><a href="https://github.com/MRCahu" target="_blank">GitHub</a></button>
        <button><a href="https://instagram.com/seuusuario" target="_blank">Instagram</a></button>
        
        <!-- Imagem personalizada -->
        <img src="ÁGUIA_FALCÃO_1.png" alt="Mauro Cahú - Desenvolvedor Web">

    </main>

    <footer>
        <p>© 2023 Mauro Cahú. Todos os direitos reservados.</p>
        <p>Entre em contato: <a href="mailto:maurocahu@gmail.com">maurocahu@gmail.com</a></p>
    </footer>
</body>
</html>

Como eu poderia melhorar?

1 resposta

Olá, Mauro, como vai?

Seu código está bem estruturado e usa corretamente as tags semânticas. Há alguns pontos que podem ser ajustados para melhorar a acessibilidade e a semântica:

O <button> não deve envolver links (<a>), pois botões são usados para ações dentro da própria página, enquanto links são para navegação. O ideal seria remover o <button> e manter apenas o <a> com uma classe para estilização. Exemplo:

<a href="https://github.com/MRCahu" target="_blank" class="botao">GitHub</a>
<a href="https://instagram.com/seuusuario" target="_blank" class="botao">Instagram</a>

O nome do arquivo da imagem contém caracteres especiais (como "Á" e "_"). Para evitar possíveis problemas de carregamento, renomeá-lo para algo como aguia-falcao-1.png pode ser uma boa prática.

No geral, seu código está ótimo. Continue compartilhando seus projetos no fórum!

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)