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 Customizing Colors and Fonts Use Color in CSS

Website 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?

Be 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.

Steve, 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
Seth Kroger
56,413 Points

Programming 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.

Ah ha! The file was "Index.html", not "index.html"

That fixed it! Thank you!

Oh. 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.

in the <head> do you have your css file linked? In a<link>``` tag

Since 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>&copy; 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

You 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.

Oh 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">