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 Adding Pages to a Website Make an About Page

Vicki Hardin
Vicki Hardin
1,664 Points
Posted by Vicki Hardin
Vicki Hardin
1,664 Points

Problem adding image.

Directions are: Add the profile picture "img/gratt.png" inside the section element. Then, write a description in the alternate attribute and add the class "profile-photo" to the image.

Here's what I did in html: <section> <img src=“img/gratt.png” alt=“Photograph of Nick Petitt” class=“profile-photo”> </section>

Keeps telling me: Bummer! Be sure to set your image source to display img/gratt.png.

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | 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">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</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="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">

 <section>
   <img src=“img/gratt.png” alt=“Photograpgh of Nick Petitt” class=“profile-photo”>
      </section>

 <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

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


nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

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

2 Answers

Mohammed AlShaiban
Mohammed AlShaiban
6,455 Points
Mohammed AlShaiban
Mohammed AlShaiban
6,455 Points

Your code is actually correct, however, it seems that you are using the wrong quotes. Maybe your input source was set to a different language? This is the correct one:

<img src="img/gratt.png" alt="Photograph of Nick Petitt" class="profile-photo">

and you were using this 

<img src=“img/gratt.png” alt=“Photograpgh of Nick Petitt” class=“profile-photo”>
Vicki Hardin
Vicki Hardin
1,664 Points
Vicki Hardin
Vicki Hardin
1,664 Points

Please disregard, I found the answer. Had a quote tag backwards.