Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
  <header>navbar</header>
    <ul>
      <li><a  href="#Javascript_And_Usage" class="nav-link">Javascript and Usage</a></li>
      <li><a  href="#Local_And_Global_Scope" class="nav-link">Local and Global Scope</a></li>
      <li><a  href="#Use_Of_Arrays" class="nav-link">Use of Arrays</a></li>
      <li><a  href="#Use_Of_Variables" class="nav-link">Use of Variables</a></i>
      <li><a  href="#Use_Of_Loops" class="nav-link">Use of Loops</a></li>
    </ul>
  </nav>
<main id="main-doc">
<section class="main-section" id="Javascript_And_Usage">
  <header>Javascript_And_Usage</header>
    <ul>
      <li>Operators</li>
      <li>Events</li>
      <li>Functions</li>
      <li>Data types</li>
      <li>Methods and Objects</li>
    </ul><br>
    <code>-Operators serve as a way for JS to do arithmatic operations.</code></br>
     <code>-Javascript interaction through HTML when a user or browser manipulates a page.</code><br>
     <code>-Functions are the soul of what makes JS work. It is a way for code to be compressed and used again.</code><br>
     <code>-The main workings of JS is the use of data type, such as strings, numbers, object definition.</code><br>
     <code>-Methods are function definitions and objects are what help generate methods.</code><br>
    <br>
    <p>Javascript is one of the most popular programming languages in coding today. Along with HTML and CSS, websites of today have become more dynamic and interactive. Javascript isn't as hard as some might be lead to beleive. It's a wonderful way of learning how to code. </p>
    <p>Javascript is an advanced programming language that deals with functions and its other primary prototypes called ojects. Objects are essential in learning how to use JS.</p>
    <p>Methods also comprise the use of JS. Along with objects, methods add additonal functionality to JS. When used in unison with each other JS becomes a poweful scripting language.</p>
    <p></p>
    <p></p>
 </section>
    <section class="main-section" id="Local_And_Global_Scope">
   <header>Local_And_Global_Scope</header>
     <ul>
      <li>The workings of scopes</li>
      <li>Look for external variables</li>
      <li>Look for internal variables</li>
      <li>The significance of using global context</li>
      <li>The significance of using local context</li>
    </ul>
      <code>-Scope determines the visibility of variables.</code><br>
      <code>-Variables declared globally, can be accessed.</code><br>
     <code>-Variables declared locally, can be accessed.</code><br>
     <code>-Function scope</code><br>
     <code>-Block scope</code><br>
    <p>When declaring a variable outside a function, that variable can be seen by other parts of the program. And when a variable is declared inside a named function, only that named funtion can see the variable.</p>
    <p>A fucntion scope variable is particuler to that function. Once you're out of the function, the variable would be useless in other parts of the code.</p>
    <p>The beauty here with scope is that either a global scope or local scope can have the same name without any adverse effects to the line of code, or to the execution of code.</p>
    <p>Functions are an intregral part of javascript, and one can say that it is the engine that makes javascript work the way it does.</p>
    <p>And as a final note to this portion of the technical documentation, block scope is a subset of a function scope since functions need to be declared with curly braces.</p>
  </section>
    <section class="main-section" id="Use_Of_Arrays">
   <header>Use_Of_Arrays</header>
    <ul>
      <li>Data types</li>
      <li>Elements</li>
      <li>Array objects</li>
      <li>Array within arrays</li>
      <li>Array methods</li>
    </ul>
     <code>-Declarations</code><br>
     <code>-Indexing</code><br>
     <code>-Elements</code><br>
     <code>-Array Literal Notation</code><br>
     <code>-Array Constructor</code><br>
    <p>Arrays are essential when it comes to declaring multiple formats of data types. With arrays, one can have either a string value, a number value, or a boolean value amongst different other types of data</p></br>
    <p>Accessing those data types within a block of JS code would be through the use of indexing. One would start with 0 and or upto the amount of elements the array variable is holding</p><br>
    <p>As mentioned previously, elements are what arrays have within it's containers. And like accessing the data types, using indexing is the preferrable way of accessibility </p>
    <p></p>
    <p></p>
  </section>
    <section class="main-section" id="Use_Of_Variables">
   <header>Use_Of_Variables</header>
    <ul>
      <li>Declaration</li>
      <li>Initialization</li>
      <li>Values</li>
      <li>Global</li>
      <li>Local</li>
    </ul>
     <code>-Declaration of a variable and initialization</code><br>
     <code>-How values define a variable</code><br>
     <code>-How global and the scope of a variable influnce function performance</code><br>
     <code></code>
     <code></code>
       <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </section>
    <section class="main-section" id="Use_Of_Loops">
   <header>Use_Of_Loops</header>
     <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
     <code></code>
     <code></code>
     <code></code>
     <code></code>
     <code></code>
       <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </section>
  </main>

              
            
!

CSS

              
                @media only screen and (max-width: 726px) {
  .example {background: red;}
}
body{
  margin: auto;
  padding: 5px;
  background-color: darkkhaki;
}

#main-doc{
  display: grid;
  margin: auto;
  grid-template-rows: 700px 700px 700px 700px 700px;
  grid-gap: 10px;
}
section header{
  margin: 5px;
  text-align: center;
  font-size: 25px;
}
.main-section{
  background-color: teal;
  color: white;
  grid-auto-columns: auto auto;
  border-radius: 5px;
  border-style: solid;
  border-color: black;
  border-width: 4px;
}
#navbar{
 font-size: 18px;
 text-align: center;
}
nav li{
  display: grid;
  margin: auto;
  padding: 10px;
  overflow: hidden;
  list-style-type: none;
  }
li a{
  padding: 30px;
  background-color: black;
  text-decoration: none;
  color: white;
  
  }
.main-section li{
 }
nav ul{
  padding: 15px;
  float: left;
  
 
}



              
            
!

JS

              
                let navFade = document.getElementById('navbar');

              
            
!
999px

Console