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

CSS How to Make a Website Responsive Web Design and Testing Website Testing

Matthew Lehman
Matthew Lehman
5,282 Points

so i got a few errors when I tried to validate my index.html. may someone please take a look please?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matthew Lehman | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,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>Matthew Lehman</h1>
     <h2>Designer</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="contacts.html">Contacts</a></li>
       </ul>
     </nav>
     </header>
     <div id="wrapper">
     <section>
       <img src="img/matthew.jpg" alt="Photograph of Matthew Lehman" class="profile-photo">
       <h3>About</h3>
       <p>Hi, I'm Matthew Lehman.  This is my personal portfolio where I share my work.  When I'm not doing this in my free time, I work in the fitness industry.  It's difficult to actually give myself a specific job title, since I do many different types of tasks at my job.  </p>
       <p>If you'd like to follow me on Twitter, my user name is <a href="http://twitter.com/mattyind">@mattyind</a></p>
     </section>
     <footer>
        <a href="http://www.twitter.com/mattyind"><img src=img/twitter-wrap.png alt="Twitter Logo" class="social-icon"></a>
        <a href="http://www.facebook.com"><img src=img/facebook-wrap.png alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Matthew Lehman</p>
     </footer>
   </div>
  </body> 
</html>
Matthew Lehman
Matthew Lehman
5,282 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matthew Lehman | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,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>Matthew Lehman</h1> <h2>Designer</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="contacts.html">Contacts</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/matthew.jpg" alt="Photograph of Matthew Lehman" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Matthew Lehman. This is my personal portfolio where I share my work. When I'm not doing this in my free time, I work in the fitness industry. It's difficult to actually give myself a specific job title, since I do many different types of tasks at my job. </p> <p>If you'd like to follow me on Twitter, my user name is <a href="http://twitter.com/mattyind">@mattyind</a></p> </section> <footer> <a href="http://www.twitter.com/mattyind"><img src=img/twitter-wrap.png alt="Twitter Logo" class="social-icon"></a> <a href="http://www.facebook.com"><img src=img/facebook-wrap.png alt="Facebook Logo" class="social-icon"></a> <p>Ā© 2015 Matthew Lehman</p> </footer> </div> </body> </html>

Just updated your question so it's a little clearer to view. You can view a guide on markdown here.

-Rich

2 Answers

Hi Matthew,

Would you be able to post the validation error please?

At a guess I'd say one of the issues would be this line:

    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>

Can you try escaping the pipe (|) character in that line to %7C please? It should then look like this:

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

Hope that helps.

-Rich

Matthew Lehman
Matthew Lehman
5,282 Points

Thank you so much

I replaced it, and it worked.

Thanks so much

No problem :)

-Rich

Matthew Lehman
Matthew Lehman
5,282 Points

thanks again for helping me out yesterday.

But I did have one more question. How did you know to add %7? I just went to google fonts again just to see what would happen. And again it gave me the old link that included this key (I). instead of the (%7) key.

Just like to know this for my future reference when I start designing actual webpages. let know once again if you can help me out.

Thanks

MATT

Grace Kelly
Grace Kelly
33,990 Points

Hi Matthew,

The first thing I can see is you don't have a body tag before your content, you need to add it after your stylesheet links and before your "body" of content, it would also be a good idea to put a closing body tag at the end of your content, just before you end your html :)

Secondly on your links to the css i would include type="text/css" like so:

<link rel="stylesheet" type="text/css" href="css/main.css">

Also, I noticed you have a closing header tag on line 22 without an opening header tag before it.

Grace Kelly
Grace Kelly
33,990 Points

This answer is for your second preview of code, on your first preview i see you have the opening header and the body tags

Matthew Lehman
Matthew Lehman
5,282 Points

thank you Grace.

I changed it, and it worked.

So thank you so much.

Grace Kelly
Grace Kelly
33,990 Points

no worries, glad i could help :D