<!-- Original code and discussion on dev.to here : https://dev.to/njericooper/7-must-haves-for-html-in-your-site-template-578i -->

<!-- NAV element doesn't need role="navigation" -->
<nav>
  <!-- role="menu" should be reserved for application menus, not site nav -->
  <ul>
    <li>
      <!-- TABINDEX is given to A elements automatically and does not need to be set -->
      <!-- ALT text is for images; if you want to include more info for screenreaders other than the URL, you could use aria-label here? I wouldn't, however, use it when it just repeats the link text -->
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#who" aria-label="Who is Njeri Cooper?">Who</a>
    </li>
    <li>
      <a href="#what" aria-label="What does Njeri Cooper Do?">What</a>
    </li>
    <li>
      <a href="#contact" aria-label="Contact Njeri Cooper">Contact</a>
    </li>
  </ul>
</nav>
<!-- if you're going to use role="main", might as well use a MAIN element instead? -->
<main>
  <section id="who">
    <!-- Additional DIV inside the SECTION is likely unnecessary? -->
    <!--  This markup was missing an H1 element; ideally, no heading levels would be skipped -->
    <h1>Who TF is Coop?</h1>
    <p>Njeri Cooper is a front end web and iOS developer. Lorem Khaled Ipsum is a major key to success.</p>
    <p>They don’t want us to win. I’m giving you cloth talk, cloth. Special cloth alert, cut from a special cloth.</p>
  </section>
  <section class="section section-2" id="what" background="https://vignette.wikia.nocookie.net/steven-universe/images/e/ed/Steven_the_Swordfighter_Cloud_Temple_Background.jpg/" loading="lazy" alt="Cloud Temple Image From Steven Universe">
    <h2>What</h2>
    <!-- This used to be a DIV with a list of links, but should instead be an unorderd list? -->
    <ul>
      <li>
        <!-- Same notes about TABINDEX and ALT text -->
        <a href="http://github.com/njericooper" aria-label="Njeri's Github">git</a>
      </li>
      <li>
        <a href="https://dev.to/njericooper" aria-label="Njeri's tech blog">dev to</a>
      </li>
      <li>
        <!-- The class "last" may be unnecessary and could be achieved via CSS pseudoclasses, e.g. .links li:last-of-type ? -->
        <a href="https://twitter.com/njericooper" aria-label="Njeri's Twitter" tabindex="6">twitter</a>
      </li>
    </ul>
  </section>
</main>
<!-- This element was repeated in your markup <div class="email-container"> -->
<!-- Instead of a DIV, this could be an ASIDE element? -->
<aside>
  <!-- A FORM element doesn't need role="form" -->
  <form>
    <!-- If this button is going to toggle the DIV below it, you're going to want to introduce additional ARIA attributes: aria-controls, aria-expanded and aria-hidden -- You can even use these instead of the class names like "shown" -->
    <!-- Or, alternately, you can hide the trigger button and just display the email form by default for screenreaders, eliminating an interaction -->
    <button type="button" id="trigger" aria-controls="input-container" aria-expanded="false">Notify me</button>
    <div id="input-container" aria-hidden="true">
      <!-- If your focus is accessibility, you want to make sure to include LABELs with FOR attributes conntected to all your INPUTs -->
      <label for="notify-email">Email address</label>
      <input id="notify-email" type="text" placeholder="E-mail">
      <!-- role="button" is default for the BUTTON element -->
      <!--  BUTTON elements get tabindex by default -->
      <!-- If this submits the form, the type should be submit? -->
      <button type="submit">Send</button>
    </div>
    <!-- Assuming the success message starts hidden -->
    <div id="success" hidden>Thank you!</div>
  </form>
</aside>
<!-- The ROLE attribute here is 👍🏻 -- it is not consistently applied to the FOOTER element by screenreaders and other tools  -->
<footer class="footer" role="contentinfo">
  <p>©2019 OG Codes</p>
</footer>