Technical Documentation Page - Build a Technical Documentation Page

Getting an error of:

Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores ( _ ) for the id’s.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Document</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <nav id="navbar">
        <header>
          <h1>Sci Fi Death Metal</h1>
        </header>
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
          <li><a class="nav-link" href="#Science_Fiction">Science Fiction</a></li>
          <li><a class="nav-link" href="#Death_Metal">Death Metal</a></li>
          <li><a class="nav-link" href="#Sci_Fi_Death_Metal_Bands">Sci Fi Death Metal Bands</a></li>
        </ul>
      </nav>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>
          <h1>Introduction</h1>
        </header>
          <p>Science Fiction Death Metal or Sci Fi Death Metal, to be short, is a subgenre of a heavy metal subenre.</p>
          <p>SFDM contains combining science fiction and death metal, and has been popular since the beginning of the death metal craze.
            <ul>
              <li>SFDM is a world wide phenomena that still continues to grow in numbers.</li>
              <li>Started in 1990 with the band Nocturnus</li>
              <li>It has gained popularity in recent years.</li>
              <li>For all walks of life.</li>
              <li>Inspires people to learn about science related subjects as well as fiction.</li>
            </ul>
          </p>
      </section>
      <section class="main-section" id="What_you_should_already_know">
        <header>
          <h1>What you should already know</h1>
        </header>
          <p>This guide assumes you have the following basic background:
            <ul>
              <li>A general understanding of the science fiction and death metal. </li>
            </ul>
          </p>
      </section>
      <section class="main-section" id="Science_Fiction">
        <header>
          <h1>Science Fiction</h1>
        </header>
          <p>Science Fiction is fiction based on imagined future scientific or technological advances and major social or environmental changes, frequently portraying space or time travel and life on other planets.</p>
          <p>Unlimited amount of creative ideas when it comes to science fiction,</p>
      </section>
      <section class="main-section" id="Death_Metal">
        <header>
          <h1>Death Metal</h1>
        </header>
          <p>Death Metal is a subgenre of heavy metal music using lyrics preoccupied with death, suffering, destruction, and other dark subjects.</p>
          <br><p>
            Techniques include:
            <br></p>
            <div class="Code">
              <code>
                Down tuned guiars, gutteral vocals, double bass drums, and blast beats.
              </code>
            </div>
          </p>
          <br>
          <p>These techniques above, are what define the 
            Death Metal genre. The techniques listed below are incorporated as well, to create a sci fi theme.</p>
            <br>
            <div class="Code">
              <code>
                Odd time signatures, reverb, and delay.
              </code>
              
            <p><div class="Code">
              <code>
              Cosmic riffs ,leads, sci fi related lyrics, and obscurity.
              </code> 
            </div>
          </p>
      </section>
     <br>
     <br>
     
      <section class="main-section" id="Sci_Fi_Death_Metal_Bands">
        <header>
          <h1>Sci Fi Death Metal Bands</h1>
        </header>
        <p>There are bands like Nocturnus whom are coined to be the first sci fi death metal band, Death had a song called Cosmic Sea. There are bands from all over the world who were pioneers, such as Timeghoul, Mithras, Hypocripsy, Decrepit Birth, Demilich, and Wormed. </p>
        <p>There are modern Sci Fi Death Metal bands that are currently making cosmic music for cosmic people like the band Blood Incantation. As well as other acts like Artificial Brain, Ulthar, Tomb Mold, Astriferous, Dark Matter Secret, Nucleus, Perilaxe Occulation, and many others.
          <div class="Code">
            <code>
              1990 - Beginning of Sci Fi Death Metal Era to current times.
            </code>
          </div>
        </p>
        <p>
          Sci Fi Death Metal modernizes throughout the beginning of death metal, but the subgenre takes a leap in 2010 and into our current times. <br>
          <div class="Code">
            <code>
              Modern sci fi death metal bands: Artificial Brain, Blood Incantation, Nucleus, etc.
            </code>
          </div>
        </p>
      </section>
    </main>
  </body>
</html>
     
