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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Technical Documentation Page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="index.js"></script>
  </head>
  <body>
    <nav id="navbar" >
      <header>
        <h1>JS Documentation</h1>
      </header>
      <ul>
        <li><a class="nav-link" href="#Javascript_and_Java">JavaScript and Java</a></li>
        <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
        <li><a class="nav-link" href="#Variables">Variables</a></li>
        <li><a class="nav-link" href="#Declaring_variables">Declaring variables</a></li>
        <li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
        <li><a class="nav-link" href="#Global_variables">Global variables</a></li>
        <li><a class="nav-link" href="#Constants">Constants</a></li>
        <li><a class="nav-link" href="#Data_types">Data types</a></li>
        <li><a class="nav-link" href="#if...else_statement">if...else statement</a></li>
        <li><a class="nav-link" href="#Function_declarations">Function declarations</a></li>
        <li><a class="nav-link" href="#Reference">Reference</a></li>
      </ul>
     </nav>
    </header
     <main id="main-doc">
      <section id="Introduction">
       <header>Introduction</header>
        <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>
       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.
          </ul>
       </li>
       <li> 
         <ul>
           Server-side JavaScript extends the core language by supplying objects relevant
            to running JavaScript on a server. For example, server-side extensions allow an
             application to communicate with a database, provide continuity of information 
             from one invocation to another of the application, or perform file manipulations 
             on a server.
         </ul>
       </li>
    </section>
    <section  id="What_you_should_already_know">
      <header>What you should already know</header>
      <p>This guide assumes you have the following basic background:</p>
      <code></code>
      <li>
        <ul>A general understanding of the Internet and the World Wide Web (WWW).</ul>
      </li>
      <li>
        <ul>Good working knowledge of HyperText Markup Language (HTML).</ul>
      </li>
      <li>
        <ul>Some programming experience. 
          If you are new to programming, try one of the tutorials 
          linked on the main page about JavaScript.
        </ul>
      </li>
      </p>
    </section>
      <section class="main-section" id="Javascript_and_Java">
        <header>Javascript and Java</header>
       <p>
        <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>
         <code>
            function greetMe(yourName) { alert("Hello " + yourName); }
            greetMe("World");
         </code>
         <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="Hello_world">
        <header>Hello world</header>
        <p>To get started with writing JavaScript, open the Scratchpad 
          and write your first "Hello world" JavaScript code:
        </p>
           <code>
            function greetMe(yourName) { alert("Hello " + yourName); }
            greetMe("World");
           </code>
            <p>
             Select the code in the pad and hit Ctrl+R to watch
             it unfold in your browser!
            </p>
          </p>
          </section>
        <section class="main-section" id="Variables">
        <header>Variables</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>
          A JavaScript identifier must start with a letter, 
          re (_), 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).
         </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>
        <code>
          if (true) { var x = 5; } console.log(x); // 5
        </code>
        <p>
          This behavior changes, when using the let declaration introduced in ECMAScript 2015.
        </p>
        <code>
          if (true) { let y = 5; } console.log(y); // ReferenceError: y is
          not defined
        </code>
       </p>
        </section>
      <section class="main-section" id="Declaring_variables">
        <header>Declaring variables</header>
        <p>
         <p>
          You can declare a variable in three ways:
         </p>
         <p>
          With the keyword var. For example,
         </p>
          <code>
          var x = 42.
          </code>
         <p>
          This syntax can be used to 
          declare both local and global variables.
         </p>
         <p>
          By simply assigning it a value. For example,
         </p>
          <code>
            x = 42.
          </code>
        <p>
           This always declares a global variable.  
           It generates a strict JavaScript warning.
            You shouldn't use this variant.
        </p>
        <p>
            With the keyword let. For example,
        </p>
          <code>let y = 13.</code>
        </p>
         <p>
          This syntax can be used to declare a block scope 
          local variable. See Variable scope below.
         </p>
       </p>
        </section>
      <section class="main-section" id="Variable_scope">
        <header>Variable scope</header>
        <p>
          <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>
            <p>This behavior changes, when using the let declaration
               introduced in ECMAScript 2015.
            </p>
            <code>
              if (true) { let y = 5; } console.log(y); // ReferenceError: y is
              not defined
            </code>
          </section>
      <section class="main-section" id="Global_variables">
        <header>Global variables</header>
        <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>
      </section>
      <section class="main-section" id="Constants">
        <header>Constants</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>
        <code>const PI = 3.14;</code>
        <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
           omitted,he identifier is assumed to represent a
            variable.</p>
            <p>You cannot declare a constant with the same name 
              function or variable in the same scope. 
              For example:</p>  
          <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>However, object attributes are not protected, 
               so the following statement is executed without
                problems.</p>
             <code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.
               key ="otherValue";</code>
        </p>
      </section>
      <section class="main-section" id="Data_types">
        <header>Data types</header>
        <P>The latest ECMAScript standard defines seven data types:
      </P>
       <p>
          <ul>
            <li>
              Six data types that are primitives
            </li>
          <ul>
            <li> Boolean. true and false</li>
            <li>null. A special keyword denoting a null value.
                Because JavaScript is case-sensitive, null is not
                the same as Null, NULL, or any other variant.</li>
            <li>undefined. A top-level property whose value is undefined.</li>
            <li>Number. 42 or 3.14159.</li>
            <li>String. "Howdy"</li>
            <li>Symbol (new in ECMAScript 2015). A data type whose 
                instances are unique and immutable.</li>
          </ul>
            <li>and Object</li>
         </ul>
          <p>Although these data types are a relatively small amount,
            they enable you to perform useful functions
             with your applications. Objects and functions 
             are the other fundamental elements in the language.
              You can think of objects as named containers for values,
            and functions as procedures that your application can perform.
          </p>
       </p>
          </section>
      <section class="main-section" id="if...else_statement">
        <header>if...else statement</header>
          <p>Use the if statement to execute a statement if 
            a logical condition is true. Use the optional else clause to
             a statement if the condition is false. An if statement
              looks as follows:
            </p>
           <code>if (condition) { statement_1; } else { statement_2; }</code>
           <P>condition can be any expression that evaluates to true or false. See Boolean for an explanation of what evaluates to true and false. If condition evaluates to true, statement_1 is executed; otherwise, statement_2 is executed. statement_1 and statement_2 can be any statement, including further nested if statements.</P>
           <li></li>
          </p>
        </section>
      <section class="main-section" id="Function_declarations">
        <header>Function declarations</header>
        <p>A function definition (also called a function declaration, 
          or function statement) consists of the function keyword, 
          followed by:</p>
        <ul>
        <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>
            <code>function square(number) { return number * number; }</code>
            <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>
               <code>return number * number;</code>
               <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.
               </p>
             </p>
        </section>
      <section class="main-section" id="Reference">
        <header>Reference</header>
        <ul>
          <li>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide"
            target="_blank"">MDN</a>
            </li>
            </ul>
          </section>
          </main>
      

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

In the future, 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!


I noticed that you haven’t closed the header element properly over here. You have not asked for anything specifically, so it is impossible to give any other help without getting your question.

2 Likes

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