Treehouse Project #5 https://teamtreehouse.com/projects/an-interactive-photo-gallery
Before you start To prepare for this project you'll need to make sure you complete and understand these steps.
2 steps As with the previous projects, you'll submit your finished working using GitHub. If you need a reminder on how to use GitHub and GitHub desktop to create a new repository check out this workshop: Share Your Projects WIth GitHub Desktop Download the project files. We have supplied: gallery_mockup.png is an example of how the gallery page should look. photo_lightbox.png is an example of what the lightbox should look like when active. photo_captions.txt is the text you can use for the captions that should be displayed with each image in the lightbox mode. An images folder contains the thumbnail images for the gallery page and larger images for the lightbox. Project Instructions To complete this project, follow the instructions below. If you get stuck, ask a question on Slack or in the Treehouse Community.
7 steps Build the web page layout using HTML and CSS, using the layout in the gallery_mockup.png file. Create a gallery using the provided thumbnail images. Create a search box field. The design does not need to be exact, but the general spacing and arrangement of the elements should match the design of the mockups. Research, find and implement a jQuery plugin for a lightbox. This must include the following functionality and features: The ability to click on thumbnail images in the gallery and view them in a lightbox. A background overlay that appears and covers the entire window when displaying a larger image. The ability to add text captions to each image in the lightbox. Back and forward arrows to switch between photos when the lightbox is visible. Make sure there is a way to close the lightbox and return to the gallery view. Research, find and implement a jQuery plugin for the search box. This must include the following functionality and features: The search box at the top of the page should filters photos based on the captions. The photos should filter in real-time as you type, and only display photos that match the search. Make sure to check your code is valid by running it through an HTML and CSS validator. Links to the validators can be found in the Project Resources. This will help you spot any errors that might be in your code. There are a few exceptions that you don’t need to fix: Don’t worry about any warnings, we just need you to check any errors that might be there. If CSS validator flags use of calc, vendor prefixes or pseudo-elements/pseudo-classes these errors should be ignored. If HTML validator flags use of pipe (‘|’) in Google font links/URLs this error can also be ignored. You should also check for issues with your JavaScript code using JSHint, linked in the Project Resources. JSHint may show you some warnings, so make sure to check through those for any potential problems. You do not need to fix every warning listed but reviewing them can be useful.
Before you submit your project for review, make sure you can check off all of the items on the Student Project Submission Checklist. The checklist is designed to help you make sure you’ve met the grading requirements and that your project is complete and ready to be submitted! If you're having trouble with this project, make sure you take a look at this great study guide: Project 5 Study Guide
NOTE: A good practice is to check your project for cross browser compatibility. Making sure that it looks and functions correctly in multiple (at least three) browsers is an important part of being a top-notch developer. If you want, leave a comment to the project reviewer about which browser(s) the project was checked to ensure they are seeing things as you have designed them.
Some browser options:
Google Chrome Mozilla Firefox Internet Explorer/Edge Safari
Extra Credit To get an "exceeds" rating, complete all of the steps below:
2 steps Include a mobile-first design for both the gallery page and the lightbox: Use media queries to make sure that the photos and layout adjust for a mobile-friendly experience. Write your own JavaScript or jQuery code instead of using a jQuery plugin for the search/content filtering requirement. NOTE: Getting an "Exceed Expectations" grade.
See the rubric in the "How You'll Be Graded" tab above for details on what you need to receive an "Exceed Expectations" grade. Passing grades are final. If you try for the "Exceeds Expectations" grade, but miss an item and receive a “Meets Expectations” grade, you won’t get a second chance. Exceptions can be made for items that have been misgraded in review. Always mention in the comments of your submission or any resubmission, what grade you are going for. Some students want their project to be rejected if they do not meet all Exceeds Expectations Requirements, others will try for all the "exceeds" requirement but do not mind if they pass with a Meets Expectations grade. Leaving a comment in your submission will help the reviewer understand which grade you are specifically going for