A one page responsive website was built by using HTML, CSS/Sass and incorporating Ajax, JSON, and API concepts. The site dynamically populates a grid of images using a hashtag search, using Instagram's API. Additional functionality includes a 'load more' button that adds 12 more images.
- HTML/CSS, Sass
- CSS animation
- JQuery
- Ajax
- Gulp, JSON, BrowserSync
- Git and GitHub
- Scotchbox/Vagrant
This project added a lot of new additions to our tool kit. Learning how to reorganize our CSS more efficiently with Sass has been great. Using Gulp was a bit challenging at first but it is helpful to see live updates with BrowserSync instead of manually refreshing the page with each change. Automation tasks such as minification and autoprefixer have been useful timesavers as well.
This was the first time I was exposed to APIs and it took a little bit of time to wrap my head around the concept, however, I am excited to learn more and use it in future work. With this project, I was able to learn how to navigate the JSON object and pull out the properties I needed to populate my photogrid.