Entrar Ainda não tem acesso?
1
resposta

[Projeto] Exercício - Projeto Portifólio.

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Layout e tags semânticas e atividade Lista de exercícios

por CAIO BALDEZ DA SILVA
| 4.5k xp | 4 posts
<!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">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Portifólio de Caio</title>
</head>
<body>
    <div class="imagem01">
        <h1>Desenvolvedor Frontend em Formação.</h1>
        <p>Portfólio de <strong>Caio Baldez</strong> desenvolvido com base nas atividades da <strong>Alura.</strong></p>
        <button>Instagram</button>
        <button>GitHub</button>
        <br><img src="1650205336490.jpeg" alt="foto do desenvolvedor Caio Baldez sorrindo">
    </div>
    <header> 
    <main>
        <h1>Oi, esse é o meu Portfólio com base nas aulas e exercícios desse módulo.</h1>
        <p>Olá! Me chamo, Caio Baldez, sou estudande de desenvolvimento <strong>Front-end</strong> e estou utilizando o HTML para desenvolver as minhas atividades iniciais.</p> 
        <img src="images.jpeg" alt="logo-da-alura-cursos">
    </main> 
   </header>
    <footer>
        <h3>Contato</h3>
        <a href="https://instagram.com/c.bldz.27">Instagram</a> 
        <a href="https://github.com/caiobaldez">GitHub</a>
    </footer> 
    
</html>

Style.css

body{
    background-color: rgb(0, 48, 152);
}
h1{
    color: aliceblue;
}
p{
    color: white;
}
button {
    background-color: black;
    color: white;
    border: none;
}
h3 {
    color: aliceblue;
}
a {
    color: white;
}
1 resposta
por Mike de Sousa
| 545.7k xp | 724 posts
Alura Scuba Team Suporte Educacional

Olá, Caio.

Muito obrigado por compartilhar conosco o seu código.

Vou deixar algumas dicas para melhorar a semântica do seu projeto:

  1. Estruturas das tags: No seu códido, a tag <main> está dentro da tag <header>, é interessante deixa-las separadas, pois cada uma define uma parte diferente do conteúdo da página. Sendo a <header> o cabeçalho e a <main> o conteúdo principal. E também senti falta de uma tag de fechamento do <body>.
  2. Hierarquia de títulos: Outra coisa interessante, seria manter somente um <h1>, isso ajuda o SEO e a leitores de tela a definir o título principal da página. E isso ajuda tanto na visibilidade do seu site em motores de busca quanto em acessibilidade. Você pode trocar o segundo por um <h2>, por exemplo:
<body>
    <header>
        <h1>Desenvolvedor Frontend em Formação.</h1>
        <p>Portfólio de <strong>Caio Baldez</strong> desenvolvido com base nas atividades da <strong>Alura.</strong></p>
        <button>Instagram</button>
        <button>GitHub</button>
        <br><img src="1650205336490.jpeg" alt="foto do desenvolvedor Caio Baldez sorrindo">
    </header>

    <main>
        <h2>Oi, esse é o meu Portfólio com base nas aulas e exercícios desse módulo.</h2>
        <p>Olá! Me chamo, Caio Baldez, sou estudante de desenvolvimento <strong>Front-end</strong> e estou utilizando o HTML para desenvolver as minhas atividades iniciais.</p> 
        <img src="images.jpeg" alt="logo-da-alura-cursos">
    </main> 
    
    <footer>
        <h3>Contato</h3>
        <a href="https://instagram.com/c.bldz.27">Instagram</a> 
        <a href="https://github.com/caiobaldez">GitHub</a>
    </footer> 
</body>

Espero ter ajudado!

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

Abraços :)