Página de documentação técnica - Criar uma página de documentação técnica

Português HTML-CSS
1

Conte-nos o que está acontecendo:

Olá, prezados, não estou conseguindo concluir o disafio devido a um bug no requisito para aprovação a seguir:
Cada .main-section deve ter um id que corresponda ao texto de seu primeiro filho, e todos os espaços no texto do filho devem ser substituídos por sublinhados (_) no id.
Já verifiquei meu código e todos estão com esse sobilinhado como deveria estár mas não passa. Podem me ajudar?

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Documentação Tecnica</title>
  </head>
  <body>

    <!-- Barra de Navegação -->
    <nav id="navbar">
      <header>Documentação técnica</header>
      <ul>
      <li><a class="nav-link" href="#Introducao">Introdução</a></li>
      <li><a class="nav-link" href="#Fundamentos_do_CSS">Fundamentos do CSS</a></li>
      <li><a class="nav-link" href="#Flexbox">Flexbox</a></li>
      <li><a class="nav-link" href="#Grid">Grid</a></li>
      <li><a class="nav-link" href="#Medias_Queries">Medias Queries</a></li>
      </ul>
    </nav>

<!-- Conteúdo Principal -->
    <main id="main-doc">

<!-- Seção 1 -->
      <section class="main-section" id="Introducao">
        <header>Introdução</header>
        <p>CSS é a linguagem utilizada para estilizar páginas da web.</p>
        <p>Ela permite controlar a aparência dos elementos HTML.</p>
        <code>body { background-color: lightgray; }</code>
      </section>

<!-- Seção 2 -->
      <section class="main-section" id="Fundamentos_do_CSS">>
        <header>Fundamentos do CSS</header>
        <p>CSS usa seletores para aplicar estilos aos elementos HTML.</p>
        <ul>
          <li>Classes são definidas com um ponto: '.classe'</li>
          <li>IDs são definidos com uma hashtag: '#id'</li>
          <li>Pseudo-classes como ':hover' adicionam efeitos interativos.</li>
          <li>Seletores de Pseudoclasse: Selecionam elementos com base em seu estado ou posição, como :hover, :first-child, :active. </li>
          <li>Seletores de Pseudoelemento: Selecionam partes específicas de um elemento, como :first-letter, :before, :after. </li>
        </ul>
        <h3>Importância</h3>
        <p>O uso correto dos seletores CSS é fundamental para criar sites com estilos consistentes e eficientes, permitindo que os desenvolvedores web controlem com precisão a aparência de seus projetos.</p>
        <code>p { color: blue; }</code>
      </section>

<!-- Seção 3 -->
      <section class="main-section" id="Flexbox">
        <header>Flexbox</header>
        <p>Flexbox é um método de layout unidimensional.</p>
        <p>Ele facilita o alinhamento e distribuição dos elementos.</p>
        <code>display: flex;</code>
      </section>

<!-- Seção 4 -->
      <section class="main-section" id="Grid">
        <header>Grid</header>
        <p>CSS Grid é um sistema de layout bidimensional.</p>
        <p>Ele permite organizar elementos em colunas e linhas.</p>
        <code>display: grid;</code>
      </section>

<!-- Seção 5 -->
      <section class="main-section" id="Medias_Queries">
        <header>Medias Queries</header>
        <p>As Media Queries permitem criar layouts responsivos.</p>
        <p>Elas funcionam através de expressões que testam características da mídia, como largura e altura da tela, e aplicam estilos específicos quando essas condições são atendidas. </P>
        <code>>@media (max-width: 768px) {}</code>
      </section>

    </main>
  </body>

</html>


/* file: styles.css */
/* Reset de Estilos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  font-family: Arial. sans-serif;
}

/* Estilizando o Navbar*/
#navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  color: #4B0082;
  padding: 20px;
}

#navbar header {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

#navbar ul {
  list-style: none;
}

#navbar ul li {
  margin-bottom: 10px;
}

#navbar ul li a {
  text-decoration: none;
  display: block;
  padding: 5px;
  color: #8A2BE2;
}

#navbar ul li a:hover {
  background: #8A2BE2;
  color: #F0F8FF;
}

/*Estilizando o Conteúdo Principal */
#main-doc {
  margin-left: 270px;
  padding: 20px;
  max-width: 800px;
}

.main-section {
  margin-bottom: 40px;
  color: #483D8B
}

.main-section header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

#Fundamentos_do_CSS li {
    font-style: italic;
    text-align: justify;
}

p {
  margin-bottom: 10px;
  text-align: justify;
}

code {
  display: block;
  background: #f4f4f4;
  padding: 10px;
  border-left: 4px solid #483D8B;
  margin: 10px 0;
}

code:hover {
  background: #483D8B;
  color: #f4f4f4;
  border-left: 4px solid #7B68EE	;
}

/* Media Query para telas menores */
@media (max-width: 768px) {
  #navbar {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
  }

  #main-doc {
    margin-left: 0;
    padding: 10px;
  }
}

Informações do seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Informações do desafio:

Página de documentação técnica - Criar uma página de documentação técnica

2

Hi. Welcome to the community.

You have a syntax error here:

do_CSS">>

Your id and Headings do not match here:

id="Introducao">
        <header>Introdução</header>

Just change the heading to “Intro” for ease or put the correct lettering in. You need to change the nav-links at the start as well if you change the words.

<li><a class="nav-link" href="#Introducao">Introdução</a></li>