Project: Image Gallery

In this project, we'll create two image galleries. They both use a FlexBox layout. The first arranges images by row and the second by column. This project is based on a blog post from LogRocket. Reading developer blogs like those provided by LogRocket is an excellent way to learn new coding techniques.

Create a Replit Project By Importing from GitHub

To help you start this image gallery project, a repository on GitHub has fake images set up. You can import this repository code into Replit to start a new project.

This is the URL to the repository containing the image gallery code: https://github.com/rebeccapeltz/image-galleries

Video Walkthrough

See this video to learn how to import code from a remote repository to create a new Repl. Once you have imported the code, you will see that it is still synced with the original repository, which you may not be authorized to update. The video shows you how to remove that connection and establish a new one to a GitHub account you are approved in Replit to use.

Instructions for Importing a GitHub Repository

1. Copy the repository link into your clipboard.

2. From your Replit dashboard, click "Create Repl".

3. Click Import from GitHub in the top right corner instead of choosing a template.

Initiate Import a Repository from GitHub into Replit

1. Click on the "From URL" tab and paste in the link above.

Complete Import from GitHub into Replit

1. Click on "Import from GitHub". You'll see a title page with a navigation bar to view other pages.

Click on the "Flex By Row" button on web page

1. Click on "Flex by Row".

Click on the "Flex By Row" button on web page

1. Click on "Flex by Column.

Click on the "Flex By Column" button on web page

Instructions for the Project

sixUpload or create links online for at least 6 images to put into the galleries. Import the starter code. Notice that the Flex by Row code shows the title below the image, but the Flex by Column code uses animation to overlay the title on the picture when you hover over the image.

Ensure you can spot the code patterns described in the readings in Notes: Flexbox.