Pen Settings



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


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


Add Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.


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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <script src=""></script>


Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

<nav id="navbar">
    <a class="nav-link" href="#Intro" rel="internal"><li>Intro</li></a>
    <a class="nav-link" href="#Web" rel="internal"><li>Web</li></a>
    <a class="nav-link" href="#VPNs" rel="internal"><li>VPNs</li></a>
    <a class="nav-link" href="#TOR" rel="internal"><li>TOR</li></a>
    <a class="nav-link" href="#what_i_use_and_why" rel="internal"><li>What I use and why</li></a>
    <a class="nav-link" href="#One_Step_further" rel="internal"><li>One Step further</li></a>
    <a class="nav-link" href="#Powershell" rel="internal"><li>Powershell</li></a>
<main id="main-doc">
    <section class="main-section" id="Intro">
            <p>"I don’t care about privacy, if someone wants to watch me then good luck to them, blah blah blah I have nothing to hide so I don’t care."</p>
            <p>I will refer to my favourite blog post on the matter. Please read.</p>
            <a href="" title="why having nothing to hide is irelevant">Robin Doherty - Why having nothing to hide is irrelevant</a>
    <section class="main-section" id="Web">
            <p>First off I would prioritise using Firefox over any other browser. “Mozilla Firefox (or simply Firefox) is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary the Mozilla Corporation.” Firefox Wikipedia</p>
            <p>Open Source means that the code can be viewed and therefore audited / verified by anyone. If for example Mozilla wanted to add some kind of malicious features into their browser, It would probably be noticed within a day and the world would know. Whereas If another closed source browser (such as Google Chrome) was to do the same, It would take some kind of code leak before It became known outside of the business.</p>
            <h2>Third Party Tracking</h2>
            <p>“Third-party tracking—that is, when advertisers and websites track your browsing activity across the web without your knowledge, control, or consent—is an alarmingly widespread practice in online advertising.”</p>
            <li>Ublock Origin</li>
            <li>Privacy Badger</li>
    <section class="main-section" id="VPNs">
            <p>“A virtual private network (VPN) extends a private network across a public network, and enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network. (“In the simplest terms, it creates a secure, encrypted connection, which can be thought of as a tunnel, between your computer and a server operated by the VPN service.”)” </p>
            <p>In a growing age of surveillance more and more people are starting to browse the internet over a VPN. Why? When you connect to the internet you are connecting through your ISP. This ISP can see (and if they want, log) pretty much everything you do. Fortunately, thanks to SSL and HTTPS (such as HTTPS://WWW.FACEBOOK.COM) people are offered a higher level of security and privacy as everything is encrypted. At least when you use a (non-logging) VPN all your traffic Is encrypted and going through them. Of course, they could log everything and some VPN providers do log some information.</p>
    <section class="main-section" id="TOR">
            <p>“Tor is free software for enabling anonymous communication. The name is derived from an acronym for the original software project name “The Onion Router”. Tor directs Internet traffic through a free, worldwide, volunteer overlay network consisting of more than seven thousand relays to conceal a user’s location and usage from anyone conducting network surveillance or traffic analysis.” -</p>
            <p>TOR is a little more of a controversial tool to use these days and that is due to the negative stigma it has regarding the darknet/drugs/child pornography web pages that are hidden there. I am not endorsing these uses of TOR at all, and I strongly believe that the people doing this are exploiting TOR and giving it a bad name. I also strongly believe that the solution to this is not to block it altogether, which Is what some people are asking for. The thing is with this kind of thing is that there are two sides to every coin, in that this technology can be used for good, to rid the world of censorship and promote freedom of speech. A gun can be used for bad but is also often carried around by police officers for protection.</p>
            <h2>How does TOR work</h2>
            <p>When accessing the internet via TOR your web page requests are being passed through many different TOR nodes(computers running the TOR software) before finally getting out onto the open internet. This means that when you browse the internet via TOR your initial request sent from you original IP address is masked via X number of TOR nodes before getting to its destination(the requested web page). If for example you try to access Facebook over TOR (I do not recommend this) Facebook is not going to see your original IP when you login, it is going to see the IP of the final TOR exit node that your request went out from.</p>
    <section class="main-section" id="what_i_use_and_why">
        <header>What I use and why</header>
            <p>Although I am quite bad when it comes to privacy paranoia I am not the worst. I do not think that my browsing habits would interest anyone and I do not necessarily “have anything to hide”, but for me It is purely down to principle that raises my concern regarding privacy (or internet surveillance if you will).</p>
            <li>I try to use a VPN as much as possible.</li>
            <li>I use and open source browser like Mozilla Firefox, In “Private Browsing” mode with the extensions that I have listed above installed and active.</li>
            <li>If accessing anything like Facebook, I open it within its own private browsing tab.</li>
    <section class="main-section" id="One_Step_further">
        <header>One Step further</header>
            <p>Use a live USB stick to browse the internet such as Tails. This way you would have to boot the computer from the USB stick every time you want to browse the internet. You would also have to configure the VPN every time you boot into the live OS this way. When finished restart and detach the USB stick…</p>
            <p>Another way of doing the above would be to use virtual software, something like Virtual Box or VMWare Workstation, and then boot the virtual machine from the ISO media when wanting to access the internet.</p>
            <p>There are two favourite Linux distributions for private internet browsing. Please see this reddit thread for a comparison.</p>
            <a href="">Reddit-Whonix vs Tails</a>
    <section class="main-section" id="Powershell">
            <h2>10 Powershell commands</h2>
            <code>Stop-Process -Name notepad Stop-Process -ID XXXX</code><br>


              @import url('');

html, body {
  font-family: 'OpenSans',Arial,sans-serif;
  line-height: 1.5;

  font-size: 30px;

#navbar {
  position: fixed;
  left: 0px;
  height: 100%; 
  text-align: center;
  border-color: grey;
  margin: 0;
  margin-top: 0px;
  padding: 0;
  background-color: #f1f1f1;
  font-size: 20px;

#navbar ul {
  overflow: auto;

#navbar ul li {
  width: 300px;
  list-style: none;
  padding: 7px;
  border:1px solid;
  border-color: grey;

#navbar li:hover:not(.active) {
    background-color: #555;
    color: white;
#navbar a {
  color: #4d4e53;
  text-decoration: none;

#main-doc {

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    html, body {
      font-size: smaller;
    header {
      font-size: 20px;
    #navbar {
      font-size: x-large;
    #navbar header {
      font-size: xx-large;

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 


/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 


              // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.