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

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

<nav id="navbar">

  <header> Website Necessities</header>

  <ul>

    <a class="nav-link" href="#overview" rel="internal">
      <li>Overview</li>
    </a>

    <a class="nav-link" href="#domain_name" rel="internal">
      <li>Domain Name</li>
    </a>

    <a class="nav-link" href="#hosting" rel="internal">
      <li>Hosting</li>
    </a>

    <a class="nav-link" href="#web_pages" rel="internal">
      <li>Web Pages</li>
    </a>

    <a class="nav-link" href="#end" rel="internal">
      <li>End</li>
    </a>

  </ul>
</nav>

<main id="main-doc">

  <section class="main-section" id="overview">
    <header>Overview</header>
    <article>
      <p> This documentation briefly presents the basics of what you would need if you wanted to have your very own website.</p>
      <p>This documentation assumes you have zero knowledge of websites and will present the very basic concepts needed to understand how a website works.</p>
      <p> By the way, if you see something like this

        <code>this is an different element</code> then this indicates a piece of code or something important I want to bring to your attention. Code is what tells the browsers (such as Internet Explorer, Chrome, or Firefox) what the page should look like.</p>
    </article>
  </section>

  <section class="main-section" id="domain_name">
    <header>Domain Name</header>

    <article>

      <p> The first thing you need is a name. A domain name is something like</p>

      <code>apple.com</code>
      <p> A domain name can be really anything you want it to be; however, there are limitations on the length of a domain name.</p>
      <p> Domain names have a yearly fee. The fee ranges from $1 per year to $50,000 per year. Domain names can have one of many different
        <code> top level domain (TLD) names</code> such as:</p>

      <h3>(Brief) List of common top level domains</h3>

      <ul>

        <li>.com</li>
        <li>.org</li>
        <li>.net</li>
        <li>.edu</li>
      </ul>

      <p>There are also many uncommon TLDs such as:</p>

      <h3>(Brief) List of other TLDs</h3>
      <ul>
        <li>.space</li>
        <li>.movie</li>
        <li>.website</li>
        <li>.me</li>
      </ul>

    </article>
  </section>

  <section class="main-section" id="hosting">
    <header>Hosting</header>
    <article>
      <p>Alright. Now that we have a domain name, we have to tell the name to live somewhere. The place where the name lives is called a server and the company that owns the server is a host.</p>
      <p> There are many, many

        <code>hosting companies</code> In fact, there are so many hosting companies that it's impossible to mention them all. However, here's a brief list of a few:</p>

      <h3>(Brief) List of hosting companies</h3>
      <ul>
        <li>Fast Comet</li>
        <li>A2 Hosting</li>
        <li>Green Geeks</li>
        <li>Fat Cow</li>
      </ul>

    </article>
  </section>

  <section class="main-section" id="web_pages">
    <header> Web Pages</header>

    <article>
      <p> Ok. Now that we have our 1.) name and 2.) hosting, we have to present the website to the public.</p>
      <p> In order to present the actual website to teh public we have to have web pages on the host</p>

      <code>The most common website development tool is called Wordpress.</code>

      <p> Since about 27% of every website on the internet is created using Wordpress, it's worth mentioning here.</p>
      <p>Wordpress is certainly not the ONLY tool that can be used to create a website. Here is a list of other such tools:</p>

      <h3>(Brief) List of website creation tools</h3>
      <ul>
        <li>Joomla!</li>
        <li>Wix</li>
        <li>Drupal</li>
        <li>Google Sites</li>
      </ul>

    </article>

  </section>

  <section class="main-section" id="end">
    <header> End</header>
    <article>
      <p> I hope this brief introduction to how websites function was helpful. The main concept of websites are:</p>

      <ul>
        <li> Domain name points to...</li>
        <li>A hosting provider which is where you put...</li>
        <li> Your web pages</li>
      </ul>
      <p> Feel free to contact me regarding questions about this documentation.</p>

    </article>

  </section>

</main>
              
            
!

CSS

              
                
@import url(https://fonts.googleapis.com/css?family=Roboto);
  
@import url(https://fonts.googleapis.com/css?family=Arimo);
  
html, body {
  line-height: 1.5em;
  background: #fff9f2;
color: #13091a;
  
}

header {
  color: black;
  font-size: 1.8em;
  text-align: center;
  margin: 20px;
  font-family: Roboto;
  line-height: 1.3;
}

#navbar{
  background: #fff9f2;
  top: 0px;
  left: 0px;
  min-width: 200px;
  width: 300px;
  max-width; 300px;
  height: 100%;
  border-right: solid 5px;
  border-color: pink;
  position: fixed;
  text-align: left;
 
}
  
  
#navbar ul{
  overflow-x:hidden;
  overflow-y:auto;
  height: 80%;
}
  


#navbar a{
  text-decoration: none;
  cursor: pointer;
   color: #13091a;
    
}

#navbar li{
  list-style: none;
  padding: 30px;
  font-size: 1.4em;
  position: relative;
  right: 50px;
  
 
  
}


.nav-link{

}

#main-doc{
   position: absolute;
  margin-left: 320px;
  margin-bottom: 120px;
  padding: 20px;
  
}

#main-doc header{
  text-align: left;
    text-transform: uppercase;
  margin-top: 5px;
  padding-top: 25px;


}



.main-section p{
  font-family: Arimo; 
  font-size: 1em;
}

code{
  background: #f1f1f1;
  color: #13091a;
  white-space: pre;
  padding: 1%;
  margin: 1%;
display: block;  
  border-radius: 10px;
  font-size: 1.1em;
  
}

@media only screen and (max-width: 960px) {
  code {
    background: blue;
  }
}

              
            
!

JS

              
                // coded by @ChaituVR 

const projectName = 'technical-docs-page';
localStorage.setItem('example_project', 'Technical Docs Page');


              
            
!
999px

Console