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

<div class="navbar navbar-inverse navbar-fixed-left">
  <nav id="navbar">
    <header>Full Stack Rails</header>
    <ul class="navbar-nav navbar-right">
      <li class="nav-item">
        <a class="nav-link" href="#html">HTML</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#css">CSS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#javascript">JavaScript</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#ruby">Ruby</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#ruby_on_rails">Ruby on Rails</a>
      </li>
    </ul>
  </nav>
</div>

<div class="container">
  <main id="main-doc">
    <section class="main-section" id="html">
      <header><h2>HTML</h2></header>
      <p>This section is about html</p>
      <p>Below is some meta sample code from html</p>
      <code>
        &ltcode&gt&ltheader&gt&lth2&gtHTML&lt/h2&gt&lt/header&gt<br>
        &ltp&gtThis section is about html&lt/p&gt<br>
        &ltp&gtBelow is some meta sample code from html&lt/p&gt&ltcode&gt
      </code>
      <ul>
        <li>&ltli&gtthese tags are used for list items&lt/li&gt</li>
        <li>&lth2&gtthis tag is used for a secondary heading&lt/h2&gt</li>
        <li>&ltcode&gtthis tag is used to emphasize code in an html doc&lt/code&gt</li>
        <li>&ltheader&gtthis tag is used to add a header to a section of an html doc&lt/header&gt</li>
        <li>&ltp&gtthis tag is used for paragraphs or otherwise normal text for a page&lt/p&gt</li>
      </ul>
    </section>
    <section class="main-section" id="css">
      <header><h2>CSS</h2></header>
      <p>This section is about CSS</p>
      <p>CSS is the main way to style a page</p>
      <p>example:</p>
      <code>
        @media (max-width: 300px) {<br>
          #main-doc {
            visibility: hidden;
          }
        }
      </code>
      <p>This example hides the content of the page when the viewport is 300px or smaller, as this page does.
    </section>
    <section class="main-section" id="javascript">
      <header><h2>JavaScript</h2></header>
      <p>This section is about JavaScript</p>
      <p>JavaScript is useful for manipulating the DOM and improving the user experience</p>
      <code>
        var x = document.getElementById("javascript");
      </code>
      <p>this code would select the element with an id of "javascript", which happens to be this section of the document, and allow it to be used in javascript functions using the variable "x".</p>
    </section>
    <section class="main-section" id="ruby">
      <header><h2>Ruby</h2></header>
      <p>This section is about Ruby</p>
      <p>Ruby is the most pleasant language to write with ever</p>
      <code>
        def yourFunctionHere<br>
        &nbsp&nbsp# Do stuff<br>
        end
      </code>
      <p>This code would do "stuff" after you wrote the stuff of course</p>
    </section>
    <section class="main-section" id="ruby_on_rails">
      <header><h2>Ruby on Rails</h2></header>
      <p>This section is about Ruby on Rails</p>
      <p>Ruby on Rails is a web development framework for the Ruby language</p>
      <p>To begin making a rails app, after everything is installed, in the terminal type:</p>
      <code>
        rails new myNewRailsApp
      </code>
      <p>This will create a rails app with all the proper folders and default files in place, called myNewRailsApp</p>
    </section>
  </main>
</div>