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

CSS How to Make a Website Responsive Web Design and Testing Website Testing

Posted by Otto Mejia
Otto Mejia
744 Points

Why do I have 11 errors and 7 warnings when my website is working just fine?

I'm doing the exercises How to Make a Website and I'm checking check the validator on the w3.org website. When I put my HTML it shows me 11 errors and 7 warnings. But my website is working just fine and everything is looking where it's supposed to be. Some of the errors don't even make sense to me, showing me code that I know is correct. Is this form of checking accurate?

<html>
  <head>
    <meta charset="utf-8">
    <title>Otto Mejia | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' 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>Otto Mejia</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>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of code.</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 repitition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/Otto__me" target="_blank">
        <img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icons"></a>
        <a href="https://ottosportfolio.squarespace.com" target="_blank">
        <img src="img/facebook-wrap.png" alt"Facebook logo" class="social-icons"></a>
        <p>&copy; 2015 Otto Mejia.</p>
      </footer>
    </div>
  </body>
</html>
Collin Berg
Collin Berg
33,471 Points

Well one problem is that you don't have a DOCTYPE declared at the beginning. You also don't declare

  1. On your image tags, use an equal sign after the alt tag to create. The way you have it set up, the image will display, but Google and other crawlers wont see the alt text.

Fixing those will clear up your file. Its ok to have some warnings. just read them and be careful.

1 Answer

antonyg
antonyg
21,891 Points
antonyg
antonyg
21,891 Points

As Collin says, adding a doctype for your HTML will enable the W3C validator to check against a specific version of HTML. Changing your first line from

<html>

to

<!doctype html>

will do this.

Most of the errors the W3C validator is picking up are simply because of a missing = between alt and the text you've set, so change

alt"Twitter Logo"```
and

alt"Facebook logo"

to

alt="Twitter Logo"``` and

alt="Facebook logo"

For improved accessibility of these links though, you should use information about the link target as the image alternative text rather than a literal description of the image (I'd also never use the word 'logo' as part of an alt attribute). In these cases, I'd use something like 'Follow me on Twitter/Facebook' instead.

One final error is due to the way the URL for the Google font is needed, so the only way to fix that would be to remove the line that references it. Not a biggie for me, I'd leave it in and not worry about the error.

Otto Mejia
Otto Mejia
744 Points

Ok, sorry guys, but I forgot to mention that I did use the doctype in my file. I removed it before posting it here because I was told by a mod or a user that it isn't necessary to place it in our examples. As for the attributes and other errors, I don't see why I can't use the word logo. Can I use a single word as well?

Otto Mejia
Otto Mejia
744 Points

Ok, sorry guys, but I forgot to mention that I did use the doctype in my file. I removed it before posting it here because I was told by a mod or a user that it isn't necessary to place it in our examples. As for the attributes and other errors, I don't see why I can't use the word logo. Can I use a single word as well?

Otto Mejia
Otto Mejia
744 Points

Ok, so I fixed some things and it tells me the only error I have now is the Google fonts error, which it isn't a big deal. So that's the only error I have. I check my CSS and it has no errors either, just two warnings. but when I take my website to browserstack.com, I put in the URL to test my website on different browsers and it shows me the error you get when trying to launch Workspaces when you aren't logged in. It seems really strange. It keeps showing it to me on all different devices too.

This is what I copy and paste from my browser to browserstack.com http://port-80-61vvigqqnr.treehouse-app.com/