Technical documentation page ;

Tell us what’s happening:
i’m not too sure what they mean
can’t tell where i’m wrong

Your code so far


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.
<script src=""></script>
<div class="main-body">

  <nav id="navbar">
    <header>JS Documentation</header>
    <a href="#Introduction" class="nav-link">Introduction</a>
    <a href="#JavaScript" class="nav-link">JavaScript</a>
    <a href="#Variables" class="nav-link">Variables</a>
    <a href="#Scope" class="nav-link">Scope</a>
    <a href="#Functions" class="nav-link">Functions</a>

  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <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>
    <section class="main-section" id="JavaScript">
      <p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming
        conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
      <p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model
        instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements.
        Functions can be properties of objects, executing as loosely typed methods.</p>
      <code>function greetMe(yourName) {
  alert("Hello " + yourName);
        <li>Control Flow</li>
        <li>The Strange Parts</li>
    <section class="main-section" id='Variables'>
      <p>Global variables are in fact properties of the global object. In web pages the global object is window, so you can set and access global variables using the window.variable syntax.</p>
      <p>Consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. For example, if a variable called phoneNumber is declared in a document, you can refer to this variable
        from an iframe as parent.phoneNumber.</p>
      <code>const PI = 3.14;</code>
function f() {};
const f = 5;
function f() {
  const g = 5;
  var g;
    <section class="main-section" id='Scope'>
      <p>When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available
        only within that function.</p>
      <p>JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope
        of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.</p>
      <code>if (true) {
  var x = 5;
console.log(x);  // 5</code>
    <section class="main-section" id='Functions'>
      <p>Functions store instructions to reusable code.</p>
      <p>They are one of the fundamentals of software.</p>
      <code>function square(number) {
  return number * number;
      <code>return number * number;</code>
div.main-body {
  display: grid;
  grid-template-columns: minmax(200px, auto) 1fr;
  grid-template-areas: "navbar mainContent";
  grid-gap: 20px;

nav#navbar {
  grid-area: navbar;
  position: fixed;

nav#navbar a {
  display: block;
  border: 1px solid black;
  padding: 5px;
  margin: 10px 0;
  text-decoration: none;
  color: black;

main#main-doc {
  grid-area: mainContent;

header {
  font-size: 1.5em;
  font-weight: bold;

code {
  background-color: #CCC;
  display: block;
  padding: 20px;

@media screen and (max-width: 750px) {
  div.main-body {
    grid-template-columns: 1fr;
    grid-template-areas: "navbar" "mainContent";
  nav#navbar {
    position: inherit;

Your browser information:

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

When I run your HTML through the test I get only one test that is not passing:

“Your Technical Documentation project should use at least one media query”

Is this what you are referring to? If so, you need to add a media query to your CSS.

If you need more help than this please ask a specific question and post your CSS code so we can see what you’ve tried so far.

its one test that isn’t passing and im not sure where to paste the css part

I’m not sure I understand this question. CSS goes in the styles editor, but I’m assuming you already know that. So are you asking where the media query goes in the CSS? Usually near the bottom, since you want the default CSS to take precedence. But you can also put it right after the element(s) that are affected. In other words, first create the default CSS styles and then after those use media queries to alter the style when the media query is triggered.

Are you able to see the code in the editor?

This is what isn’t passing " 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 " that’s what its saying

No, you’ll need to paste your CSS code in this thread. Be sure to wrap it in triple back ticks. On a line by themselves type three back ticks. Then below that paste your CSS. Then on a separate line below your CSS type another three back ticks. On my keyboard the back ticks are in the upper left just above the Tab key and below Esc.

ccol! lemme try that

I’m not getting that error with the HTML you pasted above. Did you change your HTML since then? If so, you’ll need to paste your updated version.

i didn’t paste my css i think that’s why you can’t see that

I think i’ve fixed it please have a look now

Ahh, I overlooked something in your HTML. Be sure to read the note at the bottom of the instructions.

ah!! i didn’t see that ok

Thanks it passed :+1:t5:

4 posts were split to a new topic: Need help with technical document page.thanks :slight_smile:

can you paste screenshot ? i could not solve this problem

I’m not sure what you are asking of me?

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

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.