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

<nav id="navbar">
  <header>Web Accessibility</header>
  <ul>
    <li><a href="#Introduction_to_WCAG" class="nav-link">Introduction to WCAG</a></li>
    <li><a href="#Perceivability" class="nav-link">Perceivability</a></li>
    <li><a href="#Operability" class="nav-link">Operability</a></li>
    <li><a href="#Understandability" class="nav-link">Understandability</a></li>
    <li><a href="#Robustness" class="nav-link">Robustness</a></li>
  </ul>
</nav>
<main id="main-doc">
  <section id="Introduction_to_WCAG" class="main-section">
    <header>Introduction to WCAG</header>
    <p>The <a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank">Web Content Accessibility Guidelines (WCAG)</a> was developed to provide a single shared technical standard for web content accessibility for people with disabilities.</p>
    <p>The guidelines state that content must be perceivable, operable, understandable, and robust.</p>
  </section>
  <section id="Perceivability" class="main-section">
    <header>Perceivability</header>
    <p>The WCAG states that "information and user interface components must be presentable to users in ways they can perceive."</p>
    <p>For example, guideline 1.1 states that text alternatives should be available for all non-text content, so that it may be converted to other formats as necessary, such as Braille, audio/speech, or other languages.</p>
    <p>Other examples of perceivability include the following:
      <ul>
        <li>Captioning and transcripts for audio content</li>
        <li>Audio descriptions for visual content</li>
        <li>Sign Language interpretation for video with audio</li>
        <li>Color alone should not be used to convey information</li>
        <li>Images of text should only be used for decorative purposes or essential unavoidable content, such as a logo</li>
        <li>Scrolling to access content should be one-dimensional (horizontal or vertical, but not both)</li>
        <li>All images need <code>alt=""</code> text with clear, concise descriptions, unless the alt text is present elsewhere on the page or is presented in an alternative format on the same page.</li>
      </ul>
    </p>
  </section>
    
  <section id="Operability" class="main-section">
    <header>Operability</header>
    <p>The WCAG states that "user interface components and navigation must be operable."</p>
    <p>For example, guideline 2.1 states that all functionality should be keyboard accessible.</p>
    <p>Use <code>tabindex</code> to change the tab order of fields on a page. Change tab order carefully, and avoid unintuitive changes to the flow of a document.</p>
    
  </section>
  <section id="Understandability" class="main-section">
    <header>Understandability</header>
    <p>The WCAG states that "information and the operation of user interface must be understandable."</p>
    <p>For example, guideline 3.1 states that content must be readableand understandable. Content should be in human-readable language, with abbreviations and idioms or slang clearly defined.</p>
  </section>
  <section id="Robustness" class="main-section">
    <header>Robustness</header>
    <p>The WCAG states that "content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies."</p>
    <p>For example, guideline 4.1 states that content should be compatible with current and future assistive technologies.</p>
    <p>The use of semantic HTML is a good way to ensure robust code that will remain relevant as technologies evolve. Examples of semantic HTML tags include <code>header</code>, <code>footer</code>, and <code>nav</code>.
  </section>
</main>
              
            
!

CSS

              
                body {
  font-family: sans-serif;
}

#navbar {
  padding-top: 1em;
  padding-left: 1em;
}

#navbar header {
  font-size: 1.5em;
  font-weight: 100;
}

#navbar ul {
  list-style: none;
}

#navbar li {
  padding: 0.4em;
  font-size: 1.2em;
  font-weight: 100;
}

#navbar li a {
  text-decoration: none;
  color: black;
}

header {
  font-weight: bold;
}

@media (min-width: 700px) {
  #navbar {
    position: fixed;
    width: 250px;
    height: 100%;
    top: 0;
    left: 0;
    border-right: solid 1px silver;
  }
  #main-doc {
    position: absolute;
    top: 0px;
    right: 0;
    margin-left: 275px;
    padding-top: 1em;
  }
}
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console