Hello all!
thank you for this great program. I have been staring at this for hours, and haven’t been able to move past. I’ve tried swapping out the words with place-holder text to ensure easier matching, I’ve tried putting it into note-pad++ and searching for strings to make sure they line up… not even sure I’m barking up the right tree anymore!
" Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s."
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>technical documentation page</title>
</head>
<body>
<nav id="navbar">
<header><span class="center">navigation bar</span></header>
<ul>
<li>
<a class="nav-link" id="" href="#Accessibility">Accessibility</a>
</li>
<li>
<a class="nav-link" id="" href="#What-Is-Accessibility">What Is Accessibility</a>
</li>
<li>
<a class="nav-link" id="" href="#HTML-A-Good-Basis-For-Accessibility">HTML A Good Basis For Accessibility</a>
</li>
<li>
<a class="nav-link" id="" href="#CSS-And-JavaScript-Accessibility-Best-Practices">CSS And JavaScript Accessibility Best Practices</a>
</li>
<li>
<a class="nav-link" id="" href="#WAI-Basics">WAI Basics</a>
</li>
<li>
<a class="nav-link" id="" href="#Accessible-Multimedia">Accessible Multimedia</a>
</li>
<li>
<a class="nav-link" id="" href="#Understanding-The-Web-Content-Accessibility-Guidelines">Understanding The Web Content Accessibility Guidelines</a>
</li>
<li>
<a class="nav-link" id="" href="#Introduction-To-Color-And-Accessibility">Introduction To Color And Accessibility</a>
</li>
<li>
<a class="nav-link" id="" href="#Keyboard-Navigable-JavaScript-Widgets">Keyboard Navigable JavaScript Widgets</a>
</li>
<li>
<a class="nav-link" id="" href="#ARIA">ARIA</a>
</li>
<li>
<a class="nav-link" id="" href="#Mobile-Accessibility-Checklist">Mobile Accessibility Checklist</a>
</li>
<li>
<a class="nav-link" id="" href="#Cognitive-Accessibility">Cognitive Accessibility</a>
</li>
<li>
<a class="nav-link" id="" href="#Accessibility-For-Seizure-Disorders">Accessibility For Seizure Disorders</a>
</li>
<li>
<a class="nav-link" id="" href="#See-Also">See Also</a>
</li>
</ul>
</nav>
<div id="bigdiv">
<main id="main-doc">
<section id="Accessibility" class="main-section">
<header>Accessibility</header>
<p>Accessibility (often abbreviated to A11y — as in, "a", then 11 characters, and then "y") in web development means enabling as many people as possible to use websites, even when those people's abilities are limited in some way.
</p>
<p>For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible, no matter an individual's physical and cognitive abilities and how they access the web.
</p>
<p>"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.<a href="https://www.w3.org/standards/webdesign/accessibility">(W3C - Accessibility)</a>
</p>
</section>
<hr />
<section id="What-Is-Accessibility" class="main-section">
<header>What Is Accessibility</header>
<p>A great deal of web content can be made accessible just by making sure that the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</p>
</section>
<hr>
<section id="HTML-A-Good-Basis-For-Accessibility" class="main-section">
<header>HTML A Good Basis For Accessibility</header>
<p>A great deal of web content can be made accessible just by making sure that the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</p>
</section>
<hr>
<section id="CSS-And-JavaScript-Accessibility-Best-Practices" class="main-section">
<header>CSS And JavaScript Accessibility Best Practices</header>
<p>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences. They can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</p>
</section>
<hr>
<section id="WAI-Basics" class="main-section">
<header>WAI Basics</header>
<p>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</p>
</section>
<hr>
<section id="Accessible-Multimedia" class="main-section">
<header>Accessible Multimedia</header>
<p> Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so that they can be understood by assistive technologies and their users. This article shows how. </p>
</section>
<hr />
<section id="Understanding-The-Web-Content-Accessibility-Guidelines" class="main-section">
<header>Understanding The Web Content Accessibility Guidelines</header>
<p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p>
</section>
<hr>
<section id="Introduction-To-Color-And-Accessibility" class="main-section">
<header>Introduction To Color And Accessibility</header>
<p>This article discusses our perception of light and color, provides a foundation for the use of color in accessible designs, and demonstrates best practices for visual and readable content.</p>
</section>
<hr>
<section id="Keyboard-Navigable-JavaScript-Widgets" class="main-section">
<header>Keyboard Navigable JavaScript Widgets</header>
<p>Until now, web developers who wanted to make their styled <div>- and <span>-based widgets accessible have lacked proper techniques. Keyboard accessibility is part of the minimum accessibility requirements, which a developer should be aware of.</p>
</section>
<hr>
<section id="ARIA" class="main-section">
<header>ARIA</header>
<p>This is a collection of articles to learn how to use Accessible Rich Internet Applications (ARIA) to make your HTML documents more accessible.</p>
</section>
<hr>
<section id="Mobile-Accessibility-Checklist" class="main-section">
<header>Mobile Accessibility Checklist</header>
<p>With web access on mobile devices being so popular and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</p>
</section>
<hr>
<section id="Cognitive-Accessibility" class="main-section">
<header>Cognitive Accessibility</header>
<p>This article explains how to ensure that the web content you're creating is accessible to people with cognitive impairments.</p>
</section>
<hr>
<section id="Accessibility-For-Seizure-Disorders" class="main-section">
<header>Accessibility For Seizure Disorders</header>
<p>Some types of visual web content can induce seizures in people with certain brain disorders. This article helps you understand the types of content that can be problematic and find tools and strategies to help you avoid them.</p>
</section>
<hr>
<section id="See-Also" class="main-section">
<header>See Also</header>
<ol>
<li><code>Free Code Camp</code></li>
<li><code>Free Code Camp</code></li>
<li><code>Free Code Camp</code></li>
<li><code>Free Code Camp</code></li>
<li><code>Free Code Camp</code></li>
</ol>
<p>PUT A LINK HERE BEFORE SUBMITTING DUMMY</p>
<p>PUT A LINK HERE BEFORE SUBMITTING DUMMY</p>
</section>
<hr>
<p> Information cited directly from <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility"> MDN </a> This page has been made purely as a demonstration of coding skills gained during this program. thank you free code camp and MDN!!</p>
</main>
</div>
</body>
</html>
I still have some placeholder text in there, so excuse any weird text entries :D thank you for your guidance!
