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

              
                <!Doctype html>

<html lang="en">
    <head>
        <title>Technical Documentation</title>
        <meta lang="en">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
      
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </head>

    <body>
        <div id="main-body">
            <nav id="navbar">
            
                <img id="logo" src="https://res.cloudinary.com/lucas2308/image/upload/v1543226966/Technical%20Documentation/vuejs-seeklogo.com_xiueye.svg">
            
              
            
                <label for="toggle">&#9776</label>
                <input type="checkbox" id="toggle" >
                  
                <header class="menu">
                    <h1 id="vue-head">Vue.js Documentation</h1>
            
                    <a href="#Introduction" class="nav-link">Introduction</a>
                    <a href="#Getting_Started" class="nav-link">Getting Started</a>
                    <a href="#Declarative_Rendering" class="nav-link">Declarative Rendering</a>
                    <a href="#Conditionals_and_Loops" class="nav-link">Conditionals and Loops</a>
                    <a href="#Handling_User_Input" class="nav-link">Handling User Input</a>
                </header>
            
            </nav>
            <main id="main-doc">
                <section id="Introduction" class="main-section">
                    <header>
                        Introduction
                    </header>
            
                    <p>Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.</p>
            
                    <p>The official guide assumes intermediate level knowledge of the following technoligies:</p>
            
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                        <li>dd</li>
                        <li>ddd</li>
                    </ul>
            
                    <p>If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.</p>
            
                    <code></code>
                </section>
                <section id="Getting_Started" class="main-section">
                    <header>Getting Started</header>
            
                    <p>The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.
                        </p>
            
                    <p>The easiest way to try out Vue.js is using the JSFiddle Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:</p>
            
                    <code>
                        <pre class="vue-code">
                            &lt;!-- development version, includes helpful console warnings --&gt;
                            &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;&lt;/code&lt;
                        </pre>
                    </code>
            
                </section>
                <section id="Declarative_Rendering" class="main-section">
                    <header>Declarative Rendering</header>
            
                    <p>At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:</p>
                    <!-- <p></p> -->
            
                    <code> 
                        <pre class="vue-code">
                            &lt;div id="app"&gt;
                                {{ message }}
                            &lt;/div&gt;
                               
                            var app = new Vue({
                                el: '#app',
                                data: {
                                  message: 'Hello Vue!'
                                }
                            })
                        </pre>
                            
                    </code>
            
                    <p>We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.
                    In addition to text interpolation, we can also bind element attributes like this:
                    </p>
            
                    <code> 
                        <pre class="vue-code">
                            &lt;div id="app-2"&gt;
                                &lt;span v-bind:title="message"&gt;
                                  Hover your mouse over me for a few seconds
                                  to see my dynamically bound title!
                                &lt;/span&gt;
                            &lt;/div&gt;
                               
                            var app2 = new Vue({
                                el: '#app-2',
                                data: {
                                  message: 'You loaded this page on ' + new Date().toLocaleString()
                                }
                            })
                        </pre>
                    </code>
                
            
                </section>
                <section id="Conditionals_and_Loops" class="main-section">
                    <header>Conditionals and Loops</header>
            
                    <p>It’s easy to toggle the presence of an element, too:</p>
            
                    <code>
                        <pre class="vue-code">
                             
                            &lt;div id="app-3"&gt;
                                &lt;span&gt; v-if="seen">Now you see me&lt;/span&lt;
                            &lt;/div&gt;
            
                            var app3 = new Vue({
                             el: '#app-3',
                             data: {
                                seen: true
                             }
                            })
            
                        </pre>
                    </code>
            
                    <p>Go ahead and enter <code>app3.seen = false</code> in the console. You should see the message disappear.
                        This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.
                        </p>
                    
            
                </section>
                <section id="Handling_User_Input" class="main-section">
                    <header>Handling User Input</header>
            
                    
            
                    <p>To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances:</p>
            
            
                    <code>
                        <pre class="vue-code">
                             
                            &lt;div id="app-5"&gt;
                                &lt;p&gt;{{ message }}&lt/p&gt;
                                &lt;button v-on:click="reverseMessage"&gtReverse Message&lt;/button&gt;
                            &lt;/div&gt;
            
                            var app5 = new Vue({
                                el: '#app-5',
                                data: {
                                    message: 'Hello Vue.js!'
                                },
                                methods: {
                                    reverseMessage: function () {
                                        this.message = this.message.split('').reverse().join('')
                                    }
                                }
                             })
            
                        </pre>
                    </code>
            
                    <p id="note">Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.</p>
                    
            
                </section>
            </main>
        </div id="main-body">
        <footer id="footer">
                <div id="social">
                    <ul class="icons">
                        <li><a href=""><i class="fab fa-free-code-camp"></i></a></li>
                        <li><a href="https://github.com/Lucas2308"><i class="fab fa-github"></i></a></li>
                        <li><a href="https://www.linkedin.com/in/lucas-okafor-29227a13a/"><i class="fab fa-linkedin"></i></a></li>
                    </ul>
                </div>

                <div class="copyright">
                        Designed by Lucas Okafor.
                </div>
    
            </footer>
    </body>

