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

CSS CSS Basics (2014) Fundamental Concepts Learning Tips and Tools

Posted by Tiffany Clark
Tiffany Clark
1,250 Points

Linking this site as a page to my website I made in the HTML classes.

I want to add the Lake Tahoe website that I created in the CSS videos to my portfolio website I created in the HTML videos. I want to make it a link from one of the image. How would it be best to go about this? I'm using Cyberduck and Brackets to try to edit this html and css in, but I'm not sure how to do that.

2 Answers

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Tiffany,

The easiest way to do this is to add a folder to your project and then dump all your files from your Tahoe example into that folder. Then you can link to that folder (directory) from your portfolio page.

For example, let's say your site is at www.tiffanyclark.com. In the root of your project, you'd add a folder called tahoe-example, and all your Tahoe files would go in there. Then, you would simply link to www.tiffanyclark.com/tahoe-example, and clicking on that link would bring you to your Tahoe page. If you wanted to move it out of the root of your project, you could do something like /examples/tahoe-example by adding an "examples" folder in the root.

The one thing you need to be careful of is links (to stylesheets, for example), and where they're pointing to. I dont remember how the Tahoe site was set up, but for example if you have a root-relative link to /style.css, that won't link to www.tiffanyclark.com/tahoe-example/style.css, but rather www.tiffanyclark.com/style.css.

Let me know if this makes sense!

Tiffany Clark
Tiffany Clark
1,250 Points

I've added the laketahoe folder with my html and css files to Cyberduck but I'm not sure how to link it correctly after that. After playing around with the code I've made it so clicking the picture brings up my html document (laketahoe.html) but my css does not show up. If I should link the whole folder, how do I do that?

     <li>
        <a href="laketahoe.html">
          <img src="mountains.css" alt="">
          <p>Visiting Lake Tahoe, CA.</p>
        </a>
      </li>
Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

To link to a folder, you simply use the name of the folder (this is why it's good to make sure your folder names are one word or hyphenated). If you do this, your laketahoe.html would need to be changed to index.html. Then you would link to www.yoursite.com/laketahoe (or whatever the folder name is).

That's not why your css isn't showing up, though. The CSS link happens in laketahoe.html, not in the link to that page.

CSS needs to be linked to in each page. I mentioned in my answer that you need to be careful about where your links are pointing to when you do something like this. Look at your stylesheet link in laketahoe.html. Is it actually pointing to your stylesheet?

Also, I'm pretty surprised your image is showing up - is the name of your image mountains.css? If so, that's super confusing, and I suggest changing it to have a normal image extension like .png - use whatever the actual file type is.

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points 
<a href="web address of where you want to link to">
    <img src="path to your image">
</a>
Andrew Stelmach
Andrew Stelmach
12,583 Points

Don't know what Cyberduck or Brackets are I'm afraid.

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hey Andrew,

Cyberduck is an FTP Client and Brackets is a text editor.

I took Tiffany's question to be more about the logistics of setting this up, since the Tahoe example site course shows how to do things like put images inside anchor elements.

Cheers!