Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

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.

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).

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page#:~:text=You%20should,media%20query.

We already have a link to the project. We need to see your code and we need to know what your question is about the instructions. Its really impossible to help without that.

Please how can I make you see my code?

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.
!DOCTYPE html>
<html lang="en"></html>
<head><meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css>
</head>
<div class="main-body">


 <nav id="navbar">
  <header>Technical Documentation Page</header>
<a href="#documentation" class="nav-link">Documentation</a>
<a href="#introduction" class="nav-link">Introduction</a>
<a href="#definitions" class="nav-link">Definitions</a>
<a href="#examples" class="nav-link">Examples</a>
<a href="#summary" class="nav-link">Summary</a>
</nav>

<main id="main-doc">
  <section class="main-section" id="documentation">
    <header>Documentation</header>
    <p>Documentation is any communicable material that is used to describe, explain or instruct regarding some attributes of an object, system or procedure, such as its parts, assembly, installation, maintenance and use.[1] As a form of knowledge management and knowledge organization, documentation can be provided on paper, online, or on digital or analog media, such as audio tape or CDs. Examples are user guides, white papers, online help, and quick-reference guides. Paper or hard-copy documentation has become less common.[citation needed] Documentation is often distributed via websites, software products, and other online applications.</p>
    <p>Documentation development may involve document drafting, formatting, submitting, reviewing, approving, distributing, reposting and tracking, etc., and are convened by associated SOPs in a regulatory industry. It could also involve creating content from scratch. Documentation should be easy to read and understand. If it's too long and too wordy, it may be misunderstood or ignored. Clear, concise words should be used, and sentences should be limited to a maximum of 15 words. Documentation intended for a general audience should avoid gender-specific terms and cultural biases. In a series of procedures, steps should be clearly numbered</p>
    <code>/**
 * Toggle visibility of a content tab
 * @param  {String} selector Selector for the element
 * @param  {Node}   toggle   The element that triggered the tab
 */</code>
    </section>
    <section class="main-section" id="introduction">
      <header>Introduction</header>
      <p>Technical writers and corporate communicators are professionals whose field and work is documentation. Ideally, technical writers have a background in both the subject matter and also in writing, managing content, and information architecture. Technical writers more commonly collaborate with subject matter experts (SMEs), such as engineers, technical experts, medical professionals, etc. to define and then create documentation to meet the user's needs. Corporate communications includes other types of written documentation</p>
      <p>Market communications (MarCom): MarCom writers endeavor to convey the company's value proposition through a variety of print, electronic, and social media. This area of corporate writing is often engaged in responding to proposals.
Technical communication (TechCom): Technical writers document a company's product or service. Technical publications can include user guides, installation and configuration manuals, and troubleshooting and repair procedures.</p>
<ul>
  <li>variables</li>
  <li>Controls</li>
  <li>Promises</li>
  <li>Functions</li>
  <li>Attributes</li>
</ul>
      <code>elem.focus()
	if (document.activeElement.matches(selector)) return;
	elem.setAttribute('tabindex', '-1');
	elem.focus();</code>
      </section>
    <section class="main-section" id="definitions">
      <header>Definitions</header>
      <p>"Documentation" is the preferred term for the process of populating criminal databases. Examples include the National Counter-terrorism Center's Terrorist Identities Datamart Environment ("TIDE"), sex offender registries, and gang databases.</p>
      <p>These software tools can automatically collect data of your network equipment. The data could be for inventory and for configuration information. The ITIL Library requests to create such a database as a basis for all information for the IT responsible. It's also the basis for IT documentation. </p>
      <code>If elem.focus() didn't work, add tabindex="-1" and try again
	// (elements that aren't focusable by default need a tabindex)</code>
      </section>
    <section class="main-section" id="examples">
      <header>Examples</header>
      <p>Request for Proposal (RFP)
Requirements/ Statement of work/ Scope of Work (SOW)
Software Design and Functional Specification
System Design and Functional Specifications</p>
      <p>Change Management, Error and Enhancement Tracking
User Acceptance Testing
Manpages</p>
      <code>f (document.activeElement.matches(selector)) return;
	elem.setAttribute('tabindex', '-1');
	elem.focus();</code>
      </section>
    <section class="main-section" id="summary">
      <header>Summary</header>
      <p>Documentation, as it pertains to the early childhood education field, is "when we notice and value children's ideas, thinking, questions, and theories about the world and then collect traces of their work (drawings, photographs of the children in action, and transcripts of their words) to share with a wider community</p>
      <p>Thus, documentation is a process, used to link the educator's knowledge and learning of the child/children with the families, other collaborators, and even to the children themselves.

Documentation is an integral part of the cycle of inquiry - observing, reflecting, documenting, sharing and responding.</p>
      <code>var elem = document.querySelector(selector);
	if (!elem) return;
	elem.classList.add('active');</code>
      </main>
      </div>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

you are not matching properly the ids and the headers
For eg. for the Documentation header, the main-section above it needs an id=“Documentation”.
once you’ve fixed all the ids you must then fix all the hrefs in the nav-links to match them exactly.

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