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

Charles Harpke
Charles Harpke
33,986 Points
Posted by Charles Harpke
Charles Harpke
33,986 Points

validator.w3.org and jigsaw.w3.org

When an error is found, is there a repository on the site itself, or knowledge base to correct your own code. My index.html generated 3 errors: Error Line 4, Column 26: Internal encoding declaration named an unsupported chararacter encoding “utf-8”. <meta charset=“utf-8”>

Error Line 7, Column 142: Bad value http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800 for attribute href on element link: Illegal character in query: not a URL code point. …ne|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

Warning Line 28, Column 13: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. <section>

here is my code:

<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>Chuck Harpke | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' 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> Chuck Harpke </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/dommo1.png">
          <img src="img/dommo1.png" 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 using 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/charpke"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/charles_harpke"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>

   <p>&copy;  2014 Chuck Harpke.</p>
   </footer>
</div>

</body>

</html>

also, my main.css gave me this error: 71 nav Value Error : margin Parse Error 20px 0 0

here is my code:

//// /************************* GENERAL *************************/

body{ font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img{ max-width: 100%; }

h3{ margin: 0 0 1em 0; }

/************************* HEADING *************************/

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%;

}

logo {

text-align: center; margin: 0;

}

h1{ font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/************************* NAVIGATION *************************/

nav { text-align: center; padding: 10px 0; margin 20px 0 0; } nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/************************* FOOTER *************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/************************* PAGE PORTFOLIO *************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7

}

/************************* PAGE ABOUT *************************/ .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;

}

/************************* PAGE: CONTACT *************************/ .contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/************************* COLORS *************************/

/* Site body */ body { background-color: #fff; color: #999; }

/* green header*/ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile*/ nav{ background: #599a68; }

/* logo text*/ h1, h2 { color: #fff }

/* links*/ a{ color: #6ab47b; }

/* nav link*/ nav a, nav a:visited { color: #fff; }

/* selected nav link*/ nav a.selected, nav a:hover { color: #32673f; }

2 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hey Charles, I answered this question a few days ago in another thread.

Nick Pettit, I'm not sure if it would help to add some teacher's notes, but this question has came up a few times.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dustin,

The validator is only producing an error for the | as it is an unsafe character. I don't believe the + and ',` need to be url encoded. They're reserved characters but they only need to be url encoded if they're not being used for a reserved purpose.

It's my understanding that the + is the encoding for a space between each word in the font name and the commas are being used as delimeters between the different font weights and styles. I believe they would have to be encoded if they were part of the data. For example, if i understand it correctly, if a font name for some reason had a comma in the name then I think that comma would have to be url encoded but not the commas delimiting the font weights and styles.

When I encode all 3 characters that you mention in the other thread then I get an error status message in the net panel of firebug and the font doesn't load.

Dustin Matlock
Dustin Matlock
33,856 Points

Hey Jason, I think you're right about that. It seems the only thing needed is to replace | with %7C. Below is the corrected version that should validate and I've corrected my other post. Thanks for pointing that out.

<link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Dustin Matlock - There's already a teacher's note about validation errors, it mentions the cause of the validation error

in this project, the vertical pipes in a Google Font URL might cause an error because they're not escaped using HTML entities

However, it doesn't mention the solution, changing | to 7%c, perhaps intentionally.

Dustin Matlock
Dustin Matlock
33,856 Points

I totally missed that, thanks! Think I was skimming the notes for the actual symbol.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Charles,

For the css error you're missing a colon after your margin property.

/************************* NAVIGATION *************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin 20px 0 0; /* You're missing a colon after margin */
}

For the error in your google fonts url you need to replace all vertical bars | with %7C

I believe the warning about "section lacks heading" will go away once you fix the google fonts url. At least that's what seems to have happened with other people although I don't know why.

Anyways, it's only a warning which isn't as serious as an error. It's simply telling you that usually section elements are identified with headings. In the case of this portfolio page, the section element only has an unordered list inside of it. So it's simply giving you a warning about that. It's not necessarily something you need to fix.