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

              
                <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