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

Vanessa Elliott
Vanessa Elliott
1,742 Points
Posted by Vanessa Elliott
Vanessa Elliott
1,742 Points

Multiple Validation Errors

I used the validator websites as shown in the video, and unlike Nick I received a few errors that I'm not sure what to do with. In the video there were no errors that came up, so I don't really know how to fix them. I did make some adjustments to my site in the sense that I used my own images, colors and sizes to select things, but other than that I'm not sure what I did incorrectly.

HTML validator error screenshot: https://gyazo.com/20ce2d0168731a50fe2139505b058c9e

CSS valildator error screenshot: https://gyazo.com/b435a493458cf4fa42aac963439252da

Snapshot: https://w.trhou.se/2pi4ez33pa

Please let me know if there's anything I can do to fix these errors! Thank you!

2 Answers

nulled
nulled
1,890 Points
nulled
nulled
1,890 Points

I spotted one error on your main.css file: There needs to be a colon after 'padding'. 

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
  white-space: nowrap;
}

In regard to your index.html file, you should use double quotations rather than single quotations. I am skeptical whether that would fix the problem but you should use them to prevent ambiguity. 

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

Also, try to rearrange it this way:

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

Let me know if it works.

Vanessa Elliott
Vanessa Elliott
1,742 Points
Vanessa Elliott
Vanessa Elliott
1,742 Points

The CSS file checked out now, so thanks for catching the missing colon! All but one of the HTML errors were fixed. It's saying that I can't have the | sign in the url, but the url from google for the font has that symbol in it... I dunno how to fix that.

Screenshot: https://gyazo.com/6ab57f221e750e6e6a615e7291358110

nulled
nulled
1,890 Points
nulled
nulled
1,890 Points

Your running the code through a validator. While the validator is correct, it is what Google is expecting to find within the request. In this case - ignore the validator. It's perfectly correct just the way it is.

nulled
nulled
1,890 Points
nulled
nulled
1,890 Points

After some extensive research, you can just do what it suggests. Replace | with its percent-encoding %7C.

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

Let me know if it works.

Vanessa Elliott
Vanessa Elliott
1,742 Points
Vanessa Elliott
Vanessa Elliott
1,742 Points

Thank you very much, this all helped me fix everything!