Projeto Final | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2ºPortfolio de Estanislau Jr</title>
        <link rel ="stylesheet" href = "style.css">
    </head>
    <body>
        <img src="Html, Css.jpg" alt="Html, Css">
        <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 Estanislau Jr , desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo a pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <a href="https://www.instagran.com/@estanislau.51"<button>Instagram</button></a>
            <a href="https://github.com/EASJúnior751"<button></button></a>
            <img src="Html, Css.jpg" alt="Html, Css">
        </main>
    </body>
    </html>

Oi Estanislau,

Seu projeto está bem encaminhado! 👍

Notei alguns pontos que podem ser aprimorados no seu HTML:

Imagens duplicadas: Você incluiu a mesma imagem duas vezes, o que pode não ser o comportamento desejado. Verifique se você realmente precisa de ambas ou se uma delas pode ser removida.
Tags button dentro de a: A tag <button> dentro da tag <a> não é a forma mais adequada. O correto seria usar a tag <a> para criar o link e estilizar como um botão com CSS. 💻
Botão sem texto: Um dos seus botões está sem texto, o que o torna invisível para o usuário. Adicione um texto descritivo para que o usuário saiba qual ação ele realiza.
header vazio: A tag <header> está vazia. Se você não tem conteúdo para ela no momento, pode removê-la ou adicionar algo relevante, como um menu de navegação.
Atributo lang: O atributo lang="en" indica que o conteúdo está em inglês. Se o seu conteúdo estiver em português, altere para lang="pt-BR". 🇧🇷

Exemplo de botão com CSS:

HTML

<a href="https://www.instagran.com/@estanislau.51" class="botao">Instagram</a>

.botao {
    display: inline-block; /* Faz o link se comportar como um bloco, permitindo ajustar largura e altura */
    padding: 10px 20px; /* Espaçamento interno */
    background-color: #007BFF; /* Cor de fundo */
    color: white; /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 5px; /* Bordas arredondadas */
    font-family: Arial, sans-serif; /* Fonte do texto */
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento do texto */
    border: none; /* Remove a borda padrão */
    cursor: pointer; /* Muda o cursor para um ponteiro ao passar o mouse */
    transition: background-color 0.3s ease; /* Transição suave para a cor de fundo */
}

.botao:hover {
    background-color: #0056b3; /* Muda a cor de fundo ao passar o mouse */
}

.botao:active {
    background-color: #004080; /* Muda a cor de fundo ao clicar */
}

Para saber mais: Documentação da tag <a> no MDN - Aprenda mais sobre como usar a tag <a> corretamente.

Continue praticando e explorando as possibilidades do HTML e CSS! 💪