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>

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
</head>

<body>

  <nav id="navbar">
    <header>Accessible Web Page Design</header>
    <ul>
      <a class="nav-link" href="#Introduction">
        <li tabindex="1">Introduction</li>
      </a>
      <a class="nav-link" href="#Prior_Knowledge">
        <li tabindex="2">Prior Knowledge</li>
      </a>
      <a class="nav-link" href="#Improved_Readability">
        <li tabindex="3">Improved Readability</li>
      </a>
      <a class="nav-link" href="#Semantic_Order">
        <li tabindex="4">Semantic Order</li>
      </a>
      <a class="nav-link" href="#Alternative_Text">
        <li tabindex="5">Alternative Text</li>
      </a>

      <a class="nav-link" href="#Audio_Elements">
        <li tabindex="6">Audio Elements</li>
      </a>
      <a class="nav-link" href="#Figure_Elements">
        <li tabindex="7">Figure Elements</li>
      </a>
      <a class="nav-link" href="#Label_Elements">
        <li tabindex="8">Label Elements</li>
      </a>
      <a class="nav-link" href="#Dates_and_Times">
        <li tabindex="9">Dates and Times</li>
      </a>
      <a class="nav-link" href="#Keyboard_Accessibility">
        <li tabindex="10">Keyboard Accessibility</li>
      </a>

    </ul>
      </nav>

 <main id="main-doc">

    <section class="main-section" id="Introduction">
      <header><h2>Introduction</h2></header>
      <p>Accessibility for all is key to great web page design!<br>Learn how to code your page to be accessible for people with colorblindness and for screen readers. Screen readers convert web content to an audio interface for the user making it <em>super</em> important for us to be clear in our web page designs.</p>
    </section>

    <section class="main-section" id="Prior_Knowledge">
      <header><h2>Prior Knowledge</h2></header>
      <ul>
        <li>Basic Knowledge of HTML and CSS</li>
      </ul>
    </section>

    <section class="main-section" id="Improved_Readability">
      <header><h2>Improved Readability</h2></header>
      <p>
        Make content easier for users to read by using the recommended 4.5 to 1 contrast ratio. <a href="https://webaim.org/resources/contrastchecker/" id="Contrast-Checker">Check to see if your color scheme falls in the range.</a>
      </p>
    </section>

    <section class="main-section" id="Semantic_Order">
      <header><h1>Semantic Order</h1></header>
      <p>Headings, header, footer, nav, main, article, and fieldset are all ways to help screen readers navigate through the web page seamlessly.</p>
      <h3>Headers</h3>
      <p>Headers are used to wrap introductory information and/or navigation links together. It is parented in the body tag.</p>
      <pre><code>
      &lt;body&gt;
      &lt;header&gt;
      &lt;h1&gt;Miss Kitty Fantastico&lt;/h1&gt;
      &lt;nav&gt;
      &lt;ul&gt;
      &lt;li&gt;Wish List&lt;/li&gt;
      &lt;li&gt;Photos&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/header&gt;
      &lt;/body&gt;</code></pre>
      <h3>Nav</h3>
      <p>The nav tag is used to group together navigation links within the site. The code within nav typically appears on every page in the site. It should be nested within the header tag.</p>
      <h3>Headings</h3>
      <p>Each page should only have one h1 tag. Heading 1 carries the most weight and titles 'the meat and potatoes' of the whole page. Headings that follow should be used in a hierarchical system where h3 is nested inside h2.</p>
      <h3>Main</h3>
      <p>The main tag is what houses all the main content in your web page and is located inside the body tag, but after the header tag.
        <p>
          <h3>Articles and Sections</h3>
          <p>When content is independent and self-contained you can use the article tag to wrap it. Typically places that article tags are used are in blog posts, forum posts, or news articles.</p>
          <p>A section tag can be used to group related content.</p>
          <h3>Fieldset and Legend</h3>
          <p>When your page has a form with radio buttons group them together with a fieldset tag. The legend tag is used within the fieldset tag as a descriptor of the grouping. Either tags are needed if the choices are self-explanatory, such as a yes and
            no. Here is an example of how to properly use fieldset and legend tags:</p>
          <pre><code>
  &lt;form&gt;
    &lt;fieldset&gt;
    &lt;legend&gt;Choose one of these three items:&lt;/legend&gt;
    &lt;input id="one" type="radio" name="items" value="one"&gt;
    &lt;label for="one"&gt;Choice One&lt;/label&gt;
    &lt;input id="two" type="radio" name="items" value="two"&gt;
    &lt;label for="two"&gt;Choice Two&at;/label&gt;
    &lt;input id="three" type="radio" name="items" value="three"&gt;
    &lt;label for="three"&gt;Choice Three&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;

