Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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>

<main id="main-doc">
  <nav id="navbar">
    <header> <h1> Front End Development <h1> </header>
    <ul id="navlist">
      <li class="navli"> <a href="#HTML_Basics" class="nav-link"> HTML Basics </a> </li>
      <li class="navli"> <a href="#HTML_Continued" class="nav-link"> HTML Continued </a> </li>
      <li class="navli"> <a href="#CSS" class="nav-link"> CSS </a> </li>
      <li class="navli"> <a href="#Flex_Box" class="nav-link"> Flex Box</a> </li>
      <li class="navli"> <a href="#Psuedo_Classes" class="nav-link"> Psuedo Classes </a> </li>
    </ul>
  </nav>
 <body>
  <section class="main-section" id="HTML_Basics">
    <header> <h2> HTML Basics </h2> </header>
   
    <p>HTML stands for Hyper Text Markup Language.</p>
    <p> HTML is one the most popular and widely used markup language. Markup Language is a computer language made up of tags and elements within a document. Think of HTML as the basic building blocks of your webpage, much like the framing of a house. Your basic structure or foundation usually consist of: </p>
    <ul>
      <li>Main Document: Everything the user can see on the page.</li>
      <li>Header: The top of the page with basic information and navigation.</li>
      <li>Body: The main content of you page.</li>
      <li>Sections: Different parts of the main body that make up your page, such as, images, videos, paragraphs etc.</li>
      <li>Footer: Bottom of the page usually containing secondary links and information.
    </ul>
    <p> Tags in HTML are made using <code> "<" at the beggining of the tag and ">" at the end </code> The element youre choosing to make must be nested inside the tag. Many tags need to be closed in order to move on to a new one. After you have input the content of the element you will use the same tag except you will add a / (forward slash) at the in the tag like so: <code>
      <"/"element> 
      </code> 
      </p>
      <p> There are many different types of element tags used. When starting your HTML document you will want to start with <code> < !DOCTYPE html> </code> then add your <code> < html> </code> element tag,as well as the corresponding closing tag to start your project. Your main document content will go in between your HTML opening and closing tags.</p>
  </section>
  <section class="main-section" id="HTML_Continued">
    <header> <h2> HTML Continued </h2> </header>
    <br>
    <p> Some important elements to know for you page:
      <ul>
        <li> <u> header </u> elements. header elements are used for titles in content. Each have different styles and sizes. There is h1-6. This tag requires a closing tag as well and would look like this: <code> < h1> text < /h1> </code>
          <br>
          Here is an example
          <br><br>
          <h1>text</h1>
          </li>
          <br>
          <li> p element tags are used for paragraphs of text these also need to be closed after nesting your content/text inside.
          </li>
          <li> a element tags can be used as links to other pages or content within the page. the a tag uses an "href" attribute to make a link between it and another page or element within the page which uses an id to specify itself in conjunction to the href attribute. Here's an example <code> < a href="#"> text describing the link placed here < /a> </code> 
            </li>
            <li> Different inputs and be added as well. Such as buttons, text boxes for filling out information and checkboxes for choosing options etc. These are called "input" elements. To declare what input you want you need to add the type inside the starting tag like so <code> < input type="button type"> </code> These elements are self closing so you dont need to add a closing tag.
            </li>
            <li> Another important element tag would be the "img" tag. This adds an image to your page. When using an img tag, you need to specify where the image is coming from using the "src" attribute. Be that a website or from a file on youre computer. These are also self closing and appear like so: <code> < img src="url/file location"> </code>
            </li>
           </ul>
    </p>
  </section>
  <section class="main-section" id="CSS">
    <header> <h2> CSS </h2> </header>
    <br>
    <p> CSS stands for Cascading Style Sheets. It is a language used for styling HTML elements and making a webpage more responsive and immersive.</p>
    <p>Your styles and be added inline to your HTML document using the opening and closing "styles" tag. Although it is more reccomended to use a different document for your styles and link it to your html document.</p>
    <p>As mentioned in the <u>a</u> tag point, elements can have id's or classes nested inside your tags. These add an extra specification to the elements you can use to pinpoint them using styles or links. id's are used to directly specify a single element. Where as classes are more used to specify a group of elements. When inputing your element tags you need to add an <em>"id="blank""</em> or <em>"class="blank""</em> to give that element that specification.</p>
    <br>
    <p> Ex. <code> < h1 id="h1"> text < /h1> </code> </p>
      <br>
      <p> In CSS the id's are clarified by using the <u>"#"</u> symbol followed by the name of the id. For classes you use the <u>"."</u> symbol followed by the class name. Or you can just type the element tag you want to edit.</p>
      <br>
      <p> When adding styles to elements in CSS your styling will go between an opening and closing curling bracket "{}". Your style will begin with what you want to change or add to the element followed by a colon ":" then, whats called the value, will be added after followed by a semi-colon ";" to then move on to a new styling attribute.
      <br>
        Ex. <code> .class {text-color:red;} </code> This will change the text color to red.
      </p>
      <p> There are many different style classes that can be used with CSS. Such as:
        <ul>
          <li>text-size</li>
          <li>text-color</li>
          <li>line-height</li>
          <li>background-color</li>
          <li>border-size</li>
          <li>border-type</li>
          <li>font-family</li>
          <li>margin-height and width</li>
          <li>padding-height and width</li>
      </ul>
      <br>
      <p> These are just a few attributes of a plethora of different ways you can style elements.</p>
  </section>
      <section class="main-section" id="Flex_Box">
        <header> <h2> Flex Box </h2> </header>
        <br>
        <p> Flex boxes make arranging your page very easy. Elements are given a container that can be moved around and edited via flex box properties. In your style sheet, setting the "display" to flex will put that element in a container and allow you to more freely change that element.</p>
  </section>
  <section class="main-section" id="Psuedo_Classes">
    <header> <h2>  Psuedo Classes </h2> </header>
    <br>
    Psuedo Classes can take your styling to an even further level. These are clarified in the style sheet and come after the element classes. For instance, if you want to give an element a certain style when hovering over it you can input <code> :hover </code> after the class do give it a psuedo class and make your page more responsive. You can add many small details with psuedo elements.
  </section>
    </body>
