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

Development Tools

Kenton Kotsiris
Kenton Kotsiris
6,130 Points
Posted by Kenton Kotsiris
Kenton Kotsiris
6,130 Points

Getting a preview of what you're building in a text editor (sublime or atom) that shows CSS as well.

I'm new so please forgive this question if it's a bit trivial. I'm working on building my first website using both sublime at atom (on mac, testing each out). I've figured out how to preview the html, but I can't get a preview with images or with it reflecting my CSS. How can I do this? am I saving it incorrectly? Thanks!

2 Answers

Luke Glazebrook
Luke Glazebrook
13,564 Points

So none of your CSS styles are being applied? Make sure that you have linked your stylesheet to your index.html file so it knows where it is.

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

Please note that the href attribute may differ depending on where your file is located relative to where index is. Also, the name of the file will need to be changed in the href attribute if yours isn't called main.css.

If this isn't your problem feel free to reply with some more detail on what the exact problem is! :)

-Luke

Kenton Kotsiris
Kenton Kotsiris
6,130 Points
Kenton Kotsiris
Kenton Kotsiris
6,130 Points

Thanks for the response! I think it has to do with the location of the files. How could I find the correct file locations? I have an index .html and main.css inside a folder on my desktop. Is there an easy way to add the correct pathway? Thanks! !

Kenton Kotsiris
Kenton Kotsiris
6,130 Points
Kenton Kotsiris
Kenton Kotsiris
6,130 Points

Ahh..after messing around with it. I figured it out. It was the pathways as you suggested. Thanks!

Luke Glazebrook
Luke Glazebrook
13,564 Points

Good job Kenton!

Glad you managed to get it working, have fun programming.

-Luke

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

It's a known issue with the HTML Preview package in Atom. I really wish the repo owner would update it, but until he does, someone came up with a hack that fixes it. You can find it down near the bottom of the linked bug report.

Kenton Kotsiris
Kenton Kotsiris
6,130 Points
Kenton Kotsiris
Kenton Kotsiris
6,130 Points

Thanks for this! Too bad as I like the editor but looking at the hack, I feel it's a bit over my head at the moment. I'm surprised it's not fixed since it was reported back in April.

Kenton Kotsiris
Kenton Kotsiris
6,130 Points
Kenton Kotsiris
Kenton Kotsiris
6,130 Points

Actually, I went for it and got it to work!! I'm kind of proud of myself. A few weeks ago, I didn't know any html or even what a text editor was. Treehouse is amazing at teaching and building confidence!

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

That's awesome! Great job!