Animated Circular Progress Bars

For this I used HTML, CSS and javascript.

Responsive Web Designs

All website elements are responsive and made to display properly on all screens. I am able to do this by using the @ media rule then specifying a max-width. For the phone I use a max-width of 768.

High Resolution Images

On the left is a low resolution image and on the right is a high resolution image. All of the images on the this website are high resolution images. To do this I will measure the size of the area I want to cover, then double that resolution and create a new image. Next I’ll go into the code and set the width to the original size (not the doubled size) using either inline CSS or an external style sheet. By setting the width to the original size in the code but using an image that’s double the size is one way to implement high res images onto your website. These higher resolution images are also referred to as retina images, named after Apple’s higher dpi retina displays. Also, the images are made using “save for web” which compresses the files so they are webpage ready and don’t take a long time to load.

TablePress Tables

These tables are great for displaying data onto web pages. The Tablepress Plugin makes it very easy to import excel style tables from spreadsheets. These tables can be exported as individual CSV files or you can load CSVs from excel spreadsheets into tablepress.

Milkshake Font

Specialty Fonts & Icons, Milkshake and Font Awesome

Menus for Restaurants

This menu is responsive meaning it will work on all screens. To make this I used HTML and CSS and for the logo and background I used Adobe Illustrator.