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

Posted by Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Social icon links and class. Workspace is showing theres an error. What am I missing?

What's wrong with my footer?

<footer> <a href="http://twitter.com/sunshinekhawaja"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/sunny.acacia.khawaja"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>Ā© 2015 Sunshine Khawaja.</p> </footer> </div> </body> </html>

Koda Jones
Koda Jones
2,785 Points

Hey Sunshine,

Are the .png files correctly named (matching) and are they actually located in the "img" folder directly?

Thanks,

Josiah Richards

Alex Friant
Alex Friant
6,444 Points

When you say "Workspace is showing there's an error", what exactly do you mean?

Is the code editor showing an error with red text coloring? Is the website preview showing broken links?

If the code editor is showing errors, then we'll need to see more of the code surrounding the social icon links, as many times the reason there is an error is because of syntax issues before the error shows up red. So you might be missing closing tags or something like that before the code you are showing us, which we can't see with the code example you supplied.

3 Answers

Sunshine Khawaja
Sunshine Khawaja
1,845 Points
Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Thanks for your response Alex. And yes the code editor is showing errors. Everything was fine until I realized my fb link was linking to another persons profile. So I went into edit that and that's when I started having problems. I tried deleting the links and entering them again and thats when I started to have problems. I would really appreciate your help!

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sunshine Khawaja | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic|Playfair+Display:400,700,900,400italic,700italic|PT+Sans+Narrow|PT+Mono|Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300' 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>Sunshine Khawaja</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="img2/Trail_Marker.jpg"> <img src="img2/Trail_Marker.jpg" alt=""> <p>GR trail marker | Hike to Lourmarin, France.</p> </a>
</li> <li> <a href="img2/Lock_Bridge_B&W.jpg"> <img src="img2/Lock_Bridge_B&W.jpg" alt=""> <p>Pont du Arts | Bridge of "lock love" in Paris, France</p> </a>
</li> <li> <a href="img2/Sacrecouer_b&w.jpg"> <img src="img2/Sacrecouer_b&w.jpg" alt=""> <p>Sacre Couer | Highest point in Paris, France.</p> </a>
</li> <li> <a href="img2/Lourmarin France.jpg"> <img src="img2/Lourmarin France.jpg" alt=""> <p>Lourmarin, France | First glance upon descent from GR Trail.</p> </a>
</li>
<li> <a href="img2/French_Countryside.jpg"> <img src="img2/French_Countryside.jpg"" alt=""> <p>French Countryside | Train ride from Paris to Fontaine-de-Vaclause.</p> </a>
</li> </ul> </section> <footer> <a href="http://twitter.com/sunshinekhawaja"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="htts://facebook.com/sunny.acacia.khawaja"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>Ā© 2015 Sunshine Khawaja.</p> </footer> </div> </body> </html>

Tony Caronna
Tony Caronna
5,777 Points
Tony Caronna
Tony Caronna
5,777 Points

So there's nothing wrong with the code, just make sure the .png files you're referencing are located in the img folder.

Hope this helps :)

Alex Friant
Alex Friant
6,444 Points
Alex Friant
Alex Friant
6,444 Points

Sorry it took me so long to respond! (10 days! LOL) You probably already figured this out, but here's the solution.

Your facebook URL starts with "htts", but it should be "https":

<a href="https://facebook.com/sunny.acacia.khawaja"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>