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?

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?

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?

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.

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.

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

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

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

) 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!

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

) 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.