</code></pre>
          <h3>Footer</h3>
          <p>Footers ususally contain copyright information and links that are featured at the bottom of a page. They are used within the body tag.</p>
    </section>
    <section class="main-section" id="Alternative_Text">
      <header><h2>Alternative Text</h2></header>
      <p>Alternative text for images allows people with vision impairments hear a description of the image using their screen reader.</p>
      <p>Alternative text is achieved using the alt attribute inside the img tag. Here is an example:</p>
      <pre><code>
      &lt;img src="/image.jpg" alt="Black cat with white markings on fur stretched out waiting for her belly rubs"&gt;</code></pre>
      <p>You may leave out an alternative attribute if the image's caption is description enough.</p>
    </section>
    <section class="main-section" id="Audio_Elements">
      <header><h2>Audio Elements</h2></header>
      <p>Audio elements are used to wrap sound content together. The controls attribute tells to browser to display default buttons, such as play and pause. A transcript should be attached for users with auditory impairments can access the content.</p>
    </section>
    <section class="main-section" id="Figure_Elements">
      <header><h2>Figure Elements</h2></header>
      <p>To make a chart or other visual representation accessible to all users use the figure and figcaption tags. Here is an example:</p>
      <pre><code>
      &lt;figure&gt;
        &lt;img src="cat-poll.jpeg" alt="Poll results of number of cats."&gt;
      &lt;figcaption&gt;
        A poll of how many cats you own shows that most people own 3 cats,      
        followed by 1 cat in second place, 2 cats in third, and 4 or more in last place.
      &lt;/figcaption&gt;
      &lt;/figure&gt;
      </code></pre>
    </section>
    <section class="main-section" id="Label_Elements">
      <header><h2>Label Elements</h2></header>
      <p>Within a form you should label the descriptor of the form choice. The for attribute of the label tag must tie directly to the id of the form element. Here is an example:</p>
      <pre><code>
 &lt;label for="petname"&gt;Pet name&lt;/label&gt;
 &lt;input type="text" name="petname" id="petname"&gt;
 </code></pre>
    </section>
    <section class="main-section" id="Dates_and_Times">
      <header><h2>Dates and Times</h2></header>
      <p>In the newer HTML5, the date field in a form was introduced. It is helpful to add an expected date format in the label or as a placeholder for older browsers still. Here is a code excerpt for using the date attribute:</p>
      <pre><code>
      &lt;label for="field1"&gt;Choose a date: &lt;/label&gt;
      &lt;input type="date" id="field1" name="field1"&gt;
      </code></pre>
      <p>HTML5 also introduced a time element with a datetime attribute. It provides assesstive devices with a standardized way of stating a time. Below are examples datetime formats to use in a time tag and their meanings:
        <ul>
          <li>1999 means the year 1999</li>
          <li>1999-12 means December 1999</li>
          <li>1999-12-01 means 01 December 1999</li>
          <li>12-01 means 01 December any year</li>
          <li>1999-W10 means week 10 of year 1999</li>
          <li>1999-12-01T08:00 means 01 December 1999 at 8am</li>
          <li>1999-12-01 8:00 also means 01 December 1999 at 8am</li>
          <li>1999-12-01 08:30:45 includes minutes and seconds</li>
          <li>1999-12-01 08:30:45.998 inclues minutes, seconds, and milliseconds</li>
          <li>08:00 means 8am</li>
          <li>08:00-03:00 means 8am in Rio de Janeiro (UTC-3 hours)</li>
          <li>08:00+03:00 means 8am in Madagascar (UTC+3 hours)</li>
          <li>P2D means a duration of 2 days</li>
          <li>PT15H10M means a duration of 15 hours and 10 minutes</li>
        </ul>
      </p>
    </section>
  <section class="main-section" id="Keyboard_Accessibility">
    <header>  <h2>Keyboard Accessibility</h2></header>
    <h3>Accesskey</h3>
    <p>Accesskey can be used to give a shortcut to any element. Here is an example:</p>
    <pre><code>
    &lt;a href="https://home.accessiblewebpagedesign.com" accesskey="h"&gt;Home&lt;a&gt;
    </code></pre>
    <h3>Tabindex</h3>
    <p>Tabindex determines the tab order of elements. Certain elements, like links and form controls, in a page are given a predetermined tab order based on the order they appear in the HTML code. Give your desired tab order by designating a number with the tabindex attribute.</p>
  </section>
  </main>

