Web Development with HTML and CSS

Creating an Image Gallery

download project files
Assessment
Activity
Enlightenment
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.

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 :(