Help - Technical Documentation Page

HTML-CSS
1

Hey guys,
I got a problem with those two sub excercises in the examination.

First one:
You should have at least five code elements that are descendants of .main-section element ----> what are ‘code’ elements then…?

Second one:
Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id) ----> i’ve counted and examined them so often… i dont see what I am doing wrong…

Link to the Code Pen Site: https://codepen.io/jenny0517/full/mdXzgBq

Could anyone help me out? What am I doing wrong?

Your code so far

<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<main id="main-doc">

  <body>
    <div id="nav-container">
      <nav id="navbar">
        <header id="nav-header">
          <strong>Lorem Ipsum</strong>
        </header>
        <ul id="nav-links">
          <li><a class="nav-link" href="#Rohstoffe">Rohstoffe</a></li>
          <li><a class="nav-link" href="#Tools">Tools</a></li>
          <li><a class="nav-link" href="#basic_knowledge">Basiswissen</a></li>
          <li><a class="nav-link" href="#Shops">Shops</a></li>
          <li><a class="nav-link" href="#Nice_to_know">Nice to know</a></li>
      </nav>
    </div>

    <div id="text-container">
      <section class="main-section" id="Rohstoffe">
        <header>
          Rohstoffe
        </header>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
        <ul>
          <li> Lorem ipsum dolor amet.</li>
          <li> Lorem ipsum dolor amet.</li>
        </ul>
        </p>
      </section>

      <section class="main-section" id="Tools">
        <header>
          Tools
        </header>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
        <ul>
          <li> Lorem ipsum dolor amet.</li>
          <li> Lorem ipsum dolor amet.</li>
        </ul>
        </p>
      </section>

      <section class="main-section" id="Basiswissen">
        <header>
          Basiswissen
        </header>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
        <ul>
          <li> Lorem ipsum dolor amet.</li>
          <li> Lorem ipsum dolor amet.</li>
        </ul>
        </p>
      </section>

      <section class="main-section" id="Shops">
        <header>
          Shops
        </header>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
        <ul>
          <li> Lorem ipsum dolor amet.</li>
          <li> Lorem ipsum dolor amet.</li>
        </ul>
        </p>
      </section>

      <section class="main-section" id="Nice_to_know">
        <header>
          Nice to know
        </header>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
        <ul>
          <li> Lorem ipsum dolor amet.</li>
          <li> Lorem ipsum dolor amet.</li>
        </ul>
        </p>
      </section>
    </div>
  </body>
</main

CSS
body {
  margin: 0;
  background-color: grey;
  font-size: 1em;
  font-family: Arial, New_Courier;
}
/*Navigation*/

div#nav-container {
  position: fixed;
  width: 25%;
}

#nav-header {
  background-color: white;
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 1.3em;
}

ul#nav-links {
  list-style: none;
  background-color: white;
  width: 25%;
  margin: 0;
  padding: 1em 0 0 0;
  overflow: auto;
  position: fixed;
  height: 100%;
}

ul#nav-links li a {
  display: block;
  text-decoration: none;
  color: #000;
  text-align: center;
  padding: 0.5em 0em 0.5em 0em;
}

ul#nav-links li a:hover {
  font-size: 1.1em;
  background-color: grey;
}

/*Inhaltsbereich*/

div#text-container {
  margin-left: 25%;
  padding: 1em;
}

div#text-container header {
  font-size: 1.3em;
}

/*Responsive*/

@media screen and (max-width: 900px) {
  ul#nav-links {
    width: 100%;
    height: 40px;
    position: fixed;
    margin: 0;
    padding: 0;
  }

  ul#nav-links li a {
    float: left;
    padding: 10px;
  }

  div#nav-container {
    width: 100%;
    text-align: center;
  }

  div#text-container {
    padding: 100px 1em 1em 1em;
    margin-left: 0;
  }
}

@media screen and (max-width: 600px) {
  ul#nav-links {
    height: auto;
    padding-top: 10px;
  }

  ul#nav-links li a {
    text-align: center;
    float: none;
  }

  div#text-container {
    padding-top: 250px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

HI, about the first one these<code></code> elements which you can put code inside them, and the browser will treat them like text, and you should add a certain amount of these inside your section element with the class .main-section

about the second one you should add a nav element with the id that is wanted then give it a ul element, inside the ul element make three li child elements, after that give each li element an anchor element, and set the href to, for example #How-it-works, then make section elements below the nav element and, set their id to li elements href, for example id=“How-it-works”.

<li><a class="nav-link" href="#How-it-works">How it works</a></li>

hope it helps.!

3

Thank you so much :slightly_smiling_face:
Yeah, well the first problem was that I didn’t get what they exactly wanted me to do… I fixed that thanks to you help.

Second one was just a typo …

Now its working! Thank you for the fast reply :slight_smile:

4

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