Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Technical Documentation Page
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Link to the challenge:

2

Hello and welcome to the community :smiley:!
Follow this to post your code.

3 
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <link rel="stylesheet" href="styles.css">
  <body>
    <nav id="navbar">
      <header>
          <a class="nav-link"href="#JavaScript">JavaScript and Java</a>
          <a class="nav-link"href="#Python">Python</a>
          <a class="nav-link"href="#Php">Php</a>
          <a class="nav-link"href="#HTML">HTML and CSS</a>
          <a class="nav-link" href="#CSS">C and C++</a>
      </header>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="JavaScript">
        <header>
          <h1>JavaScript</h1>
          <ul>
            <li>Javascript is best</li>
            <li>Javascript is also best</li>
            <li>Javascript is bestest</li>
            <li>javascript is also bestest</li>
            <li>javscript both are best</li>
          </ul>
          <p>Javascript is client scripting language and java script is programing language both are different</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <h2>Java simple hello world code</h2>
          <code>
            public class main{<br/>
              public static void main[String()args]{ <br/>
              System.out.print("Hello world"); <br/>
              }<br/>
            } 
          </code>
          <h2>Javascript simple hello world code</h2>
          <code>
            let message="Hello world";<br/>
            console.log(message);
          </code>
        </header>
      </section>
      <section class="main-section" id="Python">
        <header>
          <h1>Python</h1>
          <p>Pyhton is pupolar programing language most of the time it is used in machine learning.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <h2>Python simple Hello world program</h2>
        <code>
          print('Hello world')
        </code>
        </header>
      </section>
      <section class="main-section" id="Php">
        <header>
          <h1>Php</h1>
          <p>PHP is sever side programing language used in websites mostly for making dynamic websites</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <code>
            echo "Hello world";
          </code>
        </header>
      </section>
      <section class="main-section" id="HTML">
        <header>
          <h1>HTML</h1>
          <p>HTML is mark up language used to make static websites HTML stands for hyper text markup language.<br/> CSS is use to design html for better user experience</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </header>
      </section>
      <section class="main-section" id="CSS">
        <header>
          <h1>CSS</h1>
          <p>C and C++ are programing languages</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <code>
            #include <stdio.h><br/>
int main() {<br/> 
   printf("Hello, World!");<br/>
   return 0;<br/>
}
          </code>
        </header>
      </section>
    </main>
  </body>
</html>
4

It looks like a bug in the step unless you’re both having the same mistakes which seems highly unlikely:

5

I to have the same error

6

so now how can I just submit my challange

7

Hello how can i just submit my Technical Documentation

8

if you didn’t do challenge here :

go to this page and paste your code. if you did do it, clicked on Submit and all tests passed, then it’s submited.

9

I did it but still there is error but my code is all ok

10 
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <link rel="stylesheet" href="styles.css">
  <body>
    <nav id="navbar">
      <header>
          <a class="nav-link" href="#JavaScript">JavaScript</a>
          <a class="nav-link" href="#Python">Python</a>
          <a class="nav-link" href="#Php">Php</a>
          <a class="nav-link" href="#HTML">HTML</a>
          <a class="nav-link" href="#CSS">CSS</a>
      </header>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="JavaScript">
        <header>
          <h1>JavaScript</h1>
          <ul>
            <li>Javascript is best</li>
            <li>Javascript is also best</li>
            <li>Javascript is bestest</li>
            <li>javascript is also bestest</li>
            <li>javscript both are best</li>
          </ul>
          <p>Javascript is client scripting language and java script is programing language both are different</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <h2>Java simple hello world code</h2>
          <code>
            public class main{<br/>
              public static void main[String()args]{ <br/>
              System.out.print("Hello world"); <br/>
              }<br/>
            } 
          </code>
          <h2>Javascript simple hello world code</h2>
          <code>
            let message="Hello world";<br/>
            console.log(message);
          </code>
        </header>
      </section>
      <section class="main-section" id="Python">
        <header>
          <h1>Python</h1>
          <p>Pyhton is pupolar programing language most of the time it is used in machine learning.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <h2>Python simple Hello world program</h2>
        <code>
          print('Hello world')
        </code>
        </header>
      </section>
      <section class="main-section" id="Php">
        <header>
          <h1>Php</h1>
          <p>PHP is sever side programing language used in websites mostly for making dynamic websites</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <code>
            echo "Hello world";
          </code>
        </header>
      </section>
      <section class="main-section" id="HTML">
        <header>
          <h1>HTML</h1>
          <p>HTML is mark up language used to make static websites HTML stands for hyper text markup language.<br/> CSS is use to design html for better user experience</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </header>
      </section>
      <section class="main-section" id="CSS">
        <header>
          <h1>CSS</h1>
          <p>CSS stands for Casscading style sheets</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <code>
            #include <stdio.h><br/>
int main() {<br/> 
   printf("Hello, World!");<br/>
   return 0;<br/>
}
          </code>
        </header>
      </section>
    </main>
  </body>
</html>
11 
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,
body{
  width:100%;
  display:flex;
  background-color:black;
  color:white;
}
#navbar{
  width:25vw;
  position:relative;
}
#navbar header{
  position:fixed;
  padding:10px 0;
}
.nav-link{
  text-decoration:none;
  display:block;
  color:white;
  font-size:2.5vw;
  font-weight:bolder;
  margin-top:30px;
}
#main-doc{
  width:75vw;
}
.main-section{
  margin-bottom:30px;
}
.main-section h1{
  font-size:5vmax;
  margin-bottom:10px;
}
.main-section p{
  font-size:3vmax;
  margin-bottom:10px;
}
.main-section h2{
  margin-bottom:10px;
}
.main-section code{
  background-color:white;
  color:black;
}
@media (max-width:600px){
  html,body{
    display:block;
  }
  #navbar{
    width:100%;
    height:60px;
    display:flex;
    align-items:center;
    padding:10px;
  }
  #navbar header{
    position:relative;
  }
  .nav-link{
    margin:2vw;
    display:inline;
  }
  #main-doc{
    width:100%;
    padding:10px;
  }
}
12

The other guy solved his error so there doesn’t seem to be the issue of a bug. I am sorry but don’t know how to fix your error because I haven’t done this project yet. I recommend reposting your topic and maybe someone else will be able to help you . Once you’ve passes all tests you can successfully submit the challenge. I wish you luck in solving the issue.

13

Hi! Mod here, we prefer people don’t repost for the same lesson and just reply to their original topic, this will push it to the top of the forum page. :slight_smile:

14

Hi! What errors are you having specifically? Knowing this will make it easier to help you.

I can say that your style sheet link should be in the head element, not outside of it.

<head>
  </head>
  <link rel="stylesheet" href="styles.css">
15

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