Responsive Web Design Projects - Build a Technical Documentation Page

HTML-CSS
1

I’ve hit a bit of a snag on the technical documentation project for the responsive web design cert. All of my user story requirements besides the one below are met.
Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header “JavaScript and Java” should have a corresponding id="JavaScript_and_Java" )
As far as I can tell the sections with a class of main-section all have id’s that correspond to their first child element, the header. I’ve been going over my code for two hours trying to find some mistake but can’t come up with anything. Also, I know my project isn’t near finished; I just wanted to check off all the user story requirements before I started filling in my information and styling. Any help with this problem (that is driving me bananas) would be greatly appreciated!

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title>The Cosmere</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>   
    <nav id="navbar">
      <header>The Cosmere</header>
      <a class="nav-link" href="#roshar">Roshar</a>
      <a class="nav-link" href="#scadrial">Scadrial</a>
      <a class="nav-link" href="#sel">Sel</a>
      <a class="nav-link" href="#nalthis">Nalthis</a>
      <a class="nav-link" href="#other_planets">Other Planets</a>
    </nav>
  <main id="main-doc">
    <section id="roshar" class="main-section">
      <header>roshar</header>
      <p></p>
      <p></p>
    </section>
    <section id="scadrial" class="main-section">
      <header>scadrial</header>
      <p></p>
      <p></p>
    </section>
    <section id="sel" class="main-section">
      <header>sel</header>
      <p></p>
      <p></p>
    </section>
    <section id="nalthis" class="main-section">
      <header>nalthis</header>
      <p></p>
      <p></p>
    </section>
    <section id="other_planets" class="main-section">
      <header>other planets</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
    </section>
  </main>
</body>
</html>

/* file: styles.css */
body {
background-color: rgba(0, 0, 255,0.2)
}
.main-section {
text-transform: capitalize;
}
@media (max-width: 200px) {
#main-doc {
  background-color: red;
}
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Technical Documentation Page

Link to the challenge:

2

Hmm, I’m not getting that error when I test your HTML and CSS. In fact, it passes for me, I get no errors. Maybe try in a different browser?

3

That did it. It just wasn’t working on Chrome for some reason. Thank you so much!

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.