Project Description
A one-page website that dynamically fetches an Instagram API endpoint based on user input, and then displays the results on a grid on the page.
Tools & Methods Used
The following were used to build this site:
- HTML/CSS
- Flexbox
- jQuery
- AJAX
- Responsively designed for mobile, tablet, and desktop widths
- Gulp task runner with the following modules: Browser-Sync, SASS, Autoprefixer, JSCS, Minify-CSS, Notify, Plumber, Rename, and Uglify
- Git & GitHub for Version Control
Little Things I Learned
- wrapping input/button elements in a form element will enable form submission with an Enter key press
- use case for 'vh' units in the header
- use case for the overflow & text-overflow properties to hide the user info bar and usernames that were too long
- using the :hover pseudo-class on one element to activate a transition on another element
Project Epilogue
The most exciting thing I took away from this project was using Instagram API data to populate the web page. How to save and extract the required values took some time and thinking but finally arriving at a solution was rewarding. Being able to add elements and CSS properties using jQuery/JavaScript is similarly rewarding.
This project also introduced improvements to the developer environment with tools such as Gulp, Git, and GitHub. While a preprocessor like SASS and a task runner like Browser-Sync makes developing more efficient and convenient.
Overall, this project introduced many useful tools and showed how jQuery/JavaScript can be used to make a website more interactive.