Images

Your html code is right, but on your comp its probably not getting the correct directory the only thing i can think of is when you downloaded the zip file on here you didn't unzip it on your computer but rather copied and pasted the folders on your computer. When you download it if your using google chrome instead of clicking on the download press ctrl+J find your download and click on "show in folder" copy the folder and paste it in a folder your going to be using for the web design project and paste the folder in there and extract the folder. Sometimes when you just copy the contents in the folder there are files that are hidden from the computer and you do not copy those. Import the files in sublime try this and see if it works. If it still doesnt work it might be your browser. Other than that follow what Brian is telling you it most likely is a directory problem, but we'll keep working on it. :)

Hm. Still not working. But I'll keep trying. Thank you for your help!

as Aaron states, don't give up. You'll get it :)

Hey emily, what text editor are you using?

it might be that you are setting the wrong path where the image is located.

lets say on my desktop i have a folder called Web Design and in that folder i have two other folders called css and image and a file called html which should be created in the text editor. In my image folder I should store all of my images i want to use on my webpage. In my CSS folder i should have my css file and a image folder that contains images that relate to backgrounds.

In your text editor, after you import all of your folders over that you will use for your webpage you can now use images in your html document.

which looks like this: an example from the web design track on treehouse.

<img src="img/logo.gif" alt="Smells Like Bakin">

so its basically saying

This is an image attribute, the source to look at is located in my Image folder, and the "/" means its setting a path within the image folder to use the "logo.gif" image. alt is just a description of the image which is meant for people looking at your code or the visually impaired.

hopefully, this helps! if you are using sublime text go ahead and on the top click view>sidebar>show sidebar.

Grab your folder you will use for your project from wherever you placed it and drag and drop it in the empty space of the sidebar and you should be good to go.

If you are using notepad++ like i do click on view>project>project panel 1. Right click on workspace, and click add new project,name it, and right click on the project and click add files from your directory and finally find your folder you will be using and click ok.

that should do it i hope this helps let me know!

remember*

starting from the Desktop

FolderName>

1. fileName.html

2. CSSFolderName > BackgroundsFolder cssFile.css

3. Img > logo.gif

then import folders in your text editor!

I'm using sublime. And I tried following your advice, still the images don't show up once I try to preview them. Is there a way I could post a screen shot of my text editor so you could help me see where I went wrong?

you could always upload your code to http://codepen.io/pen/ and then provide the link to us. We will have a look, edit and tell you where you are going wrong.

http://codepen.io/eringoen/pen/jxeBw
here's a link to my code.

Make sure your html file is inside a folder with img and CSS folders

Okay, sorry i couldn't be much of help don't give up. Once you get going these tutorials are pretty cool.

So, I have another question for you two. I've been following along with their mock website. And now the images still won't load, and neither will the css "grid" and "normalize". I've checked and re-checked if I mis-wrote any of the code, but it seems right. Did I load the images and css files incorrectly? What could I be doing wrong?

Actually about a week ago i couldn't get my pictures to load either but i played around in the sublime editor and it just started working but here's something i did which made it work.

i would suggest you try doing your own project to see if u can get it working. Ill give you my code and stuff to test it out.

First as usual make a folder(which will be your main folder that contains everything) on your desktop and name it whatever. i named mine WebDesign inside the folder make 2 folders called img and css. in the css folder make another folder called img.

download which ever background you want from this website http://subtlepatterns.com/thumbnail-view/ I used these two a)http://subtlepatterns.com/robots/ b)http://subtlepatterns.com/stardust/

after you download it make sure u extract and not copy and paste it inside the img folder that's inside the css folder. if you are not using a mac you can delete the _MACOSX folder.

Okay in the main folder(mine is called WebDesign) click on the img folder you created. go to this website: http://www.blisstree.com/wp-content/uploads/2013/05/sad-robot.jpg right click on the robot pic and click save image as. delete the extension .jpg and change it to .png

before you click save make you are in your image folder that was created in the main folder(WebDesign). click save.

finally if you want you can copy and paste the grid and normalize folder inside the css folder, its not necessary but just make sure if u do paste it in there to rename it to normalize(2).css and grid(2).css so you dont overwrite the original.

okay so here's where we get started on how i fixed it.

1) Load up sublime. 2) Go to project > save project as > find your folder that you just made and name your file whatever you want. 3) click save 3) It will make two files a) sublime project b)sublime workspace. 4) Again go to project > add folder to project> click your folder you just created. 5) on the left you should see your main folder then the css folder with the indented img folder underneath it along with the normalize/grid files and your main img folder underneath those along with the project/workspace files you just created. 6) Okay now these next two steps are important.. 7) click file> new file 8) click file > save as > after the folder screen pops up.. on the left make sure you click the main folder that's on your desktop> name the file index.html 9)click file > new file 10) click file > save as > after the folder screen pops up.. on the left make sure you click the css folder that's inside your main folder> name the file style.css 11) okay now here's the easy part just copy and paste my code in sublime with the directed files

this is the index.html code

<!DOCTYPE>
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/normalize (2).css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid (2).css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <title>My Design</title>


</head>

<body>

    <h1>This is a Test. With Background pics and body page pic</h1>
        <img src="img/sad-robot.png" alt="sad-robot">



</body>
</html>

this is my style.css code

html{

background: url('img/robots.png') repeat;

}

h1{
color:white;
font-size: 30px;
margin: 30px;
padding: 25px 45px 25px 12px;
text-align: center;
border: 24px;
background: url('img/stardust.png');

}

press ctrl+s to save and lastly load it up and tell me if it works! :)

That worked! Thanks so much!

No problem at all, glad you finally got it working good-luck!