Criação de índice em HTML

[AndrezeiraUNO]

Boa noite, pessoal do blog;

Tenho a um tempo tentado aprender HTML e CSS, porque:

• Eu queria um passa tempo
• Possível faculdade e trabalho
• Curiosidade

E hoje, eu tentei fazer um índice no meu site, para uma página de sites, mas ele não funciona, quem pudesse me ajudar eu agradeceria, link do código:

Andrezeira1/andrezeira1.github.io/blob/main/html/test.html

[rafa.k]

Boa noite!

Conserte o seu id=Indice para id="indice". Em seu h2 remova o # do ID. Irá ficar assim <h2 id="p1">. Dessa forma, haverá o comportamento que você espera que é de deslize da tela para o item escolhido. Além do mais, por você ter colocado pouco conteúdo em tela, é claro que não teria nenhuma ação. Mas adicionando mais itens, você verá como funciona.

<div id="indice">
    <h2>Índice</h2>
    <ul>
      <li><a href="#p1">Como irá funcionar a página?</a></li>
      <li><a href="#p2">Lorem ipsum dolor sit</a></li>
      <li><a href="#p3">Como irá funcionar a página?</a></li>
      <li><a href="#p4">Lorem ipsum dolor sit</a></li>
      <li><a href="#p5">Como irá funcionar a página?</a></li>
      <li><a href="#p6">Lorem ipsum dolor sit</a></li>
    </ul>
  </div>

  <h2 id="p1">Como irá funcionar?</h2>
  <p>A página de testes do site funcionará de forma simples: mostrarei as coisas que estou aprendendo no HTML e no CSS.
    <br> Tudo bem, tudo bem, eu sei que são coisas simples, eu sabia que iria ser simples desde quando eu comecei o desenvolvimento do site, mas mesmo assim, é divertido fazer isso, serve como um bom hobbie saudável (?).
  </p>
  <p>Vale lembrar que, também, essa página terá uma estética diferente da das outras páginas do site, normalmente, em
    verde.</p>
  <h2 id="p2">Lorem ipsum dolor sit</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, facere esse. Assumenda, iusto nostrum recusandae
    sunt saepe placeat fugiat voluptas, suscipit temporibus nihil, sint ratione porro cumque aperiam maxime
    necessitatibus.</p>
      <h2 id="p3">Como irá funcionar?</h2>
  <p>A página de testes do site funcionará de forma simples: mostrarei as coisas que estou aprendendo no HTML e no CSS.
    <br> Tudo bem, tudo bem, eu sei que são coisas simples, eu sabia que iria ser simples desde quando eu comecei o desenvolvimento do site, mas mesmo assim, é divertido fazer isso, serve como um bom hobbie saudável (?).
  </p>
  <p>Vale lembrar que, também, essa página terá uma estética diferente da das outras páginas do site, normalmente, em
    verde.</p>
  <h2 id="p4">Lorem ipsum dolor sit</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, facere esse. Assumenda, iusto nostrum recusandae
    sunt saepe placeat fugiat voluptas, suscipit temporibus nihil, sint ratione porro cumque aperiam maxime
    necessitatibus.</p>
      <h2 id="p5">Como irá funcionar?</h2>
  <p>A página de testes do site funcionará de forma simples: mostrarei as coisas que estou aprendendo no HTML e no CSS.
    <br> Tudo bem, tudo bem, eu sei que são coisas simples, eu sabia que iria ser simples desde quando eu comecei o desenvolvimento do site, mas mesmo assim, é divertido fazer isso, serve como um bom hobbie saudável (?).
  </p>
  <p>Vale lembrar que, também, essa página terá uma estética diferente da das outras páginas do site, normalmente, em
    verde.</p>
  <h2 id="p6">Lorem ipsum dolor sit</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, facere esse. Assumenda, iusto nostrum recusandae
    sunt saepe placeat fugiat voluptas, suscipit temporibus nihil, sint ratione porro cumque aperiam maxime
    necessitatibus.</p>

Ah, outra coisa: em seu CSS, você pode definir a cor da fonte no próprio body, como também um font-family de sua escolha. Houve muita repetição desnecessária. Como também você pode utilizar o seletor :is() (que por sinal, vale muito a pena aprender sobre seletores) para unificar algumas regras que você duplicou. Vou deixar abaixo um exemplo duma reformulada que dei em seu CSS:

body {
    background-color: #111111;

    font-family: "Poppins", "Ubuntu", sans-serif;
}

#header h1 {
    text-decoration: underline #33352f;
}

:is(#header h1, #header h2) {
    color: aliceblue;
    text-align: center;
}

:is(#header p, p) {
    color: aliceblue;
    font-family: "Ubuntu", "Poppins", sans-serif;
}

:is(h2, a) {
  color: aliceblue;
}

E como sugestão, para aprimorar ainda mais os seus estudos, pesquise também sobre HTML semântico. Isso é muito bom para uma melhor leitura do seu código, diferente de haver muitas div. Por mais que sejam nomeadas com IDs e classes, o seu navegador não vai fazer essa leitura como você espera. De resto, bons estudos e continue praticando!

Abraços!

[Felippe_Serpa]

Vou lá no seu github olhar. Estou aprendendo um pouco com o app Mimo, somente por curiosidade. É bem interessante. Ainda não tenho tempo pra uma facul, mas quebro galho ouvindo vídeos no YouTube, lendo aqui o fórum e acessando o Mimo. Valeu por compartilhar sua aprendizagem!

[AndrezeiraUNO]

Amigo, que comentário maravilhoso;

Dicas extremamente importantes e bem explicadas, a um tempo eu procuro por melhorar meus códigos, especificadamente na parte da semântica mesmo, amanhã irei atualizar o código, obrigada de coração pelas dicas.

[AndrezeiraUNO]

Cara, sem problemas, me chama no Discord, poderiamos aprender juntos
Andrex#9701