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>
  <main id="main-doc">
    <div class="navigation">
    <nav id="navbar">
      <header><h1>Web development</h1></header>
      <ul>
        <li><a class="navlink" href="#HTML">HTML</a></li>
        <li><a class="navlink" href="#CSS">CSS</a></li>
        <li><a class="navlink" href="#JavaScript">JavaScript</a></li>
        <li><a class="navlink" href="#Web_forms">Web forms</a></li>
      </ul>
    </nav>
  </div>
  <div class="content">
    <section class="main-section">
      <header class="topic" id="HTML"><h1>HTML</h1></header>
      <p>
        To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
      </p>
      <p>
        Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.
      </p>
      <p>
        After learning HTML, you can then move on to learning about more advanced topics such as:
      </p>
      <ul>
        <li>
          CSS, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)
        </li>
        <li>
          JavaScript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much more.)
        </li>
      </ul>
    </section>
    <section class="main-section">
      <header class="topic" id="CSS"><h1>CSS</h1></header>
      <p>
        Cascading Stylesheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
      </p>
      <p>
        You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first.
      </p>
    </section>
    <section class="main-section">
      <header class="topic" id="JavaScript"><h1>JavaScript</h1></header>
      <p>
        JavaScript is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved.
      </p>
      <p>
        JavaScript is arguably more difficult to learn than related technologies such as HTML and CSS. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:
      </p>
      <ul>
        <li>Getting started with the Web</li>
        <li>Introduction to HTML</li>
        <li>Introduction to CSS</li>
      </ul>
      <p>
        After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:
      </p>
      <ul>
        <li>JavaScript in depth, as taught in our JavaScript guide</li>
        <li>Web APIs</li>
      </ul>
    </section>
    <section class="main-section">
      <header class="topic" id="Web_forms"><h1>Web forms</h1></header>
      <p>
        This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons it's not always obvious how to use them to their full potential. In the articles listed below, we'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.
      </p>
      <p>
        Mastering forms however requires more than just HTML knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls. Therefore, before you look at the other sections listed below we'd recommend that you go away and learn some CSS and JavaScript first.
      </p>
      <p>
        The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.
      </p>
    </section>
  </div>
  </main>
</body>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;500;700&family=Quicksand:wght@300;400;500;700&display=swap');

@media (max-width: 900px) {

  html{
    font-size: 16px; 
  }
  
  .navigation{
    max-width: 15%;
  }
  
  .content{
    float: right;
    max-width: 70vw;
    margin: 0;
    padding: 0;
    font-size: 4px;
  }

  section{
    margin: 0;
    padding: 0;
  }

  
}

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  font-size: 24px;
  width: 100vw;
}

*, ::after, ::before {
  margin: inherit;
  padding: inherit;
  box-sizing: inherit;
}

body{
  background-color: #25242105;
}

.navigation{
  max-width: 30vw;
  display: inline-block;
}

.content{
  display: inline-block;
  float: right;
  max-width: 70vw;
}

#navbar{
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  height: 100%;
  border-right: 1px solid black;
  z-index: 1;
  position: fixed;
}

#navbar header{
  padding: 0 0.2rem;
  max-width: 30vw;
}

#navbar ul{
  padding: 0;
  list-style: none;
}


#navbar ul li{
  padding: 0.2rem 0 0.2rem 0;
  text-align: center;
  border-top: 1px solid black;
}

#navbar ul li:last-of-type{
  border-bottom: 1px solid black;
}

a.navlink{
  color: black;
  text-decoration: none;
}

section{
  margin: 0.5rem 1rem 0.5rem 2rem;
  padding-top: 0.2rem;
}

h1{
  font-family: 'Catamaran', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
}

p{
  padding: 0;
  font-size: 0.7rem;
  color: rgba(37, 36, 33, 0.75);
  margin-bottom: 0.5rem;
}

ul {
  padding: 0;
  font-size: 0.6rem;
  color: rgba(37, 36, 33, 0.75);
}
              
            
!

JS

              
                
              
            
!
999px

Console