Image Gallery with Flexbox and Popup Modal

Lots of websites have image galleries. You'll find them on ecommerce, recipe, news and blogs. They vary is size and shape. For this side project, I created a simple gallery with FlexBox and a popup modal.

The Process

I have used this classic grid image design pattern in several projects as a web developer. The difference is I'm using a pop-up modal to display the images when you click on them.

First, I compiled 8 images that from my blog that I liked. Then, I wrote the HTML code to create the gallery. Next, I used FlexBox to layout the images in a grid. Once the grid was working, I wrote the JavaScript that opens a modal and closes it.

The following skills and technologies I used to build this site:

• HTML and CSS
• FlexBox
• JavaScript

The Result

An image gallery created with HTML, CSS and JavaScript.

Website:  Image Gallery