Time Needed

Approximate Time needed : 1 - 2 hours (including reading and searching for photos)

What You'll Learn

This project should help you get familiar with putting images into websites, and the proper file formats for a given situation.

Read Me First

• Chapter 9, White Space is Not Your Enemy (pg 136 - 158)
• Chapter 7, Learning Web Design (pg 123-132)

Step-by-Step

1. Create an HTML file (03photos.html) in your Project Portfolio folder.
2. Find four images from the Creative Commons (make a note of where each image came from & who shared it) or from another free stock photography website (see instructions below). These images should be at least 500px by 500px. Create a small thumbnail version of each image (each thumbnail should be no larger than 256px by 256 px). You may also use photos of your own.
3. Download the images, then create a thumbnail version (no larger than 256px by 256px) and a large version (no larger than 1000px by 1000px) of each photo. Use photoshop or another tool to create your versions.
4. Keep your image files organized by putting them in the "images" folder in your Project Portfolio folder.
5. Using the img tag, display the thumbnail images in your 03photos.html file.
6. Create at least four additional HTML pages (one for each image, so: photo1.html, photo2.html, etc). Each additional HTML page should include (at minimum) a heading, credits for, and a large-size (no larger than 1000px on either side) version of each image.
7. Go back to 03photos.html and link thumbnail image 1 to HTML page 1. Repeat for each additional image.
8. Add a link to your new page to your Project Portfolio 03photos.html

Where Can I Get Images? If you are using photos found on the internet, be sure that they are not copyrighted. Read more about copyright and internet images.

Dustin Senos has curated a list of great places to get stock photography without having to pay for it. Please be sure to pay attention to licensing (frequently you will see references to Creative Commons licensing).

Delivery

When you have completed this project, commit it to your GitHub Project Portfolio repository. Don't forget to add a link to this new page from your index.html page!