Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Osman Farah
Osman Farah
1,329 Points

validator checks

I don't know what is wrong index.html. When I check the validator something is wrong. This is my code.

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8">
    <title>Abdul Farah | Networking</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800italic' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='css/main.css'>
    <meta name="viewport" content="widht=device-widht, initial-sclace=1.0">
  </head>
<body>
    <header>
      <a href="index.html" id="logo">
      <h1>Abdul Farah</h1>
      <h2>Networking</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>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to create an 80's style of glows.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repetition.</p>
          </a>
        </li>
      </ul>
    </section>
      <footer>
        <a href="http://twitter.com/farahosm"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/farahosm"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Abdul Farah.</p>
     </footer
   </div>
 </body>
</html>
jennifer ray
jennifer ray
7,875 Points

Hi, Try closing the footer at bottom of code like so:
</footer>

2 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

There are a couple things that the validator will flag in your code.

</footer> // Make sure your footer tag is closed with an angle bracket. Minor typo.

// The W3C validator doesn't like the | pipe character. You'll need to encode it with %7C.
<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400,400italic,700,700italic,800italic' rel='stylesheet' type='text/css'>

Edit - It will flag your section element because it does not have a heading. If you would like to eliminate this warning, you'll need to add a heading element or use a div instead of a section tag.

Osman Farah
Osman Farah
1,329 Points
Osman Farah
Osman Farah
1,329 Points

Thanks Rydavim. The problem is gone, but I have issue at Section area. The validator says Warning: Section lacks heading. Please any suggestion.

rydavim
rydavim
18,814 Points

Right, they want you to have a heading element to identify your section. Alternatively, you could change your section element to a div element, which probably won't ask for a heading.

<section> // Or you could change this to a div instead.
  <h2>Example Heading</h2> 
  // All the rest of your code inside the section goes here.
</section>