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

Lynda Irawaty
Lynda Irawaty
2,948 Points
Posted by Lynda Irawaty
Lynda Irawaty
2,948 Points

I also have few errors validating my html, can anyone please help me? Dunno what's wrong? https://w.trhou.se/tv3pofszbz

I have few errors on my index.html code, tried to fix it but I dunno how to fix them?

Error Line 11, Column 3: Saw < when expecting an attribute name. Probable cause: Missing > immediately before. </head> ✉ Error Line 11, Column 5: A slash was not immediately followed by >. </head> ✉ Warning Line 11, Column 9: Attribute < is not serializable as XML 1.0. </head> ✉ Error Line 11, Column 9: Attribute < not allowed on element meta at this point. </head> Attributes for element meta: Global attributes name http-equiv content charset Error Line 11, Column 9: Attribute head not allowed on element meta at this point. </head> Attributes for element meta: Global attributes name http-equiv content charset Warning Line 27, Column 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section> ✉ Error Line 56, Column 99: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Warning Line 56, Column 120: Attribute logo" is not serializable as XML 1.0. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Error Line 56, Column 120: Attribute logo" not allowed on element img at this point. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> Attributes for element img: Global attributes alt src crossorigin usemap ismap width height Error Line 57, Column 102: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Warning Line 57, Column 123: Attribute logo" is not serializable as XML 1.0. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Error Line 57, Column 123: Attribute logo" not allowed on element img at this point. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>

Rich Bagley
Rich Bagley
25,869 Points

Hi Lynda,

Can you post your code please?

Thanks

-Rich

Lynda Irawaty
Lynda Irawaty
2,948 Points
Lynda Irawaty
Lynda Irawaty
2,948 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lynda Irawaty | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,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>Lynda Irawaty</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>Lada Putih Cafe Delivery Menu</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Huawei One Art World E-invite</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-03.jpg">
              <img src="img/numbers-03.jpg" alt="">
              <p>Bloomberg Summer Picnic Poster</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-04.jpg">
              <img src="img/numbers-04.jpg" alt="">
              <p>Audi Hong Kong Moodboard</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

3 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Lynda,

You look to be missing a closing bracket on this line:

<meta name="viewport" content="width=device-width, initial scale=1.0"

Can you add that and retry the validation please?

Thanks

-Rich

EDIT: Following your additional code you look to be missing the question mark (?) between css and family so:

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

would become:

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,700,800,400' rel='stylesheet' type='text/css'>
Lynda Irawaty
Lynda Irawaty
2,948 Points
Lynda Irawaty
Lynda Irawaty
2,948 Points

Thanks Rich, I have fixed that and revalidate but it still saying these errors

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lynda Irawaty | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css family=Open+Sans:400italic,700italic,800italic,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>Lynda Irawaty</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>Lada Putih Cafe Delivery Menu</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Huawei One Art World E-invite</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-03.jpg">
              <img src="img/numbers-03.jpg" alt="">
              <p>Bloomberg Summer Picnic Poster</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-04.jpg">
              <img src="img/numbers-04.jpg" alt="">
              <p>Audi Hong Kong Moodboard</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

Validation Output: 5 Errors

Warning This interface to HTML5 document checking is deprecated. Use the Nu Html Checker at https://validator.w3.org/nu/ directly instead.

Error Line 7, Column 141: Bad value http://fonts.googleapis.com/css family=Open+Sans:400italic,700italic,800italic,700,800,400 for attribute href on element link: Illegal character in path segment: not a URL code point. …ns:400italic,700italic,800italic,700,800,400' rel='stylesheet' type='text/css'> Syntax of URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. Warning Line 27, Column 15: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section> ✉ Error Line 56, Column 99: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Warning Line 56, Column 120: Attribute logo" is not serializable as XML 1.0. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> ✉ Error Line 56, Column 120: Attribute logo" not allowed on element img at this point. …han"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a> Attributes for element img: Global attributes alt src crossorigin usemap ismap width height Error Line 57, Column 102: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Warning Line 57, Column 123: Attribute logo" is not serializable as XML 1.0. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> ✉ Error Line 57, Column 123: Attribute logo" not allowed on element img at this point. …y"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a> Attributes for element img: Global attributes alt src crossorigin usemap ismap width height

Rich Bagley
Rich Bagley
25,869 Points

Hi Lynda,

I've updated my answer above. Could you try that please?

Thanks

-Rich

Lynda Irawaty
Lynda Irawaty
2,948 Points
Lynda Irawaty
Lynda Irawaty
2,948 Points

Rich, Thank you for helping me :)

Turned out I also was missing " at my footer. 

      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt=Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt=Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

so I have fixed it

      <footer>
        <a href="http://twitter.com/monkichichan"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/lyndairawaty"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Lynda Irawaty.</p>
      </footer>
    </div>
  </body>
</html>

and it worked great :)

Rich Bagley
Rich Bagley
25,869 Points

No problem :)