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
Dania Lugo
602 PointsWebsite preview isn't quite working for me. Probably should have sought out help sooner!
When I click the little eyeball icon in my workspace, it brings me to a page that shows each of the documents I've created in workspaces. For example, when I go to my preview, it shows a list like this:
Index of /
IMG/ Index.html css/
Then I have to click the "index.html", which doesn't show the CSS changes I've made in workspaces. How do I get my website preview to appear correctly?
Dania Lugo
602 PointsSteve, Unfortunately they're all saved correctly, and I wish I could share a screen shot of what I'm seeing.
Basically, when I click the little eyeball in my workspace, it opens a page that only shows links of:
Index of /
IMG/ Index.html css/
When I click on "index.html" it brings me to the preview of the site I'm writing, but when Nick clicks his preview eyeball, it brings him straight to the website itself, not a terrible looking list of blue links connecting me to each of my files.
I hope this makes sense!
4 Answers
Seth Kroger
56,414 PointsProgramming languages and tools can get overly picky about capitalization at times. index.html should be all lowercase or the web server won't be able to see it's there. This can be inconsistent between different servers and OS's, but all lowercase is best.
Dania Lugo
602 PointsAh ha! The file was "Index.html", not "index.html"
That fixed it! Thank you!
Steve Tenpas
6,234 PointsOh. You may not have your CSS file linked to you HTML. I bet it is just displaying the HTML without the CSS styling. Let me check something.
Steve Tenpas
6,234 Pointsin the <head> do you have your css file linked? In a<link>``` tag
Dania Lugo
602 PointsSince I can't share my code by having you see my workspace, here's what I've got for my Index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dania Lugo | Cat Lover</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:300,400,600,700|Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="css/main.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Dania Lugo</h1> <h2>Professional Cat Lover</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>
<li>
<a href="IMG/numbers-01.jpg"></a>
<img src="IMG/numbers-01.jpg" alt="">
<p>Playing with Blending modes</p>
</li>
<li>
<a href="IMG/numbers-02.jpg"></a>
<img src="IMG/numbers-02.jpg" alt="">
<p>Trying to create an 80s style</p>
</li>
<li>
<a href="IMG/numbers-12.jpg"></a>
<img src="IMG/numbers-12.jpg" alt="">
<p>Creating shapes using repetition</p>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/misslasagna"><img src="IMG/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/misslasagna"><img src="IMG/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2017 Dania Lugo.</p>
</footer>
</div>
</body> </html>
And here's what I've got for my main.css:
/************* General - site wide *************/
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
/************* Heading *************/
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Slabo 27px', serif; margin: 15px 0; font-size: 1.75em; }
/************* Colors *************/
/* site body */
body { background-color: #fff; color: #999; }
/* green header */
header { background: #BA55D3; border-color: #000000 }
/* nav background on mobile */
nav { background: #BA55D5; }
/* logo text */
h1, h2 { color: #fff; }
/* color nav link */
a { color: #BA55D3; }
/* selected nav link */
nav a, nav a:visited { color: #ffffff; }
/* selected nav link*/
nav a.selected, nav a:hover { color: #32673f; }
*Here's a screen shot of my page when I click the eyeball*** https://share.squarespace.com/1a0K2M2r002d
Steve Tenpas
6,234 PointsYou may want to go back a video or two and make sure the top of your html file looks like Nick's. If that all compares properly you may want to check that your CSS file structure is the same. You can compare the sidebar file structure of your workspace window to the way Nick has his listed.
Steve Tenpas
6,234 PointsOh I see the problem... you are a Cat Lover! Just kidding couldn't resist.
I see two CSS files listed in the <head>. Is that all of your CSS files for that project? I seem to recall a responsive.css file as well but that may be added later. Also, not sure it matters but I listed my "type" and "rel" before the "href"
```<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800">
Steve Tenpas
6,234 PointsSteve Tenpas
6,234 PointsBe sure you have saved your index.html file and saved your CSS file. In your workspaces window SAVE is listed in the dropdown under "File". Not sure if that was your question? I also had trouble when my preview would be in a new tab on my browser. I didn't realize a new tab was listed.