Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

1. Intro

So last time we played around with adding some colours into our website using CSS. We looked at how to change the text colour, font, and background colours! So my website currently looks like this:

Imgur

This week we're going to look at taking our website out of JSBin so we can add our own pictures and add more pictures next week!

2. Creating a folder

The first thing we need to do is create a folder to contain our website. I've added my folder onto the desktop and called it "my website"!

Imgur

3. Open Atom.io

Next, we're going to open a program called Atom - it should be installed somewhere on your computer. You may also need to close it the first time if it doesn't work, and open it again 😕

You want to save this empty file as index.html inside the folder we just created.

Imgur

inside Atom

Imgur

inside your folder

4. Copy / paste your webpage

Now you want to copy everything from your JSBin website into the your Atom page.

Imgur

Move everything from the HTML page

Imgur

Into Atom

Remember to save your file!

5. Test it out

Now let's have a look at our file working - if you go back to the file explorer. You should be able to right click on your index.html and open it with Google Chrome!

Imgur

My website

But what's happened to all our colours?!

6. Adding in the CSS

So we need to make another file in our folder for our CSS.

Inside Atom - click file - add new file - call it website.css.

And again copy your JSBin CSS into your website

Imgur

Finally, we have to link them together like this inside your index.html page :

<link href="website.css" rel="stylesheet">

This tells our html page to use the css in that file!

Imgur

Make sure you test out your website in Google Chrome to make sure your CSS worked properly 😀

7. Adding Images

Now, we already have at least one image inside our website... however we have to load it from the Internets. Wouldn't it be much better if we had a copy of that image to display? Or if we wanted to add our own photos to our website.

Inside your website folder, add a new folder called images - this is where we're going to save any images that we use!

Imgur

You could use Google to find an image you want and save it into your folder. I've added a little girl picture I want on my website.

Imgur

8. Images in Code

Now if I wanted to use that image inside my index.html page I'd need to add the following:

<img src="images/danielle.png" alt="my picture"/>

Remember to make sure that the file name is exactly as it is inside explorer! You might need to check what type of image e.g. .png or .JPEG etc.

Imgur

Imgur

9. Finishing

Make sure you have at least three images saved inside your images folder that your going to be using on your website!

Next time we're going to look at adding more pages into our website and navigating between them 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment