[Projeto] Lista de exercícios | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Construindo a estrutura HTML do portfólio

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Meu Portifólio</title>
</head>
<body>
    <h1>Meu Portifólio</h1>
    <h2>Seja muito bem-vindo ao Meu Portifólio</h2>
    <a href="https://www.instagram.com/kel.emanoel_/">Instagram</a>
    <a href="https://github.com/kelvynemanoel">Github</a>
    <img src="minha-foto.jpg" alt="Minha foto">
</body>
</html>

Estruturando a página com tags semânticas

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Meu Portifólio</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Meu Portifólio</h1>
        <h2>Seja muito bem-vindo ao Meu Portifólio</h2>
        <a href="https://www.instagram.com/kel.emanoel_/">Instagram</a>
        <a href="https://github.com/kelvynemanoel">Github</a>
        <img src="minha-foto.jpg" alt="Self de Kelvyn">
    </main>
    <footer>
        <p>Telefone: 99 99999-9999</p>
        <p>© Copyrigths - Protegido por direitos autorais</p>
    </footer>
    <img src="minha-foto.jpg" alt="Minha foto">
</body>
</html>

Entendendo e aplicando as tags meta

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Portifólio</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Meu Portifólio</h1>
        <h2>Seja muito bem-vindo ao Meu Portifólio</h2>
        <a href="https://www.instagram.com/kel.emanoel_/">Instagram</a>
        <a href="https://github.com/kelvynemanoel">Github</a>
        <img src="minha-foto.jpg" alt="Self de Kelvyn">
    </main>
    <footer>
        <p>Telefone: 99 99999-9999</p>
        <p>© Copyrigths - Protegido por direitos autorais</p>
    </footer>
</body>
</html>

Inserindo e formatando elementos no HTML

<!DOCTYPE html>
<html lang="br-pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Portifólio</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Kelvyn Emanoel, desenvolvedor Front-end com especialidade em HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <a href="https://www.instagram.com/kel.emanoel_/">Instagram</a>
        <a href="https://github.com/kelvynemanoel">Github</a>
        <img src="minha-foto.jpg" alt="Self de Kelvyn">
    </main>
    <footer>
        <p>Telefone: 99 99999-9999</p>
        <p>© Copyrigths - Protegido por direitos autorais</p>
    </footer>
</body>
</html>

Incorporando imagens com tags HTML

<!DOCTYPE html>
<html lang="br-pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Portifólio</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Kelvyn Emanoel, desenvolvedor Front-end com especialidade em HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <a href="https://www.instagram.com/kel.emanoel_/">Instagram</a>
        <a href="https://github.com/kelvynemanoel">Github</a>
        <img src="minha-foto.jpg" alt="Self de Kelvyn em um local movimentado">
    </main>
    <footer>
        <p>Telefone: 99 99999-9999</p>
        <p>© Copyrigths - Protegido por direitos autorais</p>
    </footer>
</body>
</html>

Olá, Kelvyn, como vai?

Você fez um ótimo trabalho estruturando o seu portfólio e aplicando as tags semânticas. A utilização das tags <header>, <main> e <footer> está adequada para organizar o conteúdo de forma lógica. Além disso, a aplicação das tags meta, como charset e viewport, ajuda bastante na acessibilidade e no comportamento da página em dispositivos móveis.

Uma sugestão de melhoria: na linha <html lang="br-pt">, o valor correto para o idioma seria lang="pt-BR". Isso ajuda a garantir que os navegadores reconheçam corretamente o conteúdo em português do Brasil.

Continue compartilhando seu progresso, o fórum está à disposição para ajudar.

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