Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

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.

<!DOCTYPE hmtl>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <Meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <Title>TecnicalReactDoc</title>
    <link rel='stylesheet' href='./styles.css'/>
  </head>
  <body>
    <nav id='navbar'>
      <header>REACT.js</header>
        <a class='nav-link' href='#Introduction_to_React'>Introduction to React</a>
        <a class='nav-link' href='#How_can_be_used?'>How can be used?</a>
        <a class='nav-link' href='#Declarative'>Declarative</a>
        <a class='nav-link' href='#Components'>Components</a>
        <a class='nav-link' href='#Function_components'>Function Components</a>
        <a class='nav-link' href='#Server_Components'>Server Components</a>
        <a class='nav-link' href='#Server_Components_2'>Server Components 2</a>
        <a class='nav-link' href='#Class_Components'>Class Component</a>
       </nav>
    <main id='main-doc'>
      <section class='main-section' id='Introduction_to_React'>
        <header><h1>Introduction to React</h1></header>
          
<p>Is a free and open-source front-end JavaScript library for building user interfaces based on components.
  </p> 
  <p>It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.</p>
         
       
      </section>
      <section class='main-section' id='How_can_be_used?'>
<header><h1>How can be used?</h1></header>

      
<P>React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js.
  </P>
    

</section>
      <section class='main-section' id='Declarative'>
<header><h1>Declarative</h1></header>
          
        
          <P>React adheres to the declarative programming paradigm. 
            </p>
            <P>Developers design views for each state of an application, and React updates and renders components when data changes. 
              </P>
          <P>  This is in contrast with imperative programming.
            </P>
            
       

      </section>
      <section class='main-section' id='Components'>
<header><h1>Components</h1></header>
          
        <text>
          <P>React code is made of entities called components.These components are modular and reusable.React applications typically consist of many layers of components. The components are rendered to a root element in the DOM using the React DOM library. 
            </p>
            <P>When rendering a component, values are passed between components through props (short for "properties"). Values internal to a component are called its state.
            </p>
            <li>
            <code>
              import React from "react";

/** A pure component that displays a message with the current count */
const CountDisplay = props => {
  // The count value is passed to this component as props
  const { count } = props;
  return (<div>The current count is {count}.</div>);
}
            </code>
            </li>
        </text>

      </section>
      <section class='main-section' id='Function_components'>
<header><h1>Function components</h1></header>
          
        <text>
          <P>Function components are declared with a function (using JavaScript function syntax or an arrow function expression) that accepts a single "props" argument and returns JSX. 
            </p>
            
           <P> From React v16.8 onwards, function components can use state with the useState Hook.
             </p>
             <li>
             <code>
               // Function syntax
function Greeter() {
  return <div>Hello World</div>;
}

// Arrow function expression
const Greeter = () => <div>Hello World</div>;
             </code>
             </li>
        </text>

      </section>
      <section class='main-section' id='Server_Components'>
        <header> <h1>Server Components</h1> </header>
        
        <li>
        <code>
          async function MyComponent() {
  const message = await fetchMessageFromDb();

  return (
    <div>Message: {message}</div>
  );
}
        </code>
        </li>
      
      </section>
      <section  class='main-section' id='Server_Components_2'>
        <header><h1>Server Components 2</h1></header>
        
        <li>
        <code>
          async function MyComponent() {
  const message = await fetchMessageFromDb();

  return (
    <div>Message: {message}</div>
  );
}
        </code>
        </li>
        
      </section>
      <section class='main-section' id='Class_Components'>
        <header><h1>Class Components</h1></header>
        
        <li>
        <code>
          class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}
        </code>
        </li>
        
      </section>
      <a href='https://en.wikipedia.org/wiki/React_(software)'>React.jsWiki</a>
    </main>
   
  </body>
</html>

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

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

1 Like

check your last .nav-link element, compare the href attribute to the element text

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