JavaScript JavaScript and the DOM Getting a Handle on the DOM Practice Selecting Elements

This entire question seems to be out of place from the lesson. The lesson was on querySelectorAll(). Completely lost

This entire lesson was on the querySelectorAll(). It assumes that I should know how to use the descendant selectors, but It was not apart of this JAVA script track. It links to a video that just says to place a " " in between decendent elements. Please help me get to the next lesson. Hopefully someone can fix this challenge so it is more related to the information present in the video

js/app.js
let navigationLinks = document.querySelector;
let galleryLinks;
let footerImages;
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

3 Answers

Rodrigo Novaes
Rodrigo Novaes
9,628 Points

A lot of people seem to get stuck on this challenge, myself included. There is another thread that I gave the straight answer, but the mods don't seem to like that, so I'll try to explain.

1 question: you'll need to select the elements nav and links. ('nav a'); 2 question: you'll need to select the ID and the links. ('#gallery a'). 3 question: you'll need to select the the image nested in the footer ('footer img')

Hope that helps.

Will Baker
Will Baker
3,878 Points

Thanks for the help, and the original asker of the question is correct. This is a massive oversight by the staff here, really should've recommended that css selectors be completed before even talking about this.

Indeed. Throwing in a new lesson (and a confusing one in the context), in the middle of an exercise just seems wrong. The pre-requisite list also seems to be missing.

Thank you so much!