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

Shen Jasmine
Shen Jasmine
1,313 Points

It seems that the font I am using is not correct

Error: Bad value https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800 for attribute href on element link: Illegal character in query: | is not allowed. From line 7, column 11; to line 7, column 149 <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'><!--in

3 Answers

Hi Shen,

Can you paste the code from the head of the site you are doing?

Shen Jasmine
Shen Jasmine
1,313 Points

Hi Mark,

I do, but I don't understand why the "|" is not allowed? attribute href on element link: Illegal character in query: | is not allowed.

Thank you for replying

Can you paste the head of the site? I tried the code above and it works fine for me on my wordpress site.

Shen Jasmine
Shen Jasmine
1,313 Points

<head> <meta charset="utf-8"> <title>Jasmine Shen | Artist </title> <link rel="stylesheet" href="css/normalize.css"> <!--to reset the layout--> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'><!--in here--> <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>

Oh sorry you mean this? ^^' It actually works well for me too, but I was wondering why the Html Validator detected this as an Error Bad value?

Ahh ok, makes more sense now.

it is because the url ineeds to encode the | so the validator flags it ( %7C ) replacing any | with %7C will allow it to pass the check.

<link href='https://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
Shen Jasmine
Shen Jasmine
1,313 Points

Aah it works now! Thank you very much! :D

Charlie Figueroa
Charlie Figueroa
2,043 Points

Here's my code:

      ```html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Charlie Figueroa | Junior Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Anton|Courgette|Orbitron|Kaushan+Script|Sigmar+One|Bangers|Permanent+Marker' 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>Charlie Figueroa</h1> <h2>Junior Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="pix"> <section> <img src="img/Charlie.jpg" alt="Photo of Charlie Fig" class= "profile-photo"> <h3>About</h3> <p>Hello, I'm Charlie Fig! I am Junior Developer ready to spread my wings. My fundamental aspiration is to remain versatile and to continue to work well with teams. In my pursuit to be flexible, I have taken the time to learn Front-End Development, Android Development, and Web Developmen. I am still a newbie, but hopefully this portfolio shows my potential and ability.</p> <p>If you want to follow me on Twitter, my handle is <a href="https://twitter.com/?lang=en">@FigCharlie</a>.</p> </section> <footer> <a href="https://twitter.com/?lang=en"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Charlie Figueroa.</p> </footer> </div> </body>
</html>

      ```

Hi Charlie,

Please see the above (you have the same issue as above) and go through it one issue at a time. It makes it a lot easier to pick it apart.

For example - The align attribute on the p element is obsolete. Use CSS instead. From line 45, column 17; to line 45, column 34 <p align="center">

Tells you the issue that needs to be corrected and how you should correct it.

Charlie Figueroa
Charlie Figueroa
2,043 Points

Mine has a lot errors. Can you please help.

Warning: This document appears to be written in English. Consider adding lang="en" (or variant) to the html start tag. From line 2, column 16; to line 3, column 6 TYPE html>↩<html>↩ <he For further guidance, consult Declaring the overall language of a page and Choosing language tags. If the HTML checker has misidentified the language of this document, please file an issue report or send e-mail to report the problem. Error: Bad value https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Anton|Courgette|Orbitron|Kaushan+Script|Sigmar+One|Bangers|Permanent+Marker for attribute href on element link: Illegal character in query: | is not allowed. From line 8, column 5; to line 8, column 185 css">↩ <link href='https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Anton|Courgette|Orbitron|Kaushan+Script|Sigmar+One|Bangers|Permanent+Marker' 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. Common non-alphanumeric characters other than ! $ & ' ( ) * + - . / : ; = ? @ _ ~ generally must be percent-encoded. For example, the pipe character (|) must be encoded as %7C. Error: The align attribute on the p element is obsolete. Use CSS instead. From line 33, column 17; to line 33, column 34 <p align="center">Inspir Error: The align attribute on the p element is obsolete. Use CSS instead. From line 39, column 17; to line 39, column 34 <p align="center">Playin Error: Bad value img/T-Shirt Designs_CharlieFig_3.png for attribute href on element a: Illegal character in path segment: space is not allowed. From line 43, column 15; to line 43, column 61 <a href="img/T-Shirt Designs_CharlieFig_3.png">↩
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. Common non-alphanumeric characters other than ! $ & ' ( ) * + - . / : ; = ? @ _ ~ generally must be percent-encoded. For example, the pipe character (|) must be encoded as %7C. Error: Bad value img/T-Shirt Designs_CharlieFig_3.png for attribute src on element img: Illegal character in path segment: space is not allowed. From line 44, column 17; to line 44, column 71 <img src="img/T-Shirt Designs_CharlieFig_3.png" alt="">↩
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. Common non-alphanumeric characters other than ! $ & ' ( ) * + - . / : ; = ? @ _ ~ generally must be percent-encoded. For example, the pipe character (|) must be encoded as %7C. Error: The align attribute on the p element is obsolete. Use CSS instead. From line 45, column 17; to line 45, column 34 <p align="center">A few Error: The align attribute on the p element is obsolete. Use CSS instead. From line 51, column 17; to line 51, column 34 <p align="center">Drips Error: The align attribute on the p element is obsolete. Use CSS instead. From line 57, column 17; to line 57, column 34 <p align="center">Creati Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. From line 28, column 7; to line 28, column 15 x">↩ <section>↩