</html>
              
            
!

CSS

              
                html, body {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

html {
    font-family: helvetica, sans-serif;
}

#logo {
    width: 3.125em;
    padding: 0.313em;
}


.vue-code {
    background: gray;
    border-radius: 2px;
    
}

label, #toggle {
    display: none;
}

#footer {
    background: #59CFEB;
    padding: 20px 0;
    margin-top: 40px;
    position: fixed;
}

#social {
    text-align: center;
    padding: 10px 0;
}

.copyright {
    text-align: center;
}

#social li {
    display: inline-block;
    margin-right: 10px;
}



/* MEDIA QUERIES */

@media (min-width: 769px) {

    #main-body {
        display: grid;
        grid-template-columns: minmax(250px, auto) 1fr;
        grid-template-areas: "navbar maindoc";
        grid-gap: 5px;
        line-height: 1.4em;
    }

   

    #navbar {
        grid-area: navbar;
        position: fixed;
    }

    #navbar #logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 50px 0 20px 0px;
        width:  80px;
    }

    #navbar header {
        text-align: center;
    }



    #navbar a {
        display: block;
        border-bottom: 1px solid #eaeaeb;
        margin: 10px 0;
        padding: 5px;
        text-decoration: none;
        color: #2F2E2E;
    }



    #main-doc {
        grid-area: maindoc;
        padding: 20px;
    }

    #main-doc *:not(header) {
        font-size: 0.98em;
    }

    #main-doc header {
        font-size: 1.3em;
        font-weight: bold;
    }

    .menu > h1 {
        font-size: 1.3em;
        font-weight: bold;
    }

}


@media (min-width: 320px) and (max-width:768px) {


    body {
        font-size: 0.800em;
        line-height: 1.5em;
    }


   #logo{
    width: 50px;
    padding: 5px;
   }

   label {
       font-size: 26px;
   }

   label, #toggle {
       float: right;
       margin-top: 19px;
   }


    
    #main-doc {
        width: 95%;
        margin: 0 auto;
    }




   label {
       display: block;
       cursor: pointer;
   }

   #toggle {
       display: none;
   }

   .menu {
       text-align: center;
       width: 100%;
       margin-bottom: 25px;
   }

   
   .menu a {
    clear: right;
    display: block;
    text-decoration: none;
    color: #2F2E2E;
    border-bottom: 1px solid #eaeaeb;
    padding: 10px;
    display: none;
    
    
}

   header {
    font-size: 1.1em;
    font-weight: bold;
   }
   
    .vue-code {
     overflow: hidden;
     white-space: pre-wrap;
     
   }

    #toggle:checked  ~ .menu a {
        display: block;
    }  
}
              
            
!

JS

              
                
              
            
!
999px

Console