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

              
                <div class="container-fluid">

  <h1 class="text-center">Quincy Larson</h1>


  <div class="container-fluid quincy"> <img src="https://avatars2.githubusercontent.com/u/985197?v=3" alt="Portrait of Quincy Larson"></img>
  </div>


  <h2 class="text-center">An Inspirational Innovator</h2>

  <body>
    <p>Quincy Larson is a software developer who took up programming after graduate school and created freeCodeCamp as a way to streamline a student's progress from beginner to job-ready.<br> He summarized his motivation for creating freeCodeCamp as follows:
      “freeCodeCamp is my effort to correct the extremely inefficient and circuitous way I learned to code. I’m committing my career and the rest of my life towards making this process as efficient and painless as possible.<br><br> The self-paced curriculum[6]
      involves 1,200 hours of interactive coding challenges and web development projects, plus 800 hours of contributing to open-source[7] projects for nonprofits and is constantly expanded by more challenges and projects.[3] This translates into about
      one year of full-time coding. The curriculum is divided into Front-end development, data visualization, back-end development, and full-stack development. Participants receive a certificate after completing each section.<br><br>

      <br><br>
    </p>
    <ul><b>Ways Quincy has changed the process of learning code:</b>
      <li>By giving people access to quality education that otherwise could not afford it.

        <li>By making the learning process natural and easy.</li>
        <li>By giving people with a busy schedule an option to learn on the own time.
        </li>
        <li>By giving people who don't like a classroom setting other options to learn</li>
        <br>
        <ol>Links to more info about Quincy:


          <li> <a href="https://www.linkedin.com/in/quincylarson/" target="blank">linkedin profile showing his professional experience/qualifications</a></li>
          <li>
            <a href="https://www.quora.com/How-long-has-Quincy-Larson-been-programming" target="blank">A nice biography type post written by Quincy
           </li>
    <li><a href="https://en.wikipedia.org/wiki/FreeCodeCamp" target="blank">More about his magnificent creation, FreeCodeCamp</li>

  
  
</div>
    </body>  
              
            
!

CSS

              
                h1 {
  color: cyan;
  font-family: seriff;
  font-size: 5em;
}

p {
  background-color: gray;
  text-align: center;
  font-size: 135%;
}

ul {
  background-color: cyan;
  font-size: 110%;
  font-style: italic;
}

.quincy {
  margin: auto;
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

h2 {
  color: gray;
}

              
            
!

JS

              
                
              
            
!
999px

Console