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.

HTML

jennifer ray
jennifer ray
7,875 Points

Sublime text 2

Hi, I have decided to try my skills on making a simple website now I have finished the 1st course before moving on. I downloaded sublime text 2 and a couple of plug ins. I have watched many videos on you tube and now confused :/ How do I make a new folder in sublime text? the only option is new file? Or do I type my html code into a file? Then I wanted to add images, I have them saved on my computer and wanted to make an img folder and drag and drop them in. Is this possible in sublime text? Also when I opened the img folder inside sublime text I could not see the pictures just numbers? Any help would be greatly recieved.

6 Answers

Jennifer Hughes
Jennifer Hughes
11,421 Points

Hi Jennifer,

To add a new folder to Sublime, first create a folder in the location you want it saved. For example, if you want it on your desktop, create it there. Then, in Sublime, go to Project/Add Folder to Project and select the folder.

Once you've added this folder to Sublime, you can right click on it to create new folders and files.

To include images, I suggest making a new folder within your project folder, titled "images". Add your images to that folder, .jpg files are most common. Once those images are added to the folder, if you click on the file within Sublime, the images wil appear as all of those numbers you're seeing. That's just fine.

When you're ready to add images to your website, use the img tag. (A quick Google search will explain how to do this if you need help).

But, as an example, you might want to add an image inside of a div:

<div> <img src="images/bike1.jpg" alt="" class="bike-image"> </div>

src stands for source; that is where you put the path to your image file. Alt stands for "alternate". Here you can type something describing the photo, incase it ever fails to load.

Hi Jennifer,

There's a few points there:

  • Your HTML goes in a file, not a folder - a folder stores multiple files in one place.
  • Yes, you can drag and drop your image files into a folder in Sublime, as far as I am aware.
  • The numbers you see when you open the image file is the binary/hex of the image file - the image is there, that's just not the way to view it.

Are you using a Windows machine or a Mac? Maybe start by creating a new folder for your project in Windows or OSX then getting Sublime to look in that folder. This will give you a few more options to get started.

Happy to walk you through that.

Steve.

jennifer ray
jennifer ray
7,875 Points

Yes I have only learnt html so far. That's fantastic, thank you for your patience :)

:-)

jennifer ray
jennifer ray
7,875 Points

Thank you so much to both of you, both answers combined answered my query's and now I can continue on coding, really enjoying designing websites wish I had started years ago, plus with help from other students/teachers so prompt is perfect :)

jennifer ray
jennifer ray
7,875 Points

Hi Steve, I have just had time to try out sublime text 2 again. I have another question. I have a windows laptop, what application do I write my code in before adding the project/file to sublime text 2?

Hiya Jennifer,

You should create the folder to work in with Windows Explorer; just right click and add a new folder. Then go to that folder by using the Open ... menu item in Sublime. That'll give you a blank window with the folder name in the bar on the left.

Left-click that and select 'New File' - that's what you write your code in.

Let me know if you need more - I'm not sure that was too clear! Happy to put some better instructions together.

Steve.

jennifer ray
jennifer ray
7,875 Points

Thank you, I get how to set up ready to write my code now. I have a folder on my desktop which I want to store all the files relating to the website is this correct? I have called it project 1. I put my img folder in of pictures I want to use. In sublime text I opened this folder. Added a new file. How do i change the name? does it need to be called .... .html?

To rename a file, left click it in the list on the left of Sublime and select 'Rename ... '.

As for what to call your files, it depends what they are doing. If they are going to be simple wed pages, then .html is the way to go. But they could equally be .asp or .php or .rb whatever method of delivering your content you choose.

For the website course on here, I think they use .html but there are plenty of Rails courses and PHP ones too. All good stuff!

Steve.