For these animated progress bars 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.
Table 1
TITLE
FILE TYPE
FILE SIZE
First Responders Flyer
JPG
1.76 MB
Automotive Safety Flyer
JPG
3.59 MB
Food Service Flyer
JPG
3.38 MB
Industrial Flyer
JPG
3.72 MB
Table 2
TITLE
FILE TYPE
FILE SIZE
Medical Safety Flyer
JPG
2.91 MB
Janitorial Flyer
JPG
3.05 MB
Fentanyl Flyer
JPG
1.59 MB
Face Shield Flyer
JPG
1.03 MB
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. For making tables that have different color headings I had to write CSS code which will change the background color based on the table ID number.
Milkshake Font
Specialty Fonts & Icons, Milkshake and Font Awesome
Above, I have installed font Milkshake using Font Squirrel’s font generator which requires adding @font-face and copying and pasting the rules into my style sheet. I also uploaded the necessary files to the FTP server.
To install icon fonts such as Font Awesome, I copied and pasted the kit code below into my header.php file. Once this has been added and the php file has been uploaded onto the server I am now ready to use Font Awesome. Font Awesome icons can be found in the header, footer, homepage and contact page of this website. <script src=”https://kit.fontawesome.com/8c031aa2eb.js” crossorigin=”anonymous”></script>
Clam Chowder
7
You must try our award winning New England style clam chowder!
Fish Sandwich
9
Our classic fish sandwich with tarter sauce, served with cole slaw and fries.
Crab Cakes
10
Made from only the finest Maryland crab, served with cole slaw and fries.
Clams Casino
12
Clams casino with bacon, served with garlic bread.
Sea Trout
15
Baked sea trout in a lemon butter sauce, served with vegetable, cole slaw and fries.
Stuffed Jumbo Shrimp
17
Jumbo shrimp stuffed with our house stuffing, served with cole slaw and fries.
Baked Stuffed Cod
19
White cod fish stuffed with our house stuffing, served with cole slaw and fries.
Fresh Lobster Tail
22
Fresh Maine lobster tail with lemon butter sauce, served with cole slaw and fries.
Menus for Restaurants
This menu example is coded using HTML and CSS and is responsive meaning it will display properly on all screens.
