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 Maya Liberman
.a{fill-rule:evenodd;}techdegree seal-36
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 Points

I have bugs in my HTML codes. I have tested it in the W3 validator. https://validator.w3.org/nu/#l8c142

How can I fix these bugs?

https://validator.w3.org/nu/#l8c142

Maya Liberman
.a{fill-rule:evenodd;}techdegree seal-36
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 Points

Here what is wrong:

Info: The Content-Type was text/html. Using the HTML parser. Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support. Error: Bad value http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One for attribute href on element link: Illegal character in query: not a URL code point. From line 8, column 5; to line 8, column 142 css">↩ <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' rel='stylesheet' type='text/css'>↩ <l 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: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. From line 32, column 7; to line 32, column 15 r">↩ <section>↩
Error: No space between attributes. At line 73, column 101 ="Facbook logo"class="social-i Error: Stray start tag style. From line 80, column 1; to line 80, column 7

↩</html>↩<style>↩↩ Fatal Error: Cannot recover after last error. Any further errors will be ignored. From line 80, column 1; to line 80, column 7 ↩</html>↩<style>↩↩

Here is my code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Nick Pettie | Designer </title> <link rel="stylesheet" href="css/normlize.css"> <link rel="stylesheet" href="css/normlize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' 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> Nick Pettite</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>Eperimentation with color and texture.</p>  
      </a>
    </li>

 <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Trying to create a great style</p>  
      </a>
    </li> 
     <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>Photo shop is the King</p>  
      </a>
    </li>
     <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Creating website is a challange</p>  
      </a>
    </li>
     <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Eperimentation with color and texture.</p>  
      </a>
    </li>

          </ul>
  </section>

  <footer>
   <a href="http://twitter.com/nickrp"> <img src="img/twitter-wrap.png" alt="Twitter logo"
                                          class="social-icon">
     </a>
   <a href="http://facebook.com/nickpettit"> <img src="img/facebook-wrap.png" alt="Facbook logo" class="social-icon"></a>

<p> &copy; 2014 Nick Pettit.</p>

</footer> </div> </body>

</html>

2 Answers

jeffreyl
jeffreyl
2,021 Points
jeffreyl
jeffreyl
2,021 Points

Hey Maya!

I had the same problem the other day!

Replace the | in your google font link to %7c so your code would read:

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

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

This is because | (the vertical bar) does not parse to unicode and instead when replaced with %7c will give same result and no error!

Hope that helps, Elena :)

jeffreyl
jeffreyl
2,021 Points
jeffreyl
jeffreyl
2,021 Points

Just if you want to read a bit more for yourself Maya I included the link Validator Error Explanation where I got the answer.