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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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>JS Documentation</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li>
      <a class="nav-link" href="#What_You_Should_Already_Know">What You Should Already Know</a>
    </li>
    <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_Statements">If...Else Statements</a>
    </li>
    <li><a class="nav-link" href="#While_Statements">While Statements</a></li>
    <li>
      <a class="nav-link" href="#Function_Declaration">Function Declaration</a>
    </li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
  </ul>
</nav>

<main id="main-doc">

  <section class="main-section" id="Introduction">

    <header> Introduction</header>
    <article>
      <p> This is were your intro goes. Could be like an about the javascript basics, or a definition of the course materials i.e.syllabus.</p>
    </article>
  </section>

  <section class="main-section" id="What_You_Should_Already_Know">

    <header>What You Should Already Know</header>

    <article>
      <p>This section could be a crash course or a recap.<ul>
          <li>header</li>
          <li> css</li>
          <li> p tags for text</li>
          <li> where to put the body tag</li>
          <li>where to put the main tag</li>
          <li>things to double check in your code lines</li>
        </ul>
      </p>
    </article>
  </section>

  <section class="main-section" id="JavaScript_and_Java">

    <header>Javascript and Java</header>

    <article>
      <p> This is where you can start diving into the actual material on javascript. Maybe provide some examples of programs and capabilities of javascript and java's capabilities like a demonstration and reference.</p>
    </article>
  </section>

  <section class="main-section" id="Hello_World">

    <header>Hello World</header>
    <article>
      <p>Here is a good place to explain the demonstration or examples of coding. You could start with something simple like having "hello world" display on the screen. Like this:</p>
      <p>
        <code>function greetme(insert your name here) {alert("hello" + yourname); }
          greetme("world");</code>

        and then we can use more examples stemming off of this.</p>
    </article>
  </section>

  <section class="main-section" id="Variables">
    <header>Variables</header>
    <article>
      <p>
        Here we can explain variables like what they are and what they do, give some examples of variable coding.</p>
    </article>
  </section>

  <section class="main-section" id="Declaring_Variables">
    <header>Declaring Variables</header>
    <article>
      <p> Declaring variables can assign a value to any variable and you can use that for numerous things.</p>
      <p>Here are some examples of declaring variable codes:</p>
      <p>
        <ol>
          <li>
            <code> var x=42</code></li>
          <li><code> x=42</code></li>
          <li><code> let y=13</code></li>
        </ol>
      </p>
    </article>
  </section>

  <section class="main-section" id="Variable_Scope">
    <header>Variable Scope</header>
    <article>
      <p>Again same thing explain and give examples and demonstration of variable scopes. In the below example the code will log 5 since the scope of x is 5, which was declared in the below example.</p>
      <p>
        <code> if (true) {var x = 5; } console.log(x); // 5</code></p>
    </article>
  </section>

  <section class="main-section" id="Global_Variables">
    <header>Global Variables</header>
    <article>
      <p> lorum ipsum.lorum ipsum.lorum ipsum dolor.</p>
    </article>
  </section>

  <section class="main-section" id="Constants">
    <header>Constants</header>
    <article>
      <p> lorum ipsum.lorum ipsum.lorum ipsum dolor.</p>
    </article>
  </section>
  <section class="main-section" id="Data_Types">
    <header>Data Types</header>
    <article>
      <p> lorum ipsum.lorum ipsum.lorum ipsum dolor.</p>
    </article>
  </section>

  <section class="main-section" id="If...Else_Statements">
    <header>If...Else Statements</header>
    <article>
      <p>lorum ipsum.lorum ipsum.lorum ipsum dolor.</p>
    </article>
  </section>

  <section class="main-section" id="While_Statements">
    <header>While Statements</header>
    <article>
      <p>lorum ipsum.lorum ipsum.lorum ipsum dolor.</p>
    </article>
  </section>

  <section class="main-section" id="Function_Declaration">
    <header>Function Declaration</header>
    <article>
      <p>lorum ipsum.lorum ipsum.lorum ipsum dolor.</p>
    </article>
  </section>

  <section class="main-section" id="Reference">
    <header>Reference</header>
    <article>
      <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>
    </article>
  </section>

</main>
              
            
!

CSS

              
                html,
body {
  min-width: 290px;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}
              
            
!

JS

              
                const projectName = 'technical-docs-page';
localStorage.setItem('example_project', 'Technical Docs Page');
              
            
!
999px

Console