Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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,121 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

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.

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?

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?

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/