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
Copy the repository link into your clipboard.
From your Replit dashboard, click "Create Repl".
Click Import from GitHub in the top right corner instead of choosing a template.
Click on the "From URL" tab and paste in the link above.
Click on "Import from GitHub". You'll see a title page with a navigation bar to view other pages.
Click on "Flex by Row".
Click on "Flex by Column.
Instructions for the Project
Upload 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.
Last updated
