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
Shen Jasmine
1,313 PointsIt 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
Mark Truitt
17,230 PointsHi Shen,
Can you paste the code from the head of the site you are doing?
Charlie Figueroa
2,043 PointsHere'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>
```
Mark Truitt
17,230 PointsHi 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
2,043 PointsMine 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>↩
Shen Jasmine
1,313 PointsShen Jasmine
1,313 PointsHi 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
Mark Truitt
17,230 PointsMark Truitt
17,230 PointsCan you paste the head of the site? I tried the code above and it works fine for me on my wordpress site.
Shen Jasmine
1,313 PointsShen 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?
Mark Truitt
17,230 PointsMark Truitt
17,230 PointsAhh 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
1,313 PointsShen Jasmine
1,313 PointsAah it works now! Thank you very much! :D