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 trialBen Witkins
469 PointsPreview Is Not Working
When I preview my work, it is not reflecting the changes I make.
For example, when I attempt to change the background to orange using main.css and/or remove the underlines (text-decoration: none;), the changes are not being reflected on my preview.
Further, my footer is still orange despite having deleted the corresponding HTML code from index.html.
Any suggestions appreciated. i'm totally confused.
6 Answers
Kristen Law
16,244 PointsCan you post your code? Are you saving your file after each edit you make?
Ben Witkins
469 PointsThanks for the reply, Kristen. Yes, I am saving after each edit.
Here is my index.html code (main.css code follows):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ben Witkins | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Ben Witkins</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <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 80's-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 repitition.</p> </a> </li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="IMG/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com"><img src="IMG/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Ben Witkins.</p>
</footer>
</body> </html>
Here's my main.css code:
a { text-decoration: none; }
Kristen Law
16,244 PointsUse this to format your code: https://teamtreehouse.com/forum/posting-code-to-the-forum
Kristen Law
16,244 PointsUse the formatting for code blocks, three back ticks before and after your code: (the back tick key is the same is the ~ key.. it should be underneath the esc key)
```
your code here
```
Ben Witkins
469 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ben Witkins | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Ben Witkins</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section>
<ul>
<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 80's-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 repitition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="IMG/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com"><img src="IMG/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Ben Witkins.</p>
</footer>
</body>
</html>
Ben Witkins
469 PointsSorry about that... Here is main.css
a {
text-decoration: none;
}
Kristen Law
16,244 PointsI don't see any issues with your code. Did you make sure your main.css file is inside the css folder? Are you pressing the preview button after each code change and file save? Have you tried refreshing the webpage? What browser are you using?
Ben Witkins
469 PointsYou are fantastic, Kristen! I was using a browser (Safari) which wasn't compatible. I switched to FireFox and everything looks good.
Thanks so much!
Kristen Law
16,244 PointsNo problem, glad you got it figured out! Happy coding!