1
resposta

Lista de exercícios

  1. Você acaba de receber um layout de uma página de portfólio da sua designer. O desafio é transformar esse design em uma página web funcional. Utilizando HTML, crie a estrutura básica da página. Lembre-se de incluir os elementos principais: um título principal, um subtítulo, dois botões (Instagram e Github), e um espaço para a imagem da desenvolvedora.

Eleve seu negócio digital a outro nível com um Back-End de qualidade!

Olá! Sou Viviane Matos, desenvolvedora Back-End com especialidade em JavaScritpt, C e C++. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?

Foto de Viviane Matos
  1. Agora que você entende a importância das tags semânticas no HTML, é hora de aplicar esse conhecimento. Utilize as tags header, main, e footer para estruturar sua página de portfólio. No header, insira um menu ou um logotipo. No main, adicione os elementos do portfólio como título, parágrafo, botões e imagem. Por fim, no footer, coloque informações como contato ou direitos autorais.

Eleve seu negócio digital a outro nível com um Back-End de qualidade!

Olá! Sou Viviane Matos, desenvolvedora Back-End com especialidade em JavaScritpt, C e C++. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?

Meu Portfólio - Todos os direitos Reservados - 2024
  1. Explore o uso das tags meta no cabeçalho do seu HTML. Altere a tag lang para "pt-br", ajuste o charset para "UTF-8", adicione a tag meta para compatibilidade com o Edge e outra para configuração do viewport. Por fim, mude o título da sua página para algo relacionado ao seu projeto, por exemplo, "Portfólio de [Seu Nome]".

Eleve seu negócio digital a outro nível com um Back-End de qualidade!

Olá! Sou Viviane Matos, desenvolvedora Back-End com especialidade em JavaScritpt, C e C++. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?

Meu Portfólio - Todos os direitos Reservados - 2024
  1. Agora que você já tem uma base sólida sobre a estrutura HTML, vamos adicionar e formatar elementos na sua página de portfólio. Siga o layout do Figma e comece adicionando um título (

    ) com um destaque () em uma parte dele. Em seguida, insira um parágrafo (

    ) com uma breve introdução sobre você ou sua empresa. Finalmente, adicione links () para suas redes sociais ou portfólios online, como Instagram e GitHub.

Eleve seu negócio digital a outro nível com um Back-End de qualidade!

Olá! Sou Viviane Matos, desenvolvedora Back-End com especialidade em JavaScritpt, C e C++. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?

Instagram GitHub
  • Chegou a hora de dar um toque visual à sua página! Escolha uma imagem que represente você ou seu trabalho e adicione-a à sua página de portfólio usando a tag . Lembre-se de incluir a propriedade src com o caminho para a imagem e alt com uma descrição adequada da imagem.

Eleve seu negócio digital a outro nível com um Back-End de qualidade!

Olá! Sou Viviane Matos, desenvolvedora Back-End com especialidade em JavaScritpt, C e C++. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?

Instagram GitHub Foto de Viviane Matos Meu Portfólio - Todos os direitos Reservados - 2024
1 resposta

Vamos criar a estrutura básica em HTML para sua página de portfólio seguindo as instruções fornecidas. Essa estrutura incluirá as seções principais e tags semânticas para um bom SEO e acessibilidade.

Aqui está um exemplo de como você pode estruturar sua página:

<!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>Portfólio de Viviane Matos</title>
    </head>
    <body>
            <header>
                <h1>Meu Portfólio</h1>
                <h2>Desenvolvedora Back-End Especialista em JavaScript, C e C++</h2>
        </header>
            <main>
                        <p>Olá! Sou Viviane Matos, desenvolvedora Back-End com especialidade em JavaScript, C e C++. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?</p>
                        <a href="https://www.instagram.com/viviane_matos">
                            <button>Instagram</button>
                </a>
                        <a href="https://www.github.com/viviane_matos">
                            <button>Github</button>
                </a>
                        <img src="minhafoto.png" alt="Viviane Matos sorrindo">
        </main>
            <footer>
                <p>Meu Portfólio - Todos os Direitos Reservados - 2024</p>
        </footer>
    </body>
</html>

Esta estrutura de HTML proporciona uma página web clara e funcional baseada no layout proposto. Lembre-se de substituir os links dos botões com os seus URLs reais e ajustar o caminho da imagem conforme necessário. As tags semânticas header, main, e footer ajudam na organização e acessibilidade da sua página.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software