Olá, Eduardo. Como vai?
Parabéns pela resolução dos exercícios! O seu código está excelente, muito bem estruturado e demonstra que você pegou direitinho a lógica por trás das tags fundamentais do HTML.
A estrutura base do documento (<!DOCTYPE html>, <html>, <head>, <body>) foi aplicada perfeitamente em ambos os arquivos, e a codificação de caracteres com <meta charset="UTF-8"> está presente, o que garante que nossa página não terá problemas com acentos ou caracteres especiais da língua portuguesa.
Analisando o seu código, vale destacar alguns pontos muito positivos:
- Uso correto da hierarquia de títulos: No segundo exercício, você utilizou o
<h1> para o título principal da página e o <h2> para o subtítulo. Isso é uma excelente prática tanto para a organização visual quanto para o SEO (motores de busca como o Google). - Tag de imagem com atributo
alt: Você adicionou a descrição alt="Logo do HTML 5". Esse atributo é fundamental para a acessibilidade na web, pois os leitores de tela utilizados por pessoas com deficiência visual dependem dele para descrever o que está na imagem. - Uso de listas não ordenadas: A tag
<ul> combinada com as <li> ficou perfeita para listar as matérias do seu plano de estudos.
Para complementar o seu aprendizado e agregar ainda mais valor ao seu projeto de estudos para Full Stack, deixo uma sugestão de semântica que você verá bastante ao longo do curso:
Utilizando Tags Semânticas no Body
Atualmente, todo o seu conteúdo está solto diretamente dentro da tag <body>. À medida que as páginas crescem, a comunidade de desenvolvimento adota as chamadas tags semânticas para indicar ao navegador o papel de cada bloco de texto.
Você pode envelopar o seu conteúdo principal dentro da tag <main>. Veja como o seu segundo código ficaria ainda mais profissional e semântico:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Projeto Pessoal</title>
</head>
<body>
<main>
<h1>Lista de matérias a serem estudadas</h1>
<h2>Aqui terá uma lista de assuntos a serem estudados</h2>
<p>A lista de matérias a serem estudadas para se tornar um desenvolvedor full stack.</p>
<img src="html.png" alt="Logo do HTML 5">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>C#</li>
<li>Backend</li>
</ul>
</main>
</body>
</html>
Essa separação ajuda os navegadores e ferramentas de busca a entenderem exatamente onde começa e termina o miolo de conteúdo relevante da sua página.
Seu início na trilha de Front-end está ótimo. Continue praticando e avançando pelos módulos!
Espero que possa ter lhe ajudado!
