<div id="grid-container">
  <nav id="navbar">
    <header>JavaScript Docs</header>
    <ul>
      <li><a href="#Introduction" class="nav-link">Introduction</a></li>
      <li>
        <a href="#What_you_should_already_know" class="nav-link">What you should already know</a>
      </li>
      <li><a href="#Hello_world" class="nav-link">Hello world</a></li>
      <li><a href="#Variables" class="nav-link">Variables</a></li>
      <li>
        <a href="#Declaring_variables" class="nav-link">Declaring variables</a>
      </li>
      <li><a href="#Variable_scope" class="nav-link">Variable scope</a></li>
    </ul>
  </nav>

  <main id="main-doc">
    <div id="main-div">
      <section id="Introduction" class="main-section">
        <header>Introduction</header>
        <article>
          <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>
          <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>
            <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>
          </ul>
        </article>
      </section>
      <section id="What_you_should_already_know" class="main-section">
        <header>What you should already know</header>
        <article>
          <p>This guide assumes you have the following basic background:</p>
          <ul>
            <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>
          </ul>
        </article>
      </section>
      <section id="Hello_world" class="main-section">
        <header>Hello world</header>
        <article>
          <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>
        </article>
      </section>
      <section id="Variables" class="main-section">
        <header>Variables</header>
        <article>
          <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, underscore
            (_), 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>
        </article>
      </section>
      <section id="Declaring_variables" class="main-section">
        <header>Declaring variables</header>
        <article>
          <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>
            This syntax can be used to declare a block scope local variable.
            See Variable scope below.
          </p>
        </article>
      </section>
      <section id="Variable_scope" class="main-section">
        <header>Variable scope</header>
        <article>
          <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>
        </article>
      </section>
    </div>
  </main>
</div>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 300px;
  background-color: rgb(255, 255, 255);
}
div#grid-container {
  display: grid;
  grid-template-columns: 350px auto;
}
nav#navbar {
  border-right: 0.2rem solid lightgrey;
}
p,
li,
.nav-link {
  color: rgb(77, 78, 83);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif, Courier,
    monospace;
  font-size: 1.1em;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav li {
  border-bottom: 0.06rem solid black;
  cursor: pointer;
  padding: 1rem;
  text-align: center;
}
.nav-link {
  text-decoration: none;
  font-weight: 600;
}
header {
  font-size: 1.5em;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

div#main-div {
  overflow-y: scroll;
  height: 621px;
  margin: 1.5rem;
}
article li {
  margin: 0 0 1rem 1rem;
}
nav header {
  padding: 1rem;
  font-weight: 600;
  border-bottom: 0.08rem solid black;
}
code {
  display: block;
  background-color: lightgrey;
  padding: 1rem;
  text-align: left;
  font-size: 1.1rem;
  line-height: 3;
  border-radius: 5px;
  margin-left: 1rem;
  font-weight: 600;
  letter-spacing: 0.06rem;
  word-wrap: break-word;
}
@media only screen and (max-width: 815px) {
  div#grid-container {
    grid-template-columns: auto;
  }
}