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

MICHAEL P
MICHAEL P
5,191 Points
Posted by MICHAEL P
MICHAEL P
5,191 Points

When testing my index.html, I get multiple errors. Not sure how to fix them. Please help

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Michael Puodziukas | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
        <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>Michael Puodziukas</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 80s style of glows.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created with Photoshop brushes.</p>
        </a>
      </li>
      <li>
        <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/puodziukasm"> <img src="img/twitter-wrap.png" alt= "Twitter logo" class="social-icon"</a>
      <a href ="http://facebook.com/michael.puodziukas"><img src= "img/facebook-wrap.png" alt= "Facebook logo" class="social-icon"></a>
    <p>&copy; 2016 Michael Puodziukas.</p>
    </footer>
    </div>
  </body>
</html>

Validator.w3.org shows the following errors which I am not sure how to fix:

Error: Bad value https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800 for attribute href on element link: Illegal character in query: | is not allowed.
From line 7, column 5; to line 7, column 117
css">↩    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">↩     
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.
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
From line 28, column 5; to line 28, column 13
per">↩    <section>↩    <
Error: No space between attributes.
At line 63, column 121
s="social-icon"</a>↩      <a h
Error: Saw < when expecting an attribute name. Probable cause: Missing > immediately before.
At line 63, column 121
s="social-icon"</a>↩      <a h
Error: A slash was not immediately followed by >.
At line 63, column 123
"social-icon"</a>↩      <a hre
Warning: Attribute < is not serializable as XML 1.0.
From line 63, column 50; to line 63, column 124
ziukasm"> <img src="img/twitter-wrap.png" alt= "Twitter logo" class="social-icon"</a>↩     
Error: Attribute < not allowed on element img at this point.
From line 63, column 50; to line 63, column 124
ziukasm"> <img src="img/twitter-wrap.png" alt= "Twitter logo" class="social-icon"</a>↩     
Attributes for element img:
Global attributes
alt - Replacement text for use when images are not available
src - Address of the resource
srcset - Images to use in different situations (e.g., high-resolution displays, small monitors, etc)
sizes - Image sizes between breakpoints
crossorigin - How the element handles crossorigin requests
usemap - Name of image map to use
ismap - Whether the image is a server-side image map
width - Horizontal dimension
height - Vertical dimension
longdesc - A url that provides a link to an expanded description of the image, defined in [html-longdesc]
Error: Attribute a not allowed on element img at this point.
From line 63, column 50; to line 63, column 124
ziukasm"> <img src="img/twitter-wrap.png" alt= "Twitter logo" class="social-icon"</a>↩     
Attributes for element img:
Global attributes
alt - Replacement text for use when images are not available
src - Address of the resource
srcset - Images to use in different situations (e.g., high-resolution displays, small monitors, etc)
sizes - Image sizes between breakpoints
crossorigin - How the element handles crossorigin requests
usemap - Name of image map to use
ismap - Whether the image is a server-side image map
width - Horizontal dimension
height - Vertical dimension
longdesc - A url that provides a link to an expanded description of the image, defined in [html-longdesc]
Error: Start tag a seen but an element of the same type was already open.
From line 64, column 7; to line 64, column 56
/a>↩      <a href ="http://facebook.com/michael.puodziukas"><img s
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

fixed code formatting

2 Answers

Daniel Box
Daniel Box
1,939 Points
Daniel Box
Daniel Box
1,939 Points

<img src="img/twitter-wrap.png" alt= "Twitter logo" class="social-icon"

is missing closing right arrow

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

changed from comment to answer

The other issue is that you need to replace the vertical pipe | in the google fonts url with %7C

mfacundo05
PLUS
mfacundo05
Courses Plus Student 2,293 Points
mfacundo05
mfacundo05
Courses Plus Student 2,293 Points

Jason why doesn't the vertical pipe work? I used %7C and it cleared my error. Thank you. How would I know to use %7C?