The goal of this project is to display a solid understanding of how utilize javascript, HTML5 and CSS3 to a lightbox plugin for displaying images in a photo gallery. Additionally add the ability to filter the images via a search filter for filtering out only images matching the search string. This project provided only a desktop mockup, leaving the design and development of the layout for screen sizes relevant to mobile and tablet devices on the student.
- HTML5
- CSS3
- Client side Javascript
- Chrome Dev Tools
- Editors
- Terminal
- git and github
- Mobile First Responsive Design
- Fluid width Responsive Design
- Dom manipulation
- Lightbox plugin for displaying images and captions
- Javascript driven search filter
In this project, you will create an interactive photo gallery using JavaScript and jQuery. Thumbnails and photos will be provided with descriptions. At the top of the page you'll have a search area where photos will hide and show depending on user input. When the user clicks on a thumbnail, the photo will display in a lightbox. There should be a back and previous arrows to cycle through photos.
NOTE: The Front End Web Development Techdegree is meant to train you in HTML, CSS and JavaScript, and let you practice and show your mastery of these fundamental building blocks of the web. Because of that, please avoid using frameworks like Bootstrap, Foundation, Skeleton, and so on for this project. Even though you may end up using frameworks like these professionally, you still need to know and be able to implement designs with your own knowledge of HTML, CSS and JavaScript.
In addition, please avoid submitting any projects that rely on a server-side technology like PHP or Ruby on Rails.