Documntation project Test errors (

<!DOCTYPE html>
  <head lang="en">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta charset="UTF-8">
      <link rel="stylesheet" href="styles.css">
      <link rel="preconnect" href=""> 
<link rel="preconnect" href="" crossorigin>
<link href=";400;500;600&display=swap" rel="stylesheet">
      <title>Technical Documentation</title>
        <nav id="navbar">
          <header>JS Documentation</header>
          <a class="nav-link" href="#Introduction">Introduction</a>
          <a class="nav-link" href="#Declaring_Variables">Declaring Variables</a>
          <a class="nav-link" href="#Variable_Scope">Variable Scope</a>
          <a class="nav-link" href="#Global_Variables">Global Variables</a>
          <a class="nav-link" href="#Constants">Constants</a>
        <main id="main-doc">
            <h1>Technical Documentation</h1>
            <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>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:
                  <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>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.</li>
            <section class="main-section" id="Declaring_Variables">
              <header>Declaring Variables</header>
              <p>This guide assumes you have the following basic background:
                  <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
                  <li>Good working knowledge of HyperText Markup Language (HTML).</li>
                  <li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li>
              <p>You can declare a variable in three ways:
With the keyword var. For example,</p><div class="code-container"><code>var x = 42.</code></div>
              <p>This syntax can be used to declare both local and global variables.By simply assigning it a value. For example,</p><div class="code-container"><code>x = 42.</code></div><p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.With the keyword let. For example,</p><div class="code-container"><code>let y = 13.</code></div><p>This syntax can be used to declare a block scope local variable. See Variable scope below.</p></section>
            <section class="main-section" id="Variable_Scope">
              <header>Variable Scope</header>
              <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.

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><div class="code-container"><code>if (true) { var x = 5; } console.log(x); // 5</code></div><p>This behavior changes, when using the let declaration introduced in ECMAScript 2015.</p><div class="code-container"><code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is not defined</code><div></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">
              <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><div class="code-container"><code>const PI = 3.14;</code></div>
              <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.

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.

You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p><div class="code-container"><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></div></section>
body {
  display: flex;
  flex-direction: row;
  width : 100%;
  height: 100%;
  margin: 0;
  overflow: hidden; 
  column-gap: 8px;
  font-family: 'Open Sans';
  background-color: rgb(255, 255, 255)

#navbar { 
  width: 30%;     

#navbar header {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 30px;  

.nav-link {
  display: block;  
  text-decoration: none;
  border-top: 1px solid black;
  border-right: 1px solid rgb(212, 203, 203);
  font-size: 18px; 
  padding-left: 20px;
  height: 40px;
  line-height: 40px;

#main-doc {
  width: 70%;
  overflow: auto;
  padding-left: 30px; 
  border-left: 3px solid rgb(189, 181, 181);  

#main-doc header {
  font-size: 30px;
  font-weight: bold;

.code-container {
  width: 90%;
  background-color: rgb(247, 247, 247);
  border-radius: 6px;
  position: relative;
  margin:20 auto;
  padding: 15px;

#navbar a, #main-doc p, #main-doc ul, code:not(header, h1, h2) {
  color: rgb(77, 78, 83);

@media only screen and (max-width: 768px) {

  body {
    flex-direction: column;

   #navbar {
     width: 100%;

  #main-doc {
    width: 100%;
    border-top: 3px solid rgb(189, 181, 181);
    border-left: none;


Errors -

-None of your header elements should be empty

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

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

I am trying to post my html code but it is being processed everytime , can somoeone please help.

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

Sorry for the inconvenience

It happens. Can you post a link to the challenge

There doesnt seem to be an issue. The project passes if I copy/paste your code

Hmm i went over this code several times and same result , i will try deleting it and paste it in again .

I repasted and same error , so you were able to run the tests you received 100 % pass ?
I am at a loss right now !! .

That is weird. Have you tried submitting the project in a different browser? Just as something to try

1 Like

ahhhhhhh yesssss !!! This worked, my original browser was Safari, i used chrome and it submitted successfully.

Thanks a million brother :facepunch: :facepunch: :muscle: :muscle: :pray: :pray: :pray: :pray:

1 Like

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