[Dúvida] Estou tendo problemas com o rodapé da pagina | Front-end

Eu ainda estou tendo problemas com o rodapé.Pode ser apenas um erro de iniciante porém não consigo solucionar sozinha. O rodapé antes ficava alinhado com a imagem principal da tela,ele ficava de lado e não importava o que eu fizesse continuavam lá. A única forma de tirar ele dessa posição é quando coloco em fixado,porém não é isso que quero. Quero que ele apareça apenas quando dá scroll na página. Irei copiar meu código aqui!

  <!DOCTYPE html>
  <html lang="eng">
  <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</title>
                          <link rel="stylesheet" href="styles.css"
                          </head>
                          <body>
<header class="Cabecalho"> 
  <nav class="Cabecalho__menu">
    <a class="Cabecalho__menu__link">Home</a>
            <a class="Cabecalho__menu__link">Sobre mim</a>
                  </nav>
</header>
 <main class="apresentaçao">
    <section class="apresentaçao__conteudo">
             <h1 class="apresentaçao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong class="título-destaque"> com um Front-end de qualidade!</strong></h1>
      <p class="apresentaçao__conteudo__paragrafo">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade <strong class="paragrafo-destaque"> React, HTML e CSS</strong>.Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
      <div class="apresentaçao__links">
        <h2 class="apresentaçao__links__subtitulo">Acesse minhas redes:</h2>
      <a class="apresentaçao__links__link"href="https:\\www.github.com">
        <img src="assets/github.png">
                    GitHub
                              </a>
                                          <a class="apresentaçao__links__link" href="https:\\instagram.com">
                                                        <img src="assets/instagram.png">
          instagram
        </a>
      </div>
    </section>
          <img src="assets/HTML5_logo_and_wordmark.svg.png" width="400" heigth="450"alt="imagem do simbolo html"
  </main>
<footer class="rodape"
  <p>Desenvolvido por mim</p>
</footer>

{CSS (obs:ele está no final da página)}

.rodape{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
        }

Oi Ruth, tudo bem?

Primeiro quero dizer que não tem problema nenhum que sejam erros iniciantes, estamos aqui pra ajudar em seu aprendizado, então pode ficar tranquila pra compartilhar suas dúvidas, ok?

Indo para seu código, percebi que tem algumas alterações que precisam ser feitas no HTML, pois acabou faltando alguns detalhes:

A tag <html> não foi fechada;
A tag <link> não foi fechada;
A tag <a> do link do github não possui um espaço entre o atributohrefe o valor;
A tag <img> da imagem do simbolo html não foi fechada;
O atributo heigth na tag <img> está escrito incorretamente: deveria ser height;
A tag <footer> não foi fechada;
A tag <body> não foi fechada;

Corrigindo esses detalhes, seu HTML deve ficar assim:

<!DOCTYPE html>
<html lang="en">
  <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</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="Cabecalho"> 
      <nav class="Cabecalho__menu">
        <a class="Cabecalho__menu__link">Home</a>
        <a class="Cabecalho__menu__link">Sobre mim</a>
      </nav>
    </header>
    <main class="apresentaçao">
      <section class="apresentaçao__conteudo">
        <h1 class="apresentaçao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong class="título-destaque"> com um Front-end de qualidade!</strong></h1>
        <p class="apresentaçao__conteudo__paragrafo">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade <strong class="paragrafo-destaque"> React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <div class="apresentaçao__links">
          <h2 class="apresentaçao__links__subtitulo">Acesse minhas redes:</h2>
          <a class="apresentaçao__links__link" href="https://www.github.com">
            <img src="assets/github.png">
            GitHub
          </a>
          <a class="apresentaçao__links__link" href="https://instagram.com">
            <img src="assets/instagram.png">
            instagram
          </a>
        </div>
      </section>
      <img src="assets/HTML5_logo_and_wordmark.svg.png" width="400" height="450" alt="imagem do simbolo html">
    </main>
    <footer class="rodape">
      <p>Desenvolvido por mim</p>
    </footer>
  </body>
</html>

Em seguida, pelo que entendi, você quer que o rodapé apareça apenas quando a página é rolada. Se for isso mesmo, você pode utilizar a propriedade "position: sticky" em vez de"position: fixed". Isso fará com que o rodapé fique fixo na parte inferior da tela apenas quando a página é rolada. Para aplicar essa mudança em seu código, basta alterar a classe ".rodape" no seu arquivo CSS para:

.rodape {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
}

Dessa forma, o rodapé ficará fixo na parte inferior da tela apenas quando a página é rolada. Lembrando que isso só vai acontecer quando houver conteúdo suficiente na tela para fazer o “scroll”. Caso não tenha, ele vai ficar posicionado logo abaixo do final do <main> mesmo.

Espero que essas dicas tenham sido úteis. Se tiver outra dúvida ou quiser posicionar o rodapé de uma maneira diferente, eu me coloco à disposição para ajudar!

Até mais e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!