[Projeto] Aqui está meu projeto | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Portfólio do Marcelo Henrique  </title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel='stylesheet' href="style.css">
    </head>
    <body>
        <header> Design gráfico e desenvolvedor </header>
        <main></main>
        <footer>Contato:marcelo********@gmail.com</footer>
        <footer>Número de telefone:(67) 9******</footer>
        <h1>Eleve seu negócio digital a outro nível <strong> um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Marcelo Henrique, desenvolvedor de <span>Front-end</span> com especialidade em <strong>React, HTML e CSS.</strong> Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        
        <button><a href="https://instagram.com/marcelo_henrique_s_c/">Instagram</a></button>
        <button><a href="https://github.com/BySleepingOwl">Github</a></button>
        <img src="Foto Minha.jpg" alt="Foto de Perfil">
    </body> 
</html>

body {
    background-color:rgb(32, 31, 31);
    color: white;
text-align: center;}


     strong {
        color:aqua;}

        a {
            margin: 0 30px;
            color: white;
            text-decoration: none;
        }

        button {
            padding: 4px;
            background-color: rgb(13, 45, 190);
            border-radius:10%;
        }
                header {
                    background-color: rgb(13, 45, 190);
                    color: white;
             display: flex;
            font-size: 25px;
            justify-content: center;}

            img img {
                border-radius: 12px;}

                span{
                    color: #22D4FD;
                    border: 1px solid #22D4FD;
                    padding: 10px; }

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá Marcelo!

Seu projeto está ficando muito bom! Vou te dar algumas dicas para melhorar ainda mais:

Organização do HTML:
- É uma boa prática manter o HTML organizado e sem elementos repetidos. Por exemplo, você tem dois elementos <footer>. É melhor consolidá-los em um único footer.
Links dentro de botões:
- Colocar links dentro de botões não é uma prática recomendada. Você pode estilizar os links diretamente para que pareçam botões.
CSS:
- No seu CSS, você tem uma regra img img { ... }, que não está correta. O correto seria apenas img { ... }.

Aqui estão algumas sugestões de melhorias no seu código:

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Portfólio do Marcelo Henrique</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>Design gráfico e desenvolvedor</header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong>um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Marcelo Henrique, desenvolvedor de <span>Front-end</span> com especialidade em <strong>React, HTML e CSS.</strong> Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <div class="buttons">
            <a href="https://instagram.com/marcelo_henrique_s_c/" class="button">Instagram</a>
            <a href="https://github.com/BySleepingOwl" class="button">Github</a>
        </div>
        <img src="Foto Minha.jpg" alt="Foto de Perfil">
    </main>
    <footer>
        <p>Contato: marcelo********@gmail.com</p>
        <p>Número de telefone: (67) 9******</p>
    </footer>
</body>
</html>

CSS

body {
    background-color: rgb(32, 31, 31);
    color: white;
    text-align: center;
}

strong {
    color: aqua;
}

a {
    margin: 0 30px;
    color: white;
    text-decoration: none;
}

.button {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgb(13, 45, 190);
    border-radius: 10%;
    color: white;
    text-decoration: none;
}

header {
    background-color: rgb(13, 45, 190);
    color: white;
    display: flex;
    font-size: 25px;
    justify-content: center;
}

img {
    border-radius: 12px;
}

span {
    color: #22D4FD;
    border: 1px solid #22D4FD;
    padding: 10px;
}

Observações:

Footer: Consolidar as informações de contato em um único footer.
Botões: Estilizar os links como botões usando a classe .button.
Correção de CSS: Corrigir a regra incorreta img img.

Espero ter ajudado e bons estudos!