Technical Documentation Page - User story 12 is failing and I can't tell why

Tell us what’s happening:
User story 12 is failing, I have checked the HTML each and every way and can’t find the reason. also, the HTML has been checked by the IDE and it is passing it. Please help :slight_smile:

Your code so far

      <a>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></a>
<h1>Technical documentation</h1>
<main id="main-doc">
  <nav id="navbar">
    <header>A Talk about web browsers </header>
    <ul> 
          
        <li> <a class="nav-link" href="#What_is_up_with_Microsoft_Edge?">What is up with Microsoft Edge?</a></li>
        <li> <a class="nav-link" href="#What_is_up_with_the_first_browser_ever?">What is up with the first browser ever?</a> </li>
        <li> <a class="nav-link" href="#What_is_up_with_Opera?">What is up with Opera?              </a> </li>
        <li> <a class="nav-link" href="#What_is_up_with_Mozilla?">What is up with Mozilla</a></li>
        <li> <a class="nav-link" href="#What_is_up_with_Chrome?">Chrome</a> </li>
        <li> <a class="nav-link" href="#What_is_up_with_firefox?">What is up with firefox?</a> </li>
      </ul>
  </nav>
  <div id="technical-doc-writing">
    <section class="main-section" id="What_is_up_with_Microsoft_Edge?">
      <header>What is up with Microsoft Edge?</header>
      <p>Microsoft Edge comes with Microsoft <code>Defender SmartScreen</code> built-in. We protect you against phishing or malware websites, and from downloading potentially malicious files. Microsoft Defender SmartScreen is turned on by default in Microsoft Edge. </p>
    </section>
    <section class="main-section" id="What_is_up_with_the_first_browser_ever?">
             
          <header>What is up with the first browser ever?</header>
      <p>The first web browser, WorldWideWeb, was developed in 1990 by Tim Berners-Lee for the NeXT Computer (at the same time as the first web server for the same machine) and introduced to his colleagues at CERN in March 1991. </p>
      <p> A web browser (commonly referred to as a browser) is a software application for accessing information on the World Wide Web. When a user requests a particular website, the web browser retrieves the necessary content from a web server and then displays the resulting web page on the user's device.</p>

<p>A web browser is not the same thing as a search engine, though the two are often confused.[1][2] For a user, a search engine is just a website, such as Google Search, Bing, or DuckDuckGo, that stores searchable data about other websites. However, to connect to a website's server and display its web pages, a user must have a web browser installed.[3]


         <code>Lorem Ipsum</code>  </p>

      <p> Web browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones. In 2019, an estimated 4.3 billion people used a browser.[4] The most used browser is Google Chrome, with a 64% global market share on all devices, followed by Safari with 17%.[5]<code>"de Finibus Bonorum et Malorum"</code> </p>
      </section>
      <section class="main-section" id="What_is_up_with_Opera?">
        <header>What is up with Opera? </header>
        <p>Opera for computers is a flexible, easy to customize browser chosen by 55 million people over the globe. Discover these quick ways to personalize Opera and tailor it to your browsing habits.  </p>
        <p>As the feature's name hints, Opera's Speed Dial makes access to your favorite sites easier and quicker than ever. Just add their thumbnails to the browser's start page and organize them how you like.<code>'lorem ipsum'</code> </p>
      </section>
      <section class="main-section" id="What_is_up_with_Mozilla?">
        <header>What is up with Mozilla?</header>
        <p> History of the Mozilla Project. The Mozilla project was created in 1998 with the release of the Netscape browser suite source code. It was intended to harness the creative power of thousands of programmers on the Internet and fuel unprecedented levels of innovation in the browser market.<code>Lorem Ipsum </code> </p>
        <p> Mozilla is now called firefox(injected<code> humour and the like</code>) and is used a lot by developers. </p>
      </section>
      <section class="main-section" id="What_is_up_with_Chrome?">
        <header>What is up with Chrome?</header>
        <p> Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, and was later ported to Linux, macOS, iOS, and Android. The browser is also the main component of Chrome OS, where it serves as the platform for web apps. Aug 27 2019<code> Lorem Ipsum</code>  </p>
        <ul>
          <li>lorum</li>
          <li>lorum</li>
          <li>lorum</li>
          <li>lorum</li>
          <li>lorum</li>
        </ul>
        <p>Google Chrome is the most widely used viewer as informed by Wikipedia.org. it says that they have nearly two thirds of the market share of all devices. </p>
      </section>

      <section class="main-section" id="What_is_up_with_firefox?">
        <header>What is up with firefox?</header>
        <p>Firefox was created by Dave Hyatt and Blake Ross as an experimental branch of the Mozilla browser, first released as Firefox 1.0 on November 9, 2004. Starting with version 5.0, a rapid release cycle was put into effect, resulting in a new major version release every six weeks. This was gradually accelerated further in late 2019, so that new major releases occur on four week cycles starting in 2020. Firefox 75 is the latest version, which was released on April 7, 2020. </p>
            <p>The first web browser, WorldWideWeb, was developed in 1990 by Tim Berners-Lee for the NeXT Computer (at the same time as the first web server for the same machine) and introduced to his colleagues at CERN in March 1991.</p>

      </section>

  </div>
</main>
```html

<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}

.item5 {
  background: PaleGreen;
  /* Only change code below this line */
  grid-area: {3/1/4/4;}

  /* Only change code above this line */
}

.container {
  font-size: 40px;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}
</style>

<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>

Your browser information:

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

Challenge: Use grid-area Without Creating an Areas Template

Link to the challenge:

Post a link to your code instead of posting your code here.

Hello there.

Have a look over this line:

<li> <a class="nav-link" href="#What_is_up_with_Chrome?">Chrome</a> </li>

Also, why have you linked the Use grid-area challenge?

1 Like

When you run the tests, pay close attention to the feedback it gives you:

It says ¨expected 2 to equal 0", meaning that while most links are correct, 2 fail the test. Check your Chrome/mozilla nav-links and headers and make sure they are exactly correct.

The user story test are run by an algorithm, so they can only detect true/false, so one comma can give you a lot of headaches;)

edit: and yes, if you just share a link to the pen others can take a look at it easier;)

1 Like

Thanks for the advice, it’s been about 4 years since I posted here. :face_with_hand_over_mouth:

Thanks. That’ll be because I am a newbie :slight_smile: