Creating an Image Gallery

What is a media query used for?

to search for media to be embedded on a webpage

to search for media content similar to the webpage

to adjust styles of webpage for devices of various screen sizes

to adjust content of webpages for devices of various screen sizes

What value should be used for the opacity property to make an element 75% transparent?

25%

.25

75%

.75

The space an element takes up on a page is determined by:

width and height

width, height, and border

width, height, border, and padding

width, height, border, padding, and margin

Images saved at a low size and/or low resolution, resulting in smaller file sizes and faster webpage loads, are called

icons

thumbnails

logos

previews

Props to the Public Domain

Create an image gallery from a NYPL collection.

Describe public domain

1. Set up folder structure

Create a folder for a new website named "site".
Create two new sub-folders named "images" and "thumbs".
Create an index.html page in the "site" folder that will become a webpage to display an image gallery.

The resulting file structure should be as depicted here:

2. Download Images

The New York Public Library provides thousands of digital collections from the public domain that are free to share and reuse. Download 12 or more images from one of these collections and save them into the "images" folder. The images should have either a width or a height of at least 1200px.

3. Prepare Images

Use Adobe PhotoShop or some other photo editing software (GIMP is free) to prepare the images for a web gallery.

Rename the images so they are concise and do not include spaces or other special characters.
Copy the images into the "thumbs" folder.
Resize any landscape image (width is greater than the height) in the "images" folder that does not already have a width between 1200px and 1600px so that it has a width of 1200px.
Resize any portrait image (height is greater than the width) in the "images" folder that does not already have a height between 1200px and 1600px so that it has a height of 1200px.
For the images in the "thumbs" folder, crop off the sides of the landscape images and the top and/or bottom of the portrait images so they have the same width and height. Then resize the resulting square images to have a width and height of 200px.

4. Create a webpage

Use the index.html page previously created as a web page to showcase the collecition in a gallery.

The thumbnail images should be displayed in the following manner:

6 images per row when the page is over 1200px wide.
4 images per row when the page width is between 800px and 1200px.
2 images per row when the page width is between 400px and 800px.
1 images per row when the page width is less than 400px.

This activity will be continued after the next lesson!

nothing extra for this lesson :(