Responsive Website and Use of Plug-Ins

Responsive Website: Training Paws

Project Overview

For this Project, my goal was to create a responsive dog training company website. This website would have a burger menu at certain viewport width, a video banner, three other plug-ins to show case content. The three plug-ins I chose were Lightbox, Carousell and Masonry.

Brain Storming

I took reference from two websites, but for this project only one webpage was needed, so I gathered what copywrite would be needed for each site on to one single page. I really wanted bright colors to represent the outdoors and the fun in owning a pet, so I wanted to incorporate the color cyan into the style guide. I found a color palette on called lemon water. Lemon water has the colors: aqua, yellow, blue green, and gold. Aqua is a variation of cyan so it worked out great. For all the plug-ins I looked for their documentation so I could insert the external files needed for each plug-in. I chose to use jQuery to initiate all my plug-ins for simplicity.

Burger Menu


I first built my navigation and linked my external style sheets, and JS files. I inserted the logo onto header. The rest of the HTML I followed the documentation for the plug-ins that I inserted. I also went on (in reference below) to copy the link for jQuery. I flexed the header to so that the logo and the menu would be in a row display. Then I used CSS and JavaScript to turn the regular menu to a burger menu when the viewport width is smaller.



I used masonry and lightbox to display images, and I used flickty for displaying prices. To use these plug-ins I followed the documentation, and place the images into the HTML file the same way it did. Then linked the external CSS and JS files downloaded from their website. All these plug-ins are initiated with jQuery, so I needed to link jQuery onto the HTML file as well.