What is the project?

The fifth project of the Treehouse Front-End Web Development Techdegree program was the Interactive Photo Gallery. The premise of the project was to create an interactive photo gallery from scratch which matches the mockup that was given by Treehouse. The project must incorporate a lightbox plug-in and have captions correctly displayed on each picture. The project should have the plug-in correctly working so you can close the plug-in and filter through the photos without any issues. A searchfilter.js plug-in must also be used in the project and filter the photos out when they are typed into the searchbar.

Photo of my interactive photo gallery project which a has beige background and searchbar

How was it put together?

First using CSS Grid I created the photo gallery which correctly matched the mockup using Chrome DevTools. I made sure the spacing was correct and I gave the photos a nice border-radius. I looked at the documentation for the lightbox plug-in and through some trial and error I had it working correctly. After that came the searchfilter.js plug-in and after reading the documentation I implemented the plug-in to the searchbar. The project was then submitted to Treehouse.

What were the challenges?

The first time I submitted the project there was a couple issues with the lightbox plugin. The captions exit button and filter photo arrows were not displaying. The script tags needed to be put at the bottom of the HTML file and async needed to be removed from the tag. I quickly changed the script tags and async tags and the second time around I passed the project.

What did I learn?

Imagery and photos are an important part of any website as they make the website livelier and more interactive. This was my first time using and implementing plug-ins in a webpage and it gave me the knowledge of implementing them in the future. CSS Grid is important in web development as it correctly centers photos on a page and is widely used in the web developer community.

View Project Page!

View Project on Github!