Interactive Gallery

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

Your gallery should consist of a single HTML file.

All images of the gallery should be dynamically added to the page using JavaScript.

There must be a interactive component to your gallery in which additional information is revealed or added on the page.

Your gallery must be optimized for a variety of browsers, devices and screens sizes.

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.

Your gallery should utilize modern layout techniques. While it is encouraged that you use Flexbox or CSS Grid, it is NOT required.

You may NOT use a modern CSS Framework like Bootstrap or Foundation, or any CSS and JavaScript Libraries. Exception: You may use a [login to view URL] or normalize.css.

If you choose to use web fonts, which is encouraged, use only fonts that you have the rights to use.

The gallery should include a minimum of 12 images. You may use stock images as long as you have the rights to do so.

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.

Create a [login to view URL] 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.

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.

CSS JavaScript HTML

Project ID: #20321208

About the project