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

              
                <body class="container">
    <nav id="navbar">
      <Header> <h1>How to learn Anything </h1></div>
      <div class="nav1"> <h3>Documentation </h3></div>
      <div class="nav1"> <h3>Where to start </h3></div>
      <div class="nav1"> <h3>How to start</h3> </div>
      <div class="nav1"> <h3>When to start</h3> </div>
      <div class="nav1"> <h3>Why start </h3></div>
      <div class="nav1"> <h3>Who to start with</h3> </div>
      <div class="nav1"> <h3> When to stop</h3></div>
    </nav>
  </header>

  <main id="main-doc">
    <section id="whereToStart">
      <h1> Where to Start<h>
          <p> Start at the beginning, as that is the best place to begin. Always remember to start and the beginning, as the middle or end may be confusing since you have not started at the beginning. From the beginning, you can then progress to the middle and then the end.
          </p> 
            <p> Many people, in a hurry to get to the end, sometimes skip the middle or even the end. This is generally not suggested as the results are typically disasterous particularly when flying planes or operating heavy machinery. Unfortunately, those that start in the middle or end of things may never read this. </p>
          <ul>
            <li>Start at the beginning</li>
            <li>Continue until you reach the middle</li>
            <li>From the middle progress to the end</li>
            <li>Start over if you become confused</li>
          </ul>
    </section>

    <section id="How_to_Start">
      <h1>How to start<h>
    </section>
    <section id="When_to_Start">
      <h1>Why start<h>
    </section>
    <section id="Why_to_Start">
      <h1>Who to start<h>
    </section>
    <section id="Who_to_Start">
      <h1>When to stop<h>
    </section><section id="How_to_Start">
      <h1>How to start<h>
    </section>
    <section id="When_to_Start">
      <h1>Why start<h>
    </section>
    <section id="Why_to_Start">
      <h1>Who to start<h>
    </section>
    <section id="Who_to_Start">
      <h1>When to stop<h>
    </section><section id="How_to_Start">
      <h1>How to start<h>
    </section>
    <section id="When_to_Start">
      <h1>Why start<h>
    </section>
    <section id="Why_to_Start">
      <h1>Who to start<h>
    </section>
    <section id="Who_to_Start">
      <h1>When to stop<h>
    </section>

  </main>

</body>
              
            
!

CSS

              
                .container {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content";
}

#navbar {
  text-align: center;
  grid-area: header;
  background: red;
  display: grid;
  border-right: 2px solid black;
}

@media (min-width: 400px) {
  .container {
    grid-template-columns: 200px 5fr;
    grid-template-areas:
      "header content"
      "header content";
  }
  #navbar {
    text-align: center;
    float: left;
  }
}

.nav1 {
  padding: 1em;
  border-bottom: 2px solid black;
}

#main-doc {
  background: orange;
  grid-area: content;
  display: grid;
}

main p {
  font-size: 15px;
  padding-left: 2em;
  padding-right: 1em;
}

main h1 {
  font-size: 25px;
  padding-left: 1em;
}

main ul {
  font-size: 15px;
  padding-left: 4em;
}



              
            
!

JS

              
                
              
            
!
999px

Console