Photo Gallery Project

Using what you’ve learned about HTML and CSS, you are going to build a photo gallery! Below are some big-picture things to know, then you will be provided with a structure to follow to help you complete successfully.

Must-Haves

  • 30+ pictures are displayed in a visually appealing way
  • Read the requirements of the site you take any photos from on requirements to give credit to the photographer

Here is an example of something like you will build.

example photo gallery with cacti

Tips

  • The best galleries contain photos that follow a theme - maybe it’s about you! Maybe it’s about your favorite sport, city, animal, food, etc.
  • Use Flexbox
  • Use a Google Font if you have any text
  • Pexels is a great resource for photos. You can also use your own photos! Pro-Tip: give class names that briefly describe the image. That way, if you want to change the order, it’s easier to hunt down which photo is which.

Iteration 1 - Wireframe & Vision

  • Draw out your wireframe/vision for the way your Photo Gallery will look.
  • Like we did with the Twitter card, label each section with the HTML element that will be used
  • Find your inspiration! Decide on your theme, then find images that fit with it. Decide on colors, fonts, and any text your’d like on your page. Jot this information down in your notebook, a GoogleDoc or in comments in a CodePen. The collection of these fonts, color, images, etc. are commonly referred to as assets.
  • Make sure your wireframe and assets are approved by your instructor before moving on

Notice: you haven’t written any code in CodePen yet. The planning process is extremely important and professional developers spend a lot of time in this phase!

Iteration 2 - HTML

  • Write the HTML that makes up the skeleton of your page

Iteration 3 - CSS

  • Write CSS to get your Photo Gallery to appear they way you desire
  • Consider: white space, color contrasts, and content being centered (or not, if it’s clearly on purpose!)