The first thing that I had to do in this project was to create the HTML structure based on a PDF file that was given to me. Once the HTML was in place, I wrote CSS using flexbox to place all of the elements according to the PDF file.

Once the layout was looking very close to the PDF, I added responsive features such as the srcset attribute to select the appropriate file size for the user’s browser. I also used SVG icons so icons with scale nicely to any viewport size.

Finally I used grunt to automate the resizing of all images to the sizes that I specified with srcset.