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
Stephanie Person
2,281 PointsErrors with Website code
I got to the end of my Making a website and got a ton of errors. I managed to fix most of them but I can't figure out what a couple of them are and how to fix. Here is the code and errors following... ignoring the font error for now.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stephanie Person | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400,400italic,700,700italic|Philosopher:400,400italic,700,700italic' 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>Stephanie Person</h1>
<h2>Designer</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.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt"">
<p>Playing with blending modes in Photoshop.</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.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt"">
<p>Drips created using Photoshop brushes.</p>
</a>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt"">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/TieDyendTattoos"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/stephieleigh.person"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 Stephanie Person.</p>
</footer>
</div>
</body>
</html>
Error: Bad value https://fonts.googleapis.com/css?family=Josefin+Slab:400,400italic,700,700italic|Philosopher:400,400italic,700,700italic for attribute href on element link: Illegal character in query: | is not allowed. From line 7, column 5; to line 7, column 171 css">↩ <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400,400italic,700,700italic|Philosopher:400,400italic,700,700italic' 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: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 31, column 53 ers-01.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 31, column 54 rs-01.jpg" alt""> ↩
Warning: Attribute alt"" is not serializable as XML 1.0. From line 31, column 20; to line 31, column 55 <img src="img/numbers-01.jpg" alt""> ↩
Error: Attribute alt"" not allowed on element img at this point.
From line 31, column 20; to line 31, column 55
<img src="img/numbers-01.jpg" alt""> ↩
Attributes for element img:
Global attributes
alt
src
crossorigin
usemap
ismap
width
height
Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. From line 31, column 20; to line 31, column 55 <img src="img/numbers-01.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 37, column 53 ers-02.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.
At line 37, column 54
rs-02.jpg" alt""> ↩
Warning: Attribute alt"" is not serializable as XML 1.0.
From line 37, column 20; to line 37, column 55
<img src="img/numbers-02.jpg" alt""> ↩
Error: Attribute alt"" not allowed on element img at this point.
From line 37, column 20; to line 37, column 55
<img src="img/numbers-02.jpg" alt""> ↩
Attributes for element img:
Global attributes
alt
src
crossorigin
usemap
ismap
width
height
Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. From line 37, column 20; to line 37, column 55 <img src="img/numbers-02.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 42, column 53 ers-06.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 42, column 54 rs-06.jpg" alt""> ↩
Warning: Attribute alt"" is not serializable as XML 1.0. From line 42, column 20; to line 42, column 55 <img src="img/numbers-06.jpg" alt""> ↩
Error: Attribute alt"" not allowed on element img at this point.
From line 42, column 20; to line 42, column 55
<img src="img/numbers-06.jpg" alt""> ↩
Attributes for element img:
Global attributes
alt
src
crossorigin
usemap
ismap
width
height
Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. From line 42, column 20; to line 42, column 55 <img src="img/numbers-06.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 48, column 53 ers-09.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 48, column 54 rs-09.jpg" alt""> ↩
Warning: Attribute alt"" is not serializable as XML 1.0. From line 48, column 20; to line 48, column 55 <img src="img/numbers-09.jpg" alt""> ↩
Error: Attribute alt"" not allowed on element img at this point.
From line 48, column 20; to line 48, column 55
<img src="img/numbers-09.jpg" alt""> ↩
Attributes for element img:
Global attributes
alt
src
crossorigin
usemap
ismap
width
height
Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. From line 48, column 20; to line 48, column 55 <img src="img/numbers-09.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 52, column 53 ers-12.jpg" alt""> ↩
Error: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. At line 52, column 54 rs-12.jpg" alt""> ↩
Warning: Attribute alt"" is not serializable as XML 1.0. From line 52, column 20; to line 52, column 55 <img src="img/numbers-12.jpg" alt""> ↩
Error: Attribute alt"" not allowed on element img at this point.
From line 52, column 20; to line 52, column 55
<img src="img/numbers-12.jpg" alt""> ↩
Attributes for element img:
Global attributes
alt
src
crossorigin
usemap
ismap
width
height
Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. From line 52, column 20; to line 52, column 55 <img src="img/numbers-12.jpg" alt""> ↩
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
5 Answers
Joseph Zimmerman
6,402 PointsYou need an equal sign on your alt tags...should clear up lots of issues ... should be alt=""
Stephanie Person
2,281 Pointsthanks! cleared up everything except the font error and the section error
Joseph Zimmerman
6,402 PointsOk.... font error is weird... It's saying you can't use the | symbol in the syntax... guessing google did this when generating fonts... see if you change this symbol to / if the code still works and you no longer get an error.
For the section errors try adding some <h*></h*> elements describing the <ul></ul> elements.
Stephanie Person
2,281 Pointschanging to / worked. not sure what i can add there yet. but ty
Joseph Zimmerman
6,402 Pointssorry that last comment should say try adding some heading elements to the ul elements