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

General Discussion

Posted by Lisa Lombardo
Lisa Lombardo
1,728 Points

Workspaces Preview Missing CSS

I've tried a number of times to get my Workspaces project to preview correctly but no matter what I do I can't seem to get the CSS loaded.

When I preview my project in another editor by downloading files to my local machine, the CSS loads and the site looks fine.

I have tried Chrome and Firefox on Windows on two different machines, and checked the forums but can't find any solutions. My HTML is below.

'''html

<head>
  <meta charset="utf-8">
  <title>Lisa | Digital Communications</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
</head>  
<body>
  <header>
    <a href="index.html" id="logo">
      <h1>Lisa</h1>
      <h2>Digital Communications</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="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with colour 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 repetition.</p>
        </a>
      </li>


      </ul>
      </section>

    <footer>
      <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
      <a href="http://www.facebook.com"><img src="img/facebook-wrap.png"alt="Facebook logo" class="social-icon"></a>
      <p>&copy; 2014 Lisa Lombardo.</p>
    </footer>
   </div>
</body>

'''

2 Answers

Sean Kennedy
Sean Kennedy
21,150 Points
Sean Kennedy
Sean Kennedy
21,150 Points

Seeing that you have a few points i would go get textmate 2 and start using that its way better in my opinion

Lisa Lombardo
Lisa Lombardo
1,728 Points

Thanks Sean - I'll check that out. Workspaces is pretty disappointing for me so far.

Ryan Carson
Ryan Carson
23,287 Points
Ryan Carson
Ryan Carson
23,287 Points

I would recommend checking that your path is correct:

<link rel="stylesheet" href="css/main.css">

It might be that main.css isn't in the css directory or is named something else?

I've never had a preview problem like this, so I'm suprised you are experiencing this.

Also, copying in Jim Hoskins and Andrew Olson who work a lot on Workspaces.

Lisa Lombardo
Lisa Lombardo
1,728 Points

Hi Ryan, Thanks for responding.

All my files are in a top-level folder called "How to Make a Website" and the CSS files are in the sub folder called CSS. See this screenshot (http://imgur.com/zCu2Gs1).

Workspaces is picking up the images which are saved in the img folder, just not the CSS.