Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Framework Basics Prototyping with Bootstrap Working with Nested Grids and Responsive Images

keren lerner
keren lerner
3,561 Points

Working with brackets

I am using Brackets for my text editor.

1) I am finding it impossible to add folders to my Working Files. I can find no option for this in the top menu, nor is it listed in the menu when I right click.
2) Since I couldn't add an img folder, I just added a jpg to the working files called stock.jpg 3) I am trying to incorporate stock.jpg into my website for this class but I'm just getting a little box. Here's my code:

<div>

        <img src="stock.jpg">
        </div>

Thanks!

4 Answers

Mark Gong-Guy
Mark Gong-Guy
2,830 Points

Hello Keren:

Hope you are having a good morning to answer your first question to create a folder you need to look right below your working files. Right below there it should have the name of your root directory. If you don't see anything try doing the following.

  1. Create a folder on your desktop named "Working with Brackets"
  2. Go back to Brackets and go to File > Open Folder > Then Find your Working with Brackets Folder
  3. Because it is empty there will be no files so you will need to go to the left sidebar in Brackets and right click under the bar named Working with Brackets and it should give you the option to both create a file and or folder.
  4. Following the lesson create an index.html file as well as an img folder

It seems like you know how to link the image inside your html document; however if you have any further questions or are still having a problem please let me know, and I would be happy to help.

Good Luck, Mark

keren lerner
keren lerner
3,561 Points

Hi Mark,

Thanks a lot for your answer! So far I have been working with all the files for the class listed individually in the Working Files---I just dragged them in from the folders I downloaded for the class one by one so they are all in Working Files but there are no folders there. So far there's been no problem working this way. There seems to be no way to organize the Working Files into folders after they've already been created, nor can I move them into the root directory and group them into folders there. So 2 questions: 1)Is there a way to group the files I already have into folders post-facto? and 2) Do I actually need the jpg to be in a folder in Working Files in order to reference it in my index.html file? I tried just having it as a file like the others but as I said I'm getting a blank box on my website instead of the image.

Thanks again!!!!

Keren

Mark Gong-Guy
Mark Gong-Guy
2,830 Points

Hi Keren:

Sure so to answer your first question, in order to group all your files for this class I would recommend placing them in a single folder somewhere on your computer. Then you can open that entire file on brackets using the method that I gave above. Because what is happening now is that you are opening single files in brackets and they are immediately opening in a working area however you can not manipulate the folder structure without defining a folder like I mentioned above.

Regarding your second question. In terms of function, you do not need to make a jpg folder however it is good practice to sort pictures into their own folder, because in a more lager project you will find that if you place all the files in one folder without organizing them things become very messy and disorganized(especially when you start to deal with other file types, php, js, etc).

The reason why your image is showing as blank is because it is not linking correctly, placing it in a folder should fix this problem, think of it this way. Right now your files are all over the place on your computer and when you define image.jpg it does not search your computer for that file, instead it looks directly in the same directory. That being said I would strongly recommend you create a folder and place all of these class files in.

Hope that clears things up for you!

Good Luck, Mark

keren lerner
keren lerner
3,561 Points

Hi Mark,

I tried to do as you advised. I created a folder on my desktop called Working with Brackets. I went to File Open in Brackets and opened it. Then I moved the entire extracted "start" folder from the download files into Brackets. But I only the index file seems willing to jump into the Working File. I have a screenshot; is there a way I can send it? Thanks!!!!!

Keren

Mark Gong-Guy
Mark Gong-Guy
2,830 Points

Hey Keren,

Sure go ahead and email it to mark.gong-guy(at)Weberser.com and I can assist you from there.

Regards, Mark