GRC 339: Assignments

CSS photo gallery

Once again, I’m providing the structure for a webpage, and your job is to edit both your HTML and your CSS files to make the thumbnails control the main image and page match the following layout:

Desktop

California photo gallery page, desktop view.

Mobile

California photo gallery, mobile view.

Publish your pages on the URL: username.github.io/grc339/css-photo-gallery

As usual, the assignment is similar to the video. But there are few differences beyond the style:

  1. Instead of three images like in the video, there are four images in the assignment.

  2. Instead of Flexbox, I used CSS Grid for the navigation.

  3. The transitions from one image to another should be done only with transparency, not movement.

  4. The transitions should take half of a second, instead of the full second.

Set up

  1. Download this zip file.

  2. Unzip the file. It contains one HTML file, four images, and one CSS file.

  3. Open the HTML and CSS in VS Code (or your text editor of choice).

  4. Open the HTML file on Firefox.

Tasks

  1. Give the proper value to the following lines on the HTML: 39, 42, 45, and 48.

  2. Give the proper value to the following lines on the CSS: 32, 33, 34, 40, 41, 42, 57, 61, 62, 63, and 68.

  3. Don’t change anything else on your HTML or CSS.

Requirements

  1. The transitions from one image to another should be done only with transparency, not movement. (Which is different from the video.)

  2. The transitions should take half of a second. (Again, different from the video.)

  3. There needs to be a gap of 0.2em between the thumbnails in the navigation.

Hint

There are several possible values for the line 62 of your CSS. You want to use the one that makes more sense semantically. Remember, it’s a repetition of the same width four times, but you don’t know what width is that, especially with the gaps. And you don’t want to do complex maths, you just want to make sure that each one of them takes the same fraction of the navigation grid width. (I’m afraid I can’t give you more hints without writing the value for you.

Evaluation

You’ll be evaluated on your technical skills using HTML and CSS, making the layout work as indicated above.

Submission

  1. You don't need to submit anything to Canvas.

  2. Go to your grc339/css-photo-gallery/ folder in your public repository on GitHub. ➤

  3. Upload all six files (index.html, photogallery.css, and the four images) to your GitHub repository. ➤

  4. Make sure to click on your name to check if it’s working.

Check Canvas for deadlines.