jQuery Tutorial on CodePen

Firstly, I chose to use the official jQuery logo as the logo for my jQuery Tutorial website. I west to jQuery's brand site (https://brand.jquery.org/) and downloaded their Logo Suite. This included their logos in EPS format, so I used Illustrator to export the EPS file as an SVG file in order to use that for my website's logo.

Secondly, I decided that Google's Roboto font seemed to be the closest free match to the jQuery logo's tagline font (Klavica) and chose it for the main font for the website. I also went with the Roboto Slab font for headings, it being a serif font which contrasts nicely with the sans-serif Roboto font. Finally, I chose the Roboto Mono font for all of the code representations on the website.

As for coloring and formatting the code font in order to separate it visually from the rest of the website, I used the hilite.me website to automatically inline style those lines.

As for coloring, I chose to follow the jQuery Brand Guide as much as possible. The "black" in the navbar is "jQuery Black" (HEX: #333333) and the "light blue" used to indicate the active navbar item is "jQuery Secondary Blue" (HEX: #7ACEF4).