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 Smith
Steve Smith
4,228 Points
Posted by Steve Smith
Steve Smith
4,228 Points

I am following along and am validating the html using validator.w3.org and am getting errors that Nick did not.

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 https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700 for attribute href on element link: Illegal character in query: not a URL code point. From line 7, column 5; to line 7, column 149 css">↩ <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' 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: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. From line 27, column 7; to line 27, column 15 r">↩ <section>↩

These are the errors Im getting. I removed the pipe "|" from the fonts.google url and that error went away. Not sure if something has changes because Nick had the same code and his validated.

Also we (meaning Nick and I) didn't put any <h2>-<h6> elements to either of our <section> areas and again his validated mine did not. Please advise. Thank you.

FYI: I just used "%7C" instead of pipe "|" and that worked... Its weird that Google gives a url that does not validate.

Aaron Wuerch
Aaron Wuerch
7,024 Points
Aaron Wuerch
Aaron Wuerch
7,024 Points

can you give us your html code. Thanks.

2 Answers

Steve Smith
Steve Smith
4,228 Points
Steve Smith
Steve Smith
4,228 Points

Code is below:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>backslashLabs | Web Development</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' 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>backslashLabs</h1> <h2>Development</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>Caption 1 Lorem ipsum dolor sit amet,</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Caption 2 Lorem ipsum dolor sit amet, usu ad vidisse </p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Caption 3 Lorem ipsum dolor sit amet, usu ad vidisse omittantur</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Caption 4 Lorem ipsum dolor sit amet, usu ad</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Caption 5 Lorem ipsum dolor sit amet, usu ad vidisse omittantur</p> </a> </li>

     </ul>
  </section>
  <footer>
    <a href="http://twitter.com/backslashlabs"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon">
    <p>&copy; 2015 backslashLabs</p>
  </footer>
</div>

</body> </html>

Aaron Wuerch
Aaron Wuerch
7,024 Points
Aaron Wuerch
Aaron Wuerch
7,024 Points

It could be that you chose acouple other font-weight options in the google font, that maybe one of those is conflicting with the w3c validation.

Nicks Google Font link: 'http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800'

Your Google Font link: https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700'

Honestly though, i really wouldnt worry about this too much. As long as it works, all good :)