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

              
                <html>
<nav id="navbar">
  <header>Coding Basics</header>
  <li><a href="#Introduction" class="nav-link">Introduction</a></li>
  <li><a href="#HTML" class="nav-link">HTML</a></li>
  <li><a href="#CSS" class="nav-link">CSS</a></li>
  <li><a href="#Java" class="nav-link">Java</a></li>
  <li><a href="#Code" class="nav-link">Code</a></li>
  <li><a href="#Examples" class="nav-link">Examples</a></li>
  <li><a href="#Reference" class="nav-link">Reference</a></li>
</nav>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <p>HTML, CSS and java Script make up the basics of Responsive Web Design. The each control a certain aspect of the full design and work in tandem to bring lines of ones and zeroes into a beautiful webpage. They work together as follows:</p>
    <p>
      <ul>
        <li>HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.</li>
        <li>CSS is used to control presentation, formatting, and layout.</li>
        <li>JavaScript is used to control the behavior of different elements.</li>
      </ul>
    </p>
    <p>Now, let's go over each one individually to help you understand the roles each plays on a website and then we'll cover how they fit together.

      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </p>
  </section>
  <section class="main-section" id="HTML">
    <header>HTML</header>
    <p>
      Once a tag has been opened, all of the content that follows is assumed to be part of that tag until you "close" the tag. When the paragraph ends, I'd put a closing paragraph tag: </p>. Notice that closing tags look exactly the same as opening tags, except there is a forward slash after the left angle bracket. Here's an example:
    <code>
      <p>This is a paragraph.</p>
    </code>
    </p>
  </section>
  <section class="main-section" id="CSS">
    <header>CSS</header>
    <p>CSS is what is used to format the whole webpage. For example, the code below is what allows for the background of this webpage to be grey colored: <br><br>
      <code>html { <br> background-color: grey; <br> }</code>
    </p>
    <p>
      <code></code>
    </p>
  </section>
  <section class="main-section" id="Java">
    <header>Java</header>
    <p>
      <code></code>
    </p>
    <p>
      <code></code>
    </p>
  </section>
  <section class="main-section" id="Code">
    <header>Code</header>
    <p></p>
    <p></p>
  </section>
  <section class="main-section" id="Examples">
    <header>Examples</header>
    <p></p>
  </section>
  <section class="main-section" id="Reference">
    <header>Reference</header>
    <p></p>
  </section>
  <footer></footer>
</main>

</html>
              
            
!

CSS

              
                html {
  background-color: grey;
  font-family: sans-serif, Arial;
}
p {
  font-weight: bold;
}
li {
  list-style-type: none;
}

li a {
  display: block;
}

a:link {
  text-decoration: none;
  color: yellow;
}
a:visited {
  color: yellow;
}
a:active {
  color: blue;
}
.nav-link:hover {
  background-color: black;
  cursor: pointer;
}
.nav-link:active {
  background-color: white;
}

/*navbar style*/
#navbar {
  position: fixed;
  line-height: 1.5;
  min-width: 290px;
  border-right: 3px solid black;
  text-align: center;
  overflow-y: auto;
  height: 100%;
}

nav header {
  border-bottom: 1px solid blue;
  font-size: 34px;
}

#navbar li {
  border-bottom: 1px solid white;
  padding: 10px;
}

#main-doc li {
  line-height: 2;
}

/*navbar style @ max-width:700px*/
@media screen and (max-width: 700px) {
  #navbar {
    position: fixed;
    line-height: 1;
    min-width: 115px;
    border-right: 3px solid black;
    text-align: center;
    overflow-y: auto;
    height: 100%;
  }

  nav header {
    border-bottom: 1px solid blue;
    font-size: 16px;
  }

  #navbar li {
    border-bottom: 1px solid white;
    padding: 10px;
    font-size: 8px;
  }
}

/*content style*/
.main-section header {
  font-size: 42px;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  font-size: 20px;
  text-align: center;
}

/*content style @ max-width:700px*/
@media screen and (max-width: 700px) {
  .main-section header {
    font-size: 16px;
  }

  #main-doc {
    position: absolute;
    margin-left: 140px;
    font-size: 10px;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console