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
Jim Withington
12,025 PointsStill getting the Google Font validation error even after replacing | with %7C
Not sure what's happening here, but I am still getting a validation error( and another warning). Any help would be amazing, thanks!
Error Line 7, Column 195: Bad value http://fonts.googleapis.com/css?family=Merriweather:400,400italic %7COpen+Sans:400italic,700italic,800italic,400,700 %7CChanga+One:400,400italic for attribute href on element link: Illegal character in query: not a URL code point.
…00italic,400,700 %7CChanga+One:400,400italic' 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jim Withington | Student Rails Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,400italic %7COpen+Sans:400italic,700italic,800italic,400,700 %7CChanga+One:400,400italic' 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>Jim Withington</h1>
<h2>Student Rails Developer</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. (placeholder image for class exercise)</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop. (placeholder image for class exercise)</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 glows. (placeholder image for class exercise)</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes. (placeholder image for class exercise)</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition. (placeholder image for class exercise)</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/jwithy"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://plus.google.com/u/0/+JimWithington/"><img src="img/social-icon-google.png" alt="Google Plus Logo" class="social-icon"></a>
<p>© 2014 Jim Withington.</p>
</footer>
</div>
</body>
</html>
Jim Withington
12,025 PointsRobert Richey Thanks!
And yeah, it's strange because it works fine, but it just doesn't pass the validation test.
1 Answer
Gloria Dwomoh
13,116 PointsWhy do you leave white-spaces before the %7C? If that white-space is really needed try putting %20 in its position for example.
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,400italic%20%7COpen+Sans:400italic,700italic,800italic,400,700%20%7CChanga+One:400,400italic' rel='stylesheet' type='text/css'>
Also for the other error add a heading to your section or change
<section></section> to <div></div>
If you still have problems after this, let us know :)
Jim Withington
12,025 PointsThanks for the tip—they aren't needed.
As far as the "section" part, that was something created within the Treehouse class itself. Does this mean that the way it was created in the class was misleading?
Gloria Dwomoh
13,116 PointsYou are welcome Jim :) I am not sure what that lesson shows is misleading, If it has a headings in the section it is correct. The reasons why I suggested you do these changes are these things, in W3.org - HTML 5.1 Nightly A vocabulary and associated APIs for HTML and XHTML it says "The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element." also "The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline." Because you have no headings in the section area, it gives you that error.
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsNot sure. I copy pasted the link to Google fonts and tested it in my workspace as well as on my own local server - no problems. All I can suggest is start commenting out lines of code until it starts working again; shrink down the link to Google to a single font with one option. When you reach a point that there are no more errors, start working your way back up.