@media (prefers-reduced-motion: no-preference) {
    * {
      scroll-behavior: smooth;
    }
  }
  
  body{
    background-color: #fffff0;
    font-family: Times New Roman;
    margin: 0;
  }
  
  #navbar{
    position: fixed;
    text-align: center;
    display: block;
    border-right: 1.5px black solid;
    width: 25%;
    height: 100%;
    padding: 20px 30px;
    overflow: hidden;
    float: left;
  }

  nav header h1{
    font-weight: 500;
    margin: 1.5em 1em; 
    font-size: 30px;
  }

  a, nav ul li{
    text-decoration: none;
    list-style: none;
    color: inherit;
    text-align: left;
    font-size: 20px;
    margin: 2em 0em;
  }

  nav > ul > li:hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
  }

  main{
    position: absolute;
    left: 35%;
    padding: 0.5em;
    overflow: hidden;
  }

  section p, section li{
    margin-left: 1.5em 
  }

  .Code{
    margin: 1em 2em;
    background-color: #e2dccd;
    padding: 10px;
    height: 1.5em;
    font-size: 1em;
  }

  .main-section{
    margin-bottom: 2.5em;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Here's the modified version of your HTML code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Technical Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav id="navbar">
    <header>
      <h1>Sci Fi Death Metal</h1>
    </header>
    <ul>
      <li><a class="nav-link" href="#Introduction">Introduction</a></li>
      <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
      <li><a class="nav-link" href="#Science_Fiction">Science Fiction</a></li>
      <li><a class="nav-link" href="#Death_Metal">Death Metal</a></li>
      <li><a class="nav-link" href="#Sci_Fi_Death_Metal_Bands">Sci Fi Death Metal Bands</a></li>
    </ul>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header>
        <h1>Introduction</h1>
      </header>
      <p>Science Fiction Death Metal or Sci Fi Death Metal, to be short, is a subgenre of a heavy metal subgenre.</p>
      <p>SFDM combines science fiction and death metal, and has been popular since the beginning of the death metal craze.</p>
      <ul>
        <li>SFDM is a worldwide phenomenon that continues to grow.</li>
        <li>Started in 1990 with the band Nocturnus.</li>
        <li>It has gained popularity in recent years.</li>
        <li>Appeals to people from all walks of life.</li>
        <li>Inspires people to learn about science-related subjects as well as fiction.</li>
      </ul>
    </section>
    <section class="main-section" id="What_you_should_already_know">
      <header>
        <h1>What you should already know</h1>
      </header>
      <p>This guide assumes you have a general understanding of science fiction and death metal.</p>
    </section>
    <section class="main-section" id="Science_Fiction">
      <header>
        <h1>Science Fiction</h1>
      </header>
      <p>Science Fiction is fiction based on imagined future scientific or technological advances and major social or environmental changes, frequently portraying space or time travel and life on other planets.</p>
      <p>There is an unlimited amount of creative ideas when it comes to science fiction.</p>
    </section>
    <section class="main-section" id="Death_Metal">
      <header>
        <h1>Death Metal</h1>
      </header>
      <p>Death Metal is a subgenre of heavy metal music using lyrics preoccupied with death, suffering, destruction, and other dark subjects.</p>
      <p>Techniques include:</p>
      <ul>
        <li>Down-tuned guitars</li>
        <li>Guttural vocals</li>
        <li>Double bass drums</li>
        <li>Blast beats</li>
      </ul>
      <p>These techniques define the Death Metal genre. Additionally, techniques such as odd time signatures, reverb, delay, cosmic riffs, leads, sci-fi related lyrics, and obscurity are incorporated to create a sci-fi theme.</p>
    </section>
    <section class="main-section" id="Sci_Fi_Death_Metal_Bands">
      <header>
        <h1>Sci Fi Death Metal Bands</h1>
      </header>
      <p>There are bands like Nocturnus who are considered the pioneers of sci-fi death metal. Other notable bands include Death, Timeghoul, Mithras, Hypocrisy, Decrepit Birth, Demilich, and Wormed.</p>
      <p>Modern bands like Blood Incantation, Artificial Brain, Ulthar, Tomb Mold, Astriferous, Dark Matter Secret, Nucleus, and Perilaxe Occulation continue to contribute to the genre.</p>
      <p>The era of sci-fi death metal began in 1990 and continues to evolve, with modern bands pushing the boundaries of the genre.</p>
    </section>
  </main>
</body>
</html>

I’ve made the necessary adjustments.

must have five code elements as well in the .main-section… I’m just stuck on the id’s with underscores instead of spaces with the first child of each id and I’ve checked them all but it doesn’t let me pass…

@electricburgerland tell me exact error , that’s appearing in test console…

I put your code in the editor and it passes all the tests. Make sure you don’t have a browser extension that is interfering

That is very strange, I don’t have any browser extensions on my safari web browser. When I just tried to run the original code posted above again, I continue to get that error message of,

// running tests Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores ( _ ) for the id’s.

I am completely stumped… the id’s match as they should…

the text of its first child

I think you might need to eliminate the h1 inside each main-section header. The header is the first child.

1 Like

Thank you very much! That was it! So stoked!

1 Like