</body>

<footer>
  <span>All information presented in the site was gathered from FreeCodeCamp.org and W3Schools.com.</span>
</footer>

</html>
!

CSS 

              
                body,html {
  font-family: "Raleway", sans-serif;
  background: #FAFAFA;
  color: black;
}


/**-----------
N A V B A R
--------------**/

#navbar {
  position: fixed;
  width: 300px;
  top: 0px;
  left: 0px;
  height: 100%;
 background-color: #ddd;
  border-right: groove;
  border-width: thick;
  border-color: #FF8A8A;
}

#navbar ul{
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  font-size: 22px;
  color: #9E0000;
  padding: 8px;
  list-style: none;
  position: relative;
  left: -10px;
  width: 90%;
  text-align: right;
}

#navbar a {
  cursor: pointer;
  text-decoration: none;
}


#navbar li:focus,
#navbar li:hover {
  color: #9E0000;
  border: groove;
  border-color: #3035FA;
  border-width: 4px;
  font-size: 26px;
}

#navbar header {
  font-family: "Raleway", sans-serif;
  font-size: 24px;
  color: #9e0000;
  background-color: #FAFAFA;
  padding: 8px;
  text-align: right;
  font-weight: bold;
}



/***---------
M A I N - D O C   S T Y L E 
--------*****/

main {
  position: relative;
  margin-left: 325px;
  margin-top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 2;
}


#main-doc h2 {
  font-size: 18px;
  font-family: "Raleway", sans-serif;
  text-decoration: underline;
}

#main-doc h3 {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
padding: 0px;
  
}

#main-doc p,
#main-doc li {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  list-style: none;
}

#main-doc li:before {
  content: "~"; /* Custom bullet */
  padding-right: 8px;
  color: ; 
}

#main-doc a {
  text-decoration: none;
  color: #3035FA;
}

#main-doc a:hover, #main-doc a:focus {
  text-decoration: underline;
  font-weight: bold;
}


.main-section {
  border-bottom: double;
  border-color: #FF8A8A;
  border-width: 10px;
  padding-top: 25px;
}


/***------------
O T H E R   S T Y L I N G S 
------------***/

code {
  background-color: #EDEDED;
 border-radius: 5px;
   display:block;
    text-align: left;
  position: relative;
  padding: 8px;
  margin: 5px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

footer {
  display: float;
  text-align: right;
  padding: 10px;
}

@media screen and (max-width: 800px) {
  #navbar {
  position: relative;
  top: 0px;
  height: 120px;
    width: 100%;
  border-bottom: groove;
  border-width: thick;
  border-color: #FF8A8A;
    border-right: none;
    padding-bottom: 40px;
  }
  
  main {     
  position: relative;
  margin-left: 0px;
    padding: 10px;
    margin-top: 0px;
  }
  
  #navbar header {
    text-align: center;
    border-bottom: solid;
    font-size: 22px;
  }
  
  #navbar li {
    font-size: 20px;
  }
}
!

JS
!
999px

Console