Technical Documentation Page, User Story 4

HTML-CSS
1

Ayo, User Story 4 of technical documentation page is suddenly failing. It was fine before and if I try to add a navbar anywhere I start failing having a header as the first element. User Story 4 is " Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText. (e.g. The that contains the header, “JavaScript & Java”, should have a corresponding id=“JavaScript_&_Jav”

Here is my Codepen: https://codepen.io/Adham380/pen/JjNmvJP
and below, the code…

<!-- 

Hello Camper!

Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->

<head>
  <title>The Personal Computer</title>
</head>
<main id="main-doc">

  <body>
    <nav id="navbar">
      <section class="main-section" id="What_is_a_PC?">
        <header>
          <h1>What is a PC?</h1>
        </header>
        <p>
          A PC is a <code>Personal Computer</code>, which people use to compute stuff.
        </p>If you need to <code>calculate</code> something or <code>google</code> why cats hate cucumbers,<br> a PC is your friend.
        <p>
          It takes a text or button command which the OS interprets as <code>code</code><br> and then translates into something, the hardware of the PC<br>can actually understand, aka <code>binary</code>, aka ones and zeros.
        </p>
        <p>
          You can test it with this text <a href="https://www.rapidtables.com/convert/number/ascii-to-binary.html">here</a>.
        </p>
      </section>
        </nav>
    <section class="main-section" id="What_is_it_made_out_of?">
      <header>
        <h2>
          What is it made out of?
        </h2>
      </header>
      <p>
        Besides the <code>code</code>, it is made up of the previously<br>mentioned hardware, which actually does<br>all the work. <br>The CPU is the processing unit, which you can think of as a logical brain.<br>sends linear data. Even your old 2GHz CPUs, execute 2 billion (2GHz), cycles, per second, per core!<br>
        You can now maybe start to imagine just how fast a Gaming PC<br>with 6-12 cores at up to over 5GHz is.
      <p>Keep in mind though, that the architecture of a CPU is still very important. An old 4GHz CPU from 5 years ago<br>, will usually lose against a modern 3GHz one. The architecture is an entire topic that I could not possibly cover within this documentation page.
      </p>
      </p>
    </section>

    <section class="main-section" id="What_is_the_difference_between_a_Gaming_PC_and_a_regular_PC?">
      <header>
        <h3>What is the difference between a Gaming PC and a regular PC?</h3>
      </header>
      <p>
      </p>
    </section>

    <section class="main-section" id="  Components_of_a_regular_consumer_PC">
      <header>
        <h4>Components of a regular consumer PC</h4>
      </header>
      <p>
      <ul>
        <li>CPU</li>
        <li>Motherboard</li>
        <li>RAM</li>
        <li>A storage drive</li>
        <li>Power Supply</li>
        <li>Case/Tower</li>
        <li>CPU Cooler</li>
        <li>If the CPU doesn't have a built in GPU, a discrete GPU</li>
      </ul>
      </p>
    </section>

    <section class="main-section" id="Finding_out_which_components_are_right_for_you">
      <header>
        <h5>Finding out which components are right for you</h5>
      </header>
      <p>
      </p>
    </section>

    <section class="main-section" id="Have_Fun!">
      <header>
        <h6>Have Fun!</h6>
      </header>
      <p>
      </p>
    </section>
  </body>
</main>
2

Hello,
it is better if you edit you thread. It is difficult to identify the issue with this format. Put the code or snippet of the project here. It is right next to quotation mark.

5

@adham380, it looks as though you’ve resolved your original issue as all tests seem to be passing.

If I may make a suggestion, run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address.

6

Thx for the heads up. I adressed everything except for button cannot be a descendent of an a element and a can’t be a child of ul, because if I change anything about that, only the first and last button work. Also, some of this stuff was never taught in any of the previous courses. I know the courses are quite constrained but I feel like it should be incorporated in there and at least checked… I mean, I would never have known if you hadn’t told me, since the website does work and pass all the tests.

7

These should be addressed. You want to write code that is syntactically correct.

  1. A link is focusable and can be triggered by the enter key. A link will redirect you to a new page or a section within the same page.
    A button is focusable, too, and can be triggered by the space key. A button will trigger an action like opening or closing something. Or sending a form.
    Your navbar should not have buttons for the links
  2. a cannot be a child of ul because the only child of ul is li. However, a can be a child of li. You just have to make a small coding change to pass.

No course can teach everything. Students are expected to do some research when working on the projects. Each project you do will require research, planning, trial and error, and strengthening your skills beyond what you gained from the incremental challenges.
For instance in the survey form project one of the user stories was to select an option from a dropdown. This was not taught in the lessons. You had to do research in order to complete the story successfully.

When you’ve completed any of the projects you have the option of asking for a review on the Code Feedback subforum. Professional devs on a team have their code peer reviewed prior to being put into production to ensure something hasn’t been missed or to see if there’s a cleaner way of writing the code.

8

fixed, it wasn’t really a simple change, because a can’t be a descendant of a button nor the other way around, so I had to make due with anchor tags that are styled like buttons. Thanks for the heads up. I fixed everything. Not a single error or warning.

9

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