project: Adding images to your website

In this step we’ll learn about a special kind of HTML element. The <img> element.

Here are a few resources for you:

  • W3Schools has a nice guide to the syntax. But it does leave a few unanswered questions.
  • MDN is more in depth. You don’t need to know the whole document for now, just make sure you know what the src and alt attributes do

Project instructions

You guessed it! You’re now going to add a picture to your web page!

1. Get it to work on your machine

Create a directory named “images” on your device. It should be in the same location as your index.html file.

your-project-directory/
    images/
    index.html

Add at least one picture to your images directory. You can choose a picture from the Internet, or you can use a photo you already have. Whatever you want.

Now update your index.html so that the picture shows up. Make use of an img tag.

IMPORTANT Make sure you fill in the src and alt attributes on your img tag.

Your img tag should look something like this:

<img src="images/YOUR_FILE_NAME" alt="YOUR ALT TEXT HERE" />

Make sure that the picture shows up when you look at your website on your own device.

2. Check that your HTML is still valid

Make use of an online HTML validator to make sure your HTML is not broken in any way.

Here is a validator: https://www.freeformatter.com/html-validator.html

3. Update your Github page

Once you are satisfied that your picture is showing up and your HTML is valid, you’ll need to upload your latest work to Github. You can upload your index.html file and your images directory in the usual way.

When you look at your Github repo then you should see your new index.html file as well as the images directory.

Do not make a new repo for this. Just upload your files to the same place.

3. Check your Github page!

Your website changes will be automatically deployed to Github pages once you have uploaded your files. You wont need to reconfigure anything. Just go to your website and make sure it looks like what you were expecting.

IMPORTANT A lot of people fail this part of the project simply because they didn’t check their own work. This is critical. Open up your github page website and look at it with your own eyes. Is your image showing up?

4. Submit

You’ll submit the link to your github page. You’ll need to wait a little while for feedback again.

Nice job!

If you got this right then you would have had to level up a little bit. You now know a bit about how to reference other resources from inside an HTML page. This is a pretty big deal because the web wouldn’t be a web if it wasn’t interconnected.

RAW CONTENT URL