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 How to Make a Website Responsive Web Design and Testing Website Testing

Steve Isaacs
Steve Isaacs
2,112 Points
Posted by Steve Isaacs
Steve Isaacs
2,112 Points

First W3C validation check. Found error but in the video the code passes

W3C said 

<meta charset="utf-8">

is an error, but it's what Nick has in the video, which passes with no errors.

4 Answers

Mitchell Etter
Mitchell Etter
8,603 Points

In this line of code:

 <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

the "|" character that separates fonts is no longer valid according to the W3C, so it needs to be changed to %7C. It should look like this...

 <link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

Hope this helps!

Steve Isaacs
Steve Isaacs
2,112 Points
Steve Isaacs
Steve Isaacs
2,112 Points

Now it validates. Damn, that's crazy. Treehouse should make a note of this in the video.

Logan R
Logan R
22,989 Points
Logan R
Logan R
22,989 Points

The document type could not be determined, because the document had no correct DOCTYPE declaration. The document does not look like HTML, therefore automatic fallback could not be performed, and the document was only checked against basic markup syntax.

Translation: Pretty much you need to add a doctype and incase the < meta > inside a < head >< /head >. W3C is pretty much saying that that one line of code isn't considered HTML. You have a CPU, but you need memory, I/O, etc to make the computer work.

Steve Isaacs
Steve Isaacs
2,112 Points
Steve Isaacs
Steve Isaacs
2,112 Points

It had the doctype, I copy and pasted everything from the current workspace, like Nick does in the video:

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Steve Isaacs</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>Steve Isaacs</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 creat 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"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
          <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Steve Isaacs</p>
        </footer>
    </div>
  </body>
</html>
Sherry Parker
Sherry Parker
9,601 Points
Sherry Parker
Sherry Parker
9,601 Points

Thanks, I had the same issue and figured it was that line of code but wasn't sure which piece was the problem.