Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Projeto] HTML e CSS: ambiente, estrutura e estilo - atividade

HTML inicial :

<!DOCTYPE html> 
<html lang="en">
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Document</title> 
</head> 
<body> 
    <title>minha jornada em tecnologia</title> 
        <h1>Oque estou aprendendo? 
        <p>Estou aprendend a criar páginas em HTML pelo Visual Code utilizando o Live Server</p> 
        </h1> 
            <h2>Ferramentas que estou utilizando 
            <p>Nesse mmento estou utilizando o Chrome, VSCode e o Live Server que estão me ajudando a visualizar como está o andamento da minha página.</p> 
            </h2> 
            <a href="https://cursos.alura.com.br/classpage/html-css-ambiente-estrutura-estilo/task/255638">Veja o ponto que eu estou agora</a> 
</body> 
</html>

HTML após a revisão da IA:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>minha jornada em tecnologia</title>
</head>
<body>
    <h1>Minha jornada em tecnologia</h1>
        <h2>O que estou aprendendo:</h2>
        <p>Estou aprendendo a criar páginas em HTML pelo VSCode utilizando o Live Server</p>
        <h2>Ferramentas que estou utilizando</h2>
        <p>Nesse momento estou utilizando o Chrome, VSCode e o Live Server que estão me ajudando a visualizar como está o andamento da minha página.</p>
    <a href="https://cursos.alura.com.br/classpage/html-css-ambiente-estrutura-estilo/task/255638">Veja o ponto que eu estou agora</a>


</body>
</html>

A IA me indicou ajustar a linguagem do HTML de "en" para "pt-BR", também indicou tirar o title do body e inserir no head.
Houve também a indicação do H1 ser um título principal, e os outros subtitlos como h2.
Utilizei todas as indicações da IA pois notei que eram consideráveis para o projeto em sí.

1 resposta

Oi, Victor! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Gostei de ver que você comparou a versão inicial com a versão revisada e analisou cada ajuste sugerido pela IA. Essa prática demonstra atenção aos conceitos apresentados na atividade de HTML e CSS e ajuda a compreender melhor a estrutura de uma página web. As mudanças no atributo lang="pt-BR", na posição da tag <title> dentro do <head> e na organização dos títulos com <h1> e <h2> seguem as boas práticas de HTML, tornando o documento mais organizado, semântico e preparado para navegadores e mecanismos de busca.

Também é positivo observar que você utilizou o VSCode, o Live Server e o Google Chrome durante os testes, pois esse fluxo de desenvolvimento facilita a visualização das alterações e contribui para o aprendizado de desenvolvimento web desde os primeiros projetos.

Uma dica interessante para o futuro é utilizar a tag <main> para organizar o conteúdo principal da página. Veja este exemplo:


<main>
  <h1>Minha jornada em tecnologia</h1>
  <p>Estou aprendendo HTML.</p>
</main>

Esse código cria uma área destinada ao conteúdo principal do site, melhorando a estrutura do HTML, a organização da página e a acessibilidade para leitores de tela e outros recursos de navegação.

Conforme você avançar no curso de HTML e CSS, verá que utilizar elementos semânticos torna o código mais fácil de manter e compreender. Qual foi a mudança sugerida pela IA que mais ajudou você a entender a estrutura de uma página HTML?