Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>technical documentation page</title>
    <link rel="stylesheet" href="style.css">

  </head>

<body>
  <main id="main-doc">
    <h1>Technical Documentation</h1>
    <nav id="navbar">
      <h2>The Importance of technical documentation in every organisation</h2>
      <p><a class="nav-link" href="#"> Technical documentation</a> process,rules and guidelins</p>
      <p><a class="nav-link" href="#">Project</a> process,rules and guidelins</p>
      <p><a class="nav-link" href="#"> Informations</a> process,rules and guidelins</p>
      <p><a class="nav-link" href="#"> Teams</a> process,rules and guidelins</p>
      <p><a class="nav-link" href="#"> Leaders</a> process,rules and guidelins</p>
      
    </nav>
    <section class="main-section">
      <h3 id="#home">The home page of technical documentation page</h3>
      <p>The guideline to handle technical issues</p>
      <p>The technical teams that will guide you</p>
    </section>
    <section class="main-section">
      <h3 id="Project_teams">The Project Teams</h3>
      <ol>
        <li>Manager</li>
        <li>Senior Supervisor</li>
        <li>Supervisor</li>
       
      </ol>
      <p>Manager teams are the highest project teams that determine how the projects are been run and maintained.</p>
      <p>Senior Supervisor are the next rank to manager and they specialized in the quality of the project</p>
    </section>
    <section class="main-section">
      <h4 id="documentation">Documentation is the process in which all the data and the information are kept</h4>
      <p>There is two types of documentation process:<br>
      <li>Analog</li>
      <li>Digital</li></p>
      <p>Analog is the process in which the informations are stored in a hard copy</p>
      <p>Digital are the process in which the informations are store in an electronic machines like computer systems, cloud or external hard drive.</p>

    </section>
    <section class="main-section">
      <h5 id="analog">Analog</h5>
      <p>Analog process is the which you can keep your informations is a hard COPY</p>
      <p>Analog process is the which you can keep your informations is a hard COPY</p>
    </section>
    <section class="main-section">
      <h6 id="digital">Digital</h6>
      <p>Digital process is the procce in which the informations are stored in the computer system</p>
    </section>
  </main>
</body>
</html>
/* file: styles.css */
@media (min-width: 768px){
  #main-doc{
   
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Hi everyone!

please am trying to finish up with this assignment. Please can anyone guide me to finish?

Hi :smiley:

Could you explain what it is your trying to do?

It can also help to explain what it is you’ve already tried to solve your problem

I cleared all my code and started afresh again, but this type I could not pass 4 questions in the whole of exercise.

Here are my code;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>technical documentation page</title>
    <link rel="stylesheet" href="style.css">

  </head>

<body>
  <main id="main-doc">
    <nav id="navbar">
      <header>Technical Teams
      <a class="nav-link" href="#project_team">Project Team</a>
      <a class="nav-link" href="#tutoria_team">Tutoria Team</a>
      <a class="nav-link" href="#project_manager">Project Manager</a>
      <a class="nav-link" href="#data_team">Data Team</a>
      <a class="nav-link" href="#safety_team">Safety Team</a>
    </header>
</nav>
    <section class="main-section" id="project_team"><heafer>Project Team</header>
    <p><i><a href="project_team">Project Team</a></i>The team that design the project<strong>the company</strong></p>
    <code></code>
    <p>Project teams are categorized of two type: <br>
    <ol>
      <li>Project Teams (Manager)</li>
      <li>Project Teams (Supervisor)</li>
      </ol></p>
    </section>

    <section class="main-section" id="tutoria_team">
      <header>Tutoria Team</header>
      <article class="technical"><a href="tutorial_team">Tutoria</a>
      <code></code>
      <p>Teachers the major team here that taught the staff on the current project</p>



    </section>

    <section class="main-section" id="project_manager">
      <header>Project Manager</header>
      <article class="technical"><p><a href="project_manager">Manager</a>are the arrow head to the company</p></article>
      <code></code>
      <p>Manager are the major risk taker in promoting the affairs of the company</p>
    </section>

    <section class="main-section" id="data_team"><header>Data Team</header>
    <article class="technical"><p><a href="safety_team">Data Teams</a>are the ones who store every information about the company to the server</p>
    <code></code>
    <p>There is two types of storage here: <br>
    <>ul>
    <li>Digital</li>
    <li>Analog</li>
    </ul></p>

    <p>Digital storage is the process of storing your information in the server</p>
    <p>While the Analog storage is the process of storing all your information on hard copy</p>
    </article>
    
    </section>

    <section class="main-section" id="safety_team"><header>Safety Team</header>
    <article class="technical"><p><a href="safety_team">Safety Team</a>is the teams that made sure every staff safe during the oppression</p>
    <code></code>

    <p>Safety of every staff should be a guranttee</p>
    <ul><li>Safety wears</li></ul>
    
    </article>
    </section>
  </main>
 
 
</body>
</html>

I went through your first code to see if I could spot where you were having issues.

however without knowing what stories or tests its saying are not passing. I may not be of much help :frowning:

if you can narrow your question down to one specific thing it would be much easier to help, tho I do understand how difficult this can sometimes be.
(don’t be afraid of giving more information on a problem your trying to solve, eg feedback your getting from the project, what you’ve tried, where you think the problem is, where you’ve searched for the answer etc…)

having glanced through your project there are a few ‘tests’ I think may be holding you up.

  • Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

your first section child is the <h>
the ID MUST be the same as the text.
eg.

<section class="main-section">
    <h1 id="Dummy_Text">Dummy Text</h2>

any spaces in the id should be replaced with _

  • I cant find any code elements

code elements are used to display code, the font is slightly changed by default.

I wont give you an example here since I believe it would benefit you to search for it.
there are a number of sites that will give you the tags and definitions as well as how to use them.
These sites will become your best friend :smiley:

  • you dont seem to have liked your navbar to the page, tho you do have the # in place.

your almost there, use the id of the section, and place it in as the href.
clicking on the link should jump you to the section

  • Your Technical Documentation project should use at least one media query.

I know media quires can be confusing, however learning them can make things much easier for you later, and you will need them.

you have the right idea.
again its best if you explore them, but will give you an example of changing the color of the body

@media (max-width: 600px) {
    body {
        background-color: blue;
    }
}

Few extra tips:

  • although <h> elements must be in order on the page, you can use as many as you like and do not have to use all of them, h1 to h6.
    eg.
<section>
    <h1>text</h1>
    <h2>slightly smaller text</h2>
</section>
<section>
    <h1>more text</h1>
</section>
  • you can use lists for your nav bars
    eg.
<nav>
    <ul>
        <li>section one</li>
        <li>section two</li>
    </ul>
</nav>

you can style a list in CSS.
look up ‘list-style’

  • sometimes you need to remove padding and margin to make the navbar touch the edge of the page. this can prevent code passing
1 Like

Your second try shows progress. :smiley:

The amount you will learn from the cert. projects will be more valuable to you than anywhere else.
The act of searching for the answer, tho stressful, will help your brain remember things.

1 Like

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