</main>
!

CSS 

              
                :root{font-size:16px;
margin:0;
padding:0;}
*{
  margin:0;
}


#navbar{height:100vh;
  float:left;
width:9rem;
  position:fixed;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  background-color:grey; 
}
#navlist{list-style:none;}
.nav-link{padding:10px;
}
a{text-decoration:none;
color:black;
}
.nav-link:hover{
  color:red;}
.navli{padding:10px;
}

.main-section{margin-left:10rem;

line-height:1.5;}
h2{
  padding:10px
}
/* @media (min-width:500px){
  {}
} */
@media (max-width:1000px){
  header{display:none;}
  #navbar{
    bottom:0;
    width:100vw;
  height:3rem;
    position:fixed;
  display:flex;
  background-color:grey;
  flex-direction:row;
  
  }
  .nav-link{
    text-align:center;
    display:flex;
  flex-direction:row;
    margin-left:3rem;
    margin-bottom:5px;
  }
  .nav-link:hover{
    background-color:rgba(0, 0, 0, 0.5);
    border:solid;
    border-color:rgba(0, 0, 0, 0.1);
    border-radius:30px;
    background-opacity:30%;
  }
  #navlist{display:flex;
  flex-direction:row;
  
  }
  .main-section{margin-bottom:10rem;
  }
}



/*#navbar{background-color:gray;
position:fixed;
height:100vh;
width:9rem;
}
.nav-link{
  list-style:none;
  text-decoration:none;
  color:black;
  display:flex;
  padding:10px 0px;
}
.main-section{
  margin-left:10rem;
  padding-top:20px;
  line-height:1.5
}
@media (max-width:720px){
  #navbar{height:9rem;
  width:100vw;
  bottom:0;
  position:fixed;
  display:flex;
  flex-direction:row;}
  .nav-link{
  list-style:none;
  text-decoration:none;
  color:black;
  display:flex;
    flex-direction:row;
  padding:10px 0px;}
  .main-section{
  margin-left:10rem;
  padding-top:20px;
  line-height:1.5
}
}*/
!

JS
!
999px

Console