[Projeto] Documentação e HTML - Exercício 01 | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Construindo a estrutura básica do HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>As melhores ofertas estão aqui!</title>
    </head>
    <body>
        
    </body>
</html>

Adicionando conteúdo ao HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>As melhores ofertas estão aqui!</title>
    </head>
    <body>
        <h1>Super Ofertas da Semana - Descontos Imperdíveis!</h1>
        <p>Aproveite as melhores promoções do nosso site e garanta produtos incríveis com até 70% de desconto!<br><br>
        São ofertas por tempo limitado em diversas categorias!<br><br>
        Corra, porque os estoques são limitados e os preços vão embora rapidinho!<br>
        Confira agora e economize de verdade!</p>
    </body>  
</html>

Trabalhando com meta tags e títulos:

<!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>As melhores ofertas estão aqui!</title>
    </head>
    <body>
        <h1>Super Ofertas da Semana - Descontos Imperdíveis!</h1>
        <p>Aproveite as melhores promoções do nosso site e garanta produtos incríveis com até 70% de desconto!<br><br>
        São ofertas por tempo limitado em diversas categorias!<br><br>
        Corra, porque os estoques são limitados e os preços vão embora rapidinho!<br>
        Confira agora e economize de verdade!</p>
    </body>  
  </html>

Organizando conteúdo com tags HTML:

<!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>As melhores ofertas estão aqui!</title>
    </head>
    <body>
        <h1>Super Ofertas da Semana - Descontos Imperdíveis!</h1>
        <h2>As melhores ofertas VOCÊ só encontra aqui!</h2>
        <p>Aproveite as melhores promoções do nosso site e garanta produtos incríveis com até 70% de desconto!<br><br>
        São ofertas por tempo limitado em diversas categorias!<br><br>
        Corra, porque os estoques são limitados e os preços vão embora rapidinho!<br>
        Confira agora e economize de verdade!</p>
    </body>  
  </html>

5|6. Adicionando imagens com acessibilidade | Listando itens em HTML:

<!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>As melhores ofertas estão aqui!</title>
    </head>
    <body>
        <h1>Super Ofertas da Semana - Descontos Imperdíveis!</h1>
        <h2>As melhores ofertas VOCÊ só encontra aqui!</h2>
        <p>Aproveite as melhores promoções do nosso site e garanta produtos incríveis com até 70% de desconto!<br><br>
        São ofertas por tempo limitado em diversas categorias!<br><br>
        Corra, porque os estoques são limitados e os preços vão embora rapidinho!<br>
        Confira agora e economize de verdade!</p>
        <img src="_Promoção.jpg" alt="Super Ofertas da Semana">
        <br>
        <h3>Nossa lista de promoções imperdíveis em eletrodomésticos está aqui!</h3>
        <ul>
            <li>
                <h4>Geladeira Brastemp Frost Free 375L</h4>
                Com design moderno e amplo espaço interno, esta geladeira oferece eficiência energética e praticidade para sua cozinha.<br>
                <img src="_geladeira.png" alt="Geladeira Brastemp Frost Free 375L"><br>
            </li>
            <li>
                <h4>Fogão 4 Bocas Electrolux com Acendimento Automático</h4>
                Este fogão oferece eficiência energética e praticidade para sua cozinha.<br>
                <img src="_fogão.png" alt="Fogão 4 Bocas Electrolux com Acendimento Automático"><br>
            </li>
            <li>
                <h4>Micro-ondas Panasonic 30L com função Desodorizador</h4>
                Além de aquecer e cozinhar alimentos rapidamente, este micro-ondas conta com função que elimina odores internos.<br>
                <img src="_micro-ondas.png" alt="Micro-ondas Panasonic 30L com função Desodorizador"><br>
            </li>
            <li>
                <h4>Máquina de Lavar Roupas Samsung 11kg Eco Bubble</h4>
                Com tecnologia Eco Bubble, garante limpeza profunda economizando energia e preservando os tecidos.<br>
                <img src="_máquina de lavar.png" alt="Máquina de Lavar Roupas Samsung 11kg Eco Bubble"><br>
            </li>
        </ul>
    </body>  
</html>

Olá, Laís, como vai?

Seu código está bem estruturado e demonstra um bom entendimento dos conceitos de HTML. Você utilizou corretamente as meta tags, elementos semânticos e atributos de acessibilidade nas imagens. As quebras de linha com <br> estão aplicadas de forma adequada para o contexto do exercício.

Como sugestão pontual, vale revisar o valor do atributo content da meta tag X-UA-Compatible, que está escrito como IE-edge, mas o correto seria IE=edge. Isso ajuda a manter a compatibilidade com versões mais antigas do Internet Explorer, mesmo que hoje ele esteja em desuso.

Como sugestão de evolução, você poderia considerar usar CSS para controlar os espaçamentos entre os elementos ao invés de quebras de linha (<br>). Por exemplo, poderia adicionar margens ou paddings através de classes CSS. Isso daria mais flexibilidade e manteria o HTML mais limpo. Outro ponto é considerar adicionar um elemento <main> para envolver o conteúdo principal da página.

Parabéns pelo trabalho e continue compartilhando suas práticas por aqui. O fórum está sempre à disposição.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!