WDI Fundamentals

WDI Fundamentals Unit 3

Your Turn Your Turn

Now it's time to work with images. Our goal in this exercise will be to use HTML image tags to put a picture on the web.


If you don't see the JS Bin below, please refresh the page.

1) Take a look at the starter code below. Yep, it's your HTML boilerplate!

JS Bin on jsbin.com

2) Write in an img tag between the body tags.

3) Add src="http://i.imgur.com/z9gGd0t.jpg" to your image tag. (Grumpy Cat has strong opinions about visual design!)

4) Add alt="grumpy cat hates bad design" to your image tag.

5) Add title="grumpy cat" to your image tag.

Important to Remember

  • Image elements are self-closing; they don't need a closing tag.
  • Image URLs must end with an image extension; usually .jpg, .gif, or .png.
  • Images require a src. Including title and alt is strongly recommended.

Think about all the awesome stuff you can build online using images! Are you excited yet?