Technical Documentation Page - Build a Technical Documentation Page

I don’t how to make the nav look like the on forum
by the way this is my first forum post ever i don’t know if I’m doing everything right, I just hit a wall, and I’ve tried for hours but nothing works, this is my last hope. I will move on and the next courses but I’ll be back for this one hopefully.

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 html>
<html lang "en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
   <main id="main-doc">
     
    <section class="main-section" id="Introduction">
      <header><h1>Introduction</h1></header>
      <code></code>
      <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
      <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
      <ul class="list">
        <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
        <li>continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
      </ul>
    </section>
    <section class="main-section" id="Hello_World">
      <header><h1>Hello World<h1></header>
      <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
      <p class="example"><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
      <p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!
</p>
    </section>
    <section class="main-section" id="Function_declarations">
      <header><h1>Function declarations</h1></header>
      <p>A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:</p>
      <ul class="list">
        <li>The name of the function.</li>
        <li>A list of arguments to the function, enclosed in parentheses and separated by commas.</li>
        <li>The JavaScript statements that define the function, enclosed in curly brackets, { }.</li>
      </ul>
      <p>For example, the following code defines a simple function named square:</p>
      <p class="example"><code>function square(number) { return number * number; }</code></p>
      <p>The function square takes one argument, called number. The function consists of one statement that says to return the argument of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function.</p>
      <p class="example"><code>return number * number;</p>
      <p>Primitive parameters (such as a number) are passed to functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.</code></p>

    </section>
    <section class="main-section" id="Variables">
      <header><h1>Variables</h1></header>
      <p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
      <p class="example"><code>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).</code></p>
      <p>You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. You can also use the Unicode escape sequences as characters in identifiers. Some examples of legal names are Number_hits, temp99, and _name.</p>
    </section>
    <section class="main-section" id="Constants">
      <header><h1>Constants</h1></header>
      <p>You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can contain alphabetic, numeric, or underscore characters.</p>
      <p class="example"><code>const PI = 3.14;</code></p>
      <p>A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.</p>
      <p>The scope rules for constants are the same as those for let block scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.</p>
      <p>You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p>
      <p class="example"><code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS
WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;
//statements }</code></p>
      <p>However, object attributes are not protected, so the following statement is executed without problems.</p>
      <p class="example"><code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =
"otherValue";</code></p>
    </section>
      <nav id="navbar">
      <header>JS Documentation</header>
      <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
        <li><a class="nav-link" href="#Hello_World">Hello World</a></li>
        <li><a class="nav-link" href="#Function_declarations">Function declarations</a></li>
        <li><a class="nav-link" href="#Variables">Variables</a></li>
        <li><a class="nav-link" href="#Constants">Constants</a></li>
     </ul>
    </nav>
  </main>
  </body>
</html>

*:not(h1){
  font-size:19px;
}

.example{
  background-color:#d3d3d3;
  padding:20px;
  margin-left:20px;
}
.list{
  padding: 8px 75px;
}
nav{
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Hello and welcome to the community :smiley:!
Your code is too large to be imported from the challenge.
Paste it between the ```` marks that appear when clicking the </> button:

2 Likes

I did paste it between the lines

1 Like

Sorry I didn’t notice :+1:.
Your project looks very good!
You can change the look of your navbar by selecting its id with a # hash followed by the id’s value.
Ex:

Html:
<button id="button">Click</button>
Css:
#button{}

You should target your nav-bar element and style it according to your preferences.
Here is a link that might help with that part:

Hope this helps!

2 Likes

I know how to target it in CSS, The problem is I have no idea how to make the output like the one their asking for, their nav in the project takes the full page on the left and why you scroll it stays on the left, I tried doing this by using the position:fixed, but it didn’t even come close to how they want. Now I could just not do it because they do not check the css and i can just make the nav at the bottom but I wanna learn for the future how.
Thank you for your time.


That’s How I want it to look and the picture before is my code trying to do it

Ok.
The first thing you must do is move the pages content to the left of the nav-bar.
Try giving your .main-section class a margin-left property.
Make sure to give it the min-width attribute so it shouldn’t shrink too much.
Tell me how it goes!

2 Likes

I don’t how to make the nav look like the on forum
by the way this is my first forum post ever i don’t know if I’m doing everything right, I just hit a wall, and I’ve tried for hours but nothing works, this is my last hope. I will move on and the next courses but I’ll be back for this one hopefully.

<!DOCTYPE html>
<html lang "en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
   <main id="main-doc">
     
    <section class="main-section" id=Preformatted text"Introduction">
      <header><h1>Introduction</h1></header>
      <code></code>
      <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
      <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
      <ul class="list">
        <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
        <li>continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
      </ul>
    </section>
    <section class="main-section" id="Hello_World">
      <header><h1>Hello World<h1></header>
      <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
      <p class="example"><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
      <p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!
</p>
    </section>
    <section class="main-section" id="Function_declarations">
      <header><h1>Function declarations</h1></header>
      <p>A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:</p>
      <ul class="list">
        <li>The name of the function.</li>
        <li>A list of arguments to the function, enclosed in parentheses and separated by commas.</li>
        <li>The JavaScript statements that define the function, enclosed in curly brackets, { }.</li>
      </ul>
      <p>For example, the following code defines a simple function named square:</p>
      <p class="example"><code>function square(number) { return number * number; }</code></p>
      <p>The function square takes one argument, called number. The function consists of one statement that says to return the argument of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function.</p>
      <p class="example"><code>return number * number;</p>
      <p>Primitive parameters (such as a number) are passed to functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.</code></p>

    </section>
    <section class="main-section" id="Variables">
      <header><h1>Variables</h1></header>
      <p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
      <p class="example"><code>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).</code></p>
      <p>You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. You can also use the Unicode escape sequences as characters in identifiers. Some examples of legal names are Number_hits, temp99, and _name.</p>
    </section>
    <section class="main-section" id="Constants">
      <header><h1>Constants</h1></header>
      <p>You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can contain alphabetic, numeric, or underscore characters.</p>
      <p class="example"><code>const PI = 3.14;</code></p>
      <p>A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.</p>
      <p>The scope rules for constants are the same as those for let block scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.</p>
      <p>You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p>
      <p class="example"><code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS
WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;
//statements }</code></p>
      <p>However, object attributes are not protected, so the following statement is executed without problems.</p>
      <p class="example"><code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =
"otherValue";</code></p>
    </section>
      <nav id="navbar">
      <header>JS Documentation</header>
      <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
        <li><a class="nav-link" href="#Hello_World">Hello World</a></li>
        <li><a class="nav-link" href="#Function_declarations">Function declarations</a></li>
        <li><a class="nav-link" href="#Variables">Variables</a></li>
        <li><a class="nav-link" href="#Constants">Constants</a></li>
     </ul>
    </nav>
  </main>
  </body>
</html>Preformatted text

CSS:
*:not(h1){
  font-size:19px;
}

.example{
  background-color:#d3d3d3;
  padding:20px;
  margin-left:20px;
}
.list{
  padding: 8px 75px;
}
nav{
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-pagePreformatted textPreformatted text``Preformatted text

I would take a close look at the first opening section tag, specifically the id attribute.

I don’t know why but when I copied the code that happened, in my code the it’s id=“Introduction”

OK, then it looks like your only issue is that you need to use a CSS media query.

I know that media query is used to make the scrolling smooth of the nav links but I don’t see how it will help me position the whole nav section like the example they give you.(btw I haven’t added the media query yet because it is the last step that I have to complete it because for some reason they don’t check your css code)


This is how I want it to be


This is how mine looks

The pics of code you posted above appear to be somewhat different then the code you originally pasted in here. You’ll need to paste your updated code in here so we can see what you are working with and test it. Don’t post pics of code, we can’t test that.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

<!DOCTYPE html>
<html lang "en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
     <nav id="navbar">
      <header class="nav-head">JS Documentation</header>
      <ul>
        <li><a id="one" class="nav-link" href="#Introduction">Introduction</a></li>
        <li><a class="nav-link" href="#Hello_World">Hello World</a></li>
        <li><a class="nav-link" href="#Function_declarations">Function declarations</a></li>
        <li><a class="nav-link" href="#Variables">Variables</a></li>
        <li><a class="nav-link" href="#Constants">Constants</a></li>
     </ul>
    </nav>
   <main id="main-doc">
     
    <section class="main-section" id="Introduction">
      <header><h1>Introduction</h1></header>
      <code></code>
      <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
      <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
      <ul class="list">
        <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
        <li>continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
      </ul>
    </section>
    <section class="main-section" id="Hello_World">
      <header><h1>Hello World<h1></header>
      <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
      <p class="example"><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
      <p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!
</p>
    </section>
    <section class="main-section" id="Function_declarations">
      <header><h1>Function declarations</h1></header>
      <p>A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:</p>
      <ul class="list">
        <li>The name of the function.</li>
        <li>A list of arguments to the function, enclosed in parentheses and separated by commas.</li>
        <li>The JavaScript statements that define the function, enclosed in curly brackets, { }.</li>
      </ul>
      <p>For example, the following code defines a simple function named square:</p>
      <p class="example"><code>function square(number) { return number * number; }</code></p>
      <p>The function square takes one argument, called number. The function consists of one statement that says to return the argument of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function.</p>
      <p class="example"><code>return number * number;</p>
      <p>Primitive parameters (such as a number) are passed to functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.</code></p>

    </section>
    <section class="main-section" id="Variables">
      <header><h1>Variables</h1></header>
      <p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
      <p class="example"><code>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).</code></p>
      <p>You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. You can also use the Unicode escape sequences as characters in identifiers. Some examples of legal names are Number_hits, temp99, and _name.</p>
    </section>
    <section class="main-section" id="Constants">
      <header><h1>Constants</h1></header>
      <p>You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can contain alphabetic, numeric, or underscore characters.</p>
      <p class="example"><code>const PI = 3.14;</code></p>
      <p>A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.</p>
      <p>The scope rules for constants are the same as those for let block scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.</p>
      <p>You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p>
      <p class="example"><code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS
WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;
//statements }</code></p>
      <p>However, object attributes are not protected, so the following statement is executed without problems.</p>
      <p class="example"><code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =
"otherValue";</code></p>
    </section>
</main
     
  </body>
</html>

CSS:

*:not(h1){
  font-size:19px;
}

.example{
  background-color:#d3d3d3;
  padding:20px;
  margin-left:20px;
}
.list{
  padding: 8px 75px;
}
#main-doc{
  margin-left:20%;

}
#navbar{
  position:fixed;
  float:left;
  width:20%;
  height:100%;
}
.nav-head{
  font-size:20px;
  font-style:bold;
}
.nav-link{
  text-decoration:none;
  color:black;
  border:1px solid black;
  padding-left:0;
}

After searching a bit I changed the nav to the top of my code and used a float variable but now I can’t stick the list inside the nav to the left, I tried using margin-left, padding left but they won’t move at all no matter how much I change the values, I can send a picture of the output if you’d like

Don’t need a pic. Anytime you change your code we need to know what you changed so we can test it. I think you know the drill by now :slightly_smiling_face: Paste your updated code in here.

That is my updated code The one that I sent it 2 days ago

could you help? I’m still stuck on this one