MTM6230

Interactive Gallery Project

Introduction

Whether it is images, videos or some other medium, galleries are an excellent way to display your work to the world. With the use of JavaScript, these galleries can build dynamically and react to the user's action.

Objective

You will design and develop an interactive image gallery. In addition to being build dynamically with JavaScript, users should be able to reveal additional information (larger version of the image, details about the image, etc) by interacting with the gallery and images.

Requirements

Create any necessary HTML, CSS, and JavaScript files to create your interactive gallery. Your gallery must adhere to the following requirements.

  1. Your gallery should consist of a single HTML file.
  2. All images of the gallery should be dynamically added to the page using JavaScript.
  3. There must be a interactive component to your gallery in which additional information is revealed or added on the page.
  4. Your gallery must be optimized for a variety of browsers, devices and screens sizes.
  5. Your gallery should strive to meet accessibility standards. This should include semantic markup in logical order, readable text, alternative text on visual elements, and functional using only the keyboard.
  6. Your gallery should utilize modern layout techniques. While it is encouraged that you use Flexbox or CSS Grid, it is NOT required.
  7. You may NOT use a modern CSS Framework like Bootstrap or Foundation, or any CSS and JavaScript Libraries. Exception: You may use a reset.css or normalize.css.
  8. If you choose to use web fonts, which is encouraged, use only fonts that you have the rights to use.
  9. The gallery should include a minimum of 12 images. You may use stock images as long as you have the rights to do so.
  10. Make sure that all images are optimized, and that they respond (grow and shrink) to the layout. You do NOT need to create multiple sizes of your images or utilize <picture> tag and srcset, sizes, and media attributes. Although it is strongly encouraged.
  11. Create a README.md file and save it in the root of your site. Inside the file include a brief description on how you created your interactive gallery and your reasoning for your design choice. Your reflection should include what challenges you faced during development and how you overcame those changes and explain what you learned by creating your interactive gallery.
  12. When completed, create a zip file of the entire site, including images and other resources, and submit it to the Interactive Gallery assignment on BrightSpace.

Example

The following example demonstrates what the final product COULD look like.

Rubric

Submissions will be graded on the following criteria

Design (Max: 20pts)

The user experience and overall appeal and creativity of the interactive gallery. This section will review how the colors, fonts, imagery, whitespace, animations and structure affect the presentation of the gallery.

Interface (Max: 20pts)

The user interface and responsiveness of the interactive gallery. This section will review how well the site was optimized and tested to work on many devices, browsers, and screen sizes, and how much effort was made to ensure that the web portfolio was accessible.

Interactivity (Max: 20pts)

The dynamic and interactive experience of the interactive gallery. This section will test the gallery interactivity to ensure that JavaScript is functional and achieving its intended purpose.

Reflection (Max: 10pts)

The written and oral reflection of your efforts to create the web portfolio. You should reflect on:

  1. HOW the interactive was created, what techniques or technologies were used, what challenge were faced and how you over came them
  2. WHY some design / functional choices where made, and their purpose
  3. WHAT you learned from creating the interactive gallery