Unit07 Responsive Gallery

Overview

The purpose of this assignment is to build a responsive image gallery using native lazyload and css grid.

Tools

• Adobe Photoshop to crop images

Objectives

At the end of this module, you should be able to...

• Add a new page to your site
• Update and cleanup the navigation
• Change you CSS Preprocess output path to a relative path
• Use CSS Grid with different min values
• Iddentify the optimal size for images
• Create a withn page link

Watch

• Kultra
• 4610 07a- Gallery Page Overview
• 4610 07b- Add New Page with Menu Item
• 4610 07c- Preprocessor Settings
• 4610 07d- CSS Grid MinMax and Optimal Image Size
• 4610 07e- CSS for Gallery Images
• 4610 07f- Within Site Links
• 4610 07g- Verify Lazy Load

Reflection Questions

After reading the following article, write me a short 1-2 paragraph summary and submit it in Canvas.

• Please submit a 1-2 paragraph summary on Everything I Know About UX Research I First Learned From Lt. Columbo by Slava Shestopalov

Assignment Example

• View the small screen layout
• View the medium screen layout
• View the large screen layout

Assignment Checklist

Unit07 Responsive Gallery (10 pts)

Image gallery

• Locate 12 images related to your site
• Crop them to the appropiate size for your grid column layout
• Use Grid and minmax to create responsive columns
• Implement two CSS hover effects

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail