Create a simple image gallery grid page with an on-click event for the images that opens an overlay pop-up with a short description (A paragraph of three to four lines) about the image clicked.
- Divide the page into 4 columns with an unknown number of rows.
- Columns are equal in size with 10px spacing between them and the spacing between rows is always 10px.
- In every column 1 image is displayed with the title below.
- you can use placeholder images generated from https://placeholder.com/, images can be either portrait (150px X 200px) or landscape (200px X 150px), but you don’t know that upfront. A row can thus have only landscape, only portrait, or a mix of landscape and portrait images, thus, rows can have unequal height.
- images and titles are aligned in the center of the column, the title is 5px below the image.
- The maximum width of the overlay pop-up is 600px, this pop-up will appear when an image is clicked.
- You are free to add subtle transitions and/or animations.
- CSS Front-end frameworks such as Bootstrap and Foundation.
- Javascript libraries and plugins such as jquery.
- The validity semantics of the HTML5 created and how are accessibility, usability and SEO considered in the code.
- The cross browser compatibility (ie 11 and higher).
- Responsiveness of the page.
- The structure of the CSS.
- The structure and pattern used in the created JavaScript file/s.
- The user interface and user experiance of the page
- The structure of the project folders and files.
- Unit tests for components
Note: You can do the assessment using React/Angular.