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:
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!
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"!
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.
inside Atom
inside your folder
Now you want to copy everything from your JSBin website into the your Atom page.
Move everything from the HTML page
Into Atom
Remember to save your file!
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!
My website
But what's happened to all our colours?!
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
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!
Make sure you test out your website in Google Chrome to make sure your CSS worked properly 😀
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!
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.
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.
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 😁