WHY TOAST?
I enjoy absurdity, attention to detail, and putting in a little extra effort into my assignments. I previously had written a treatise on PB&J toast which entertained me so thoroughly while writing. That it occurred to me that in order to make a project easy to work on and put extra effort in to I need to put humour into it. What is more humorous than a wholesomely written webpage dedicated to the construction of PB&J toast.
HOW'D IT GO?
John Clouthier V1 CIS155 4/17/19- While I am using my original treatise as a basis of construction and layout the ability to link words to other webpages inspired me to alter the original content in the instructions page. I was going to include substantial definitions on what for example a bread was but instead I decided to incorporate that linking feature which in my opinion works well with the medium its presented in. I was also going to include a separate webpage discussing the method and reasoning behind PB&J toast, however i decided that users would gain more from the content having it be available for them on the front page. The CSS portion included a lot of experimentation, eventually I decided that a darker color theme and grey text on purple background encapsulated in brown was a good way of representing PB&J toast as well as make it easy on the eyes to read. The most difficult part I had with the CSS was implementing the internal styles and in element styles. But after figuring out that including the styles after the external style sheet is called on It made testing and implementing the in element and internal styles much easier. Finally I used a regular expression to replace tabs with four spaces to maintain soft spacing.
V2 CIS155 5/3/19- In this version I’ve added a fixed background image, rounded the borders of the Different elements, I’ve added emojis that appear after being hovered over. I also mapped that toast scale to a future table. I have added abbr elements around some vocabulary. as well as a fixed translucent warning that When hovered over makes it clear that the site may contains nuts. Having feedback on my use of emojis encouraged me incorporate those more into my document. I initially wanted to have the toast scale be scrollable with an overflow because when I initially had the size of that image Fit the screen, the mapping done to it stopped working and covered the wrong sections. however I couldn’t get it to create a scroll bar vertically. So instead I used a design to have it appear to be floating above the toast. I imagined that the website is just a large toast with the content being the toppings.
V3 CIS 155 5/16/19- In this version I finally added and styled the table that has been commented out since version 1. The styles of the ratios in the middle column are meant to illustrate the ratios described. I also implemented a specfic design for about page of the mobile website, changing the background color, as well as changed the display of the navigation bar in the mobile version to be a flex box model with additional pulldown menus. While in the desktop version this provides easy subject navigation . I also changed the style of the THIS SITE MAY CONTAIN NUTS footer to be at the bottom of the page. finally i was able to redesign the about page for the mobile site to have the updates appear in chronological order.
V4 CIS 155 6/3/2019- In this version i added a secret hyper hidden html page that leads to a page intended to be a easer egg showing another love of mine: Sunsets and Maximalizim. A form is added to this page to provide navigation to the secret page that validates to display the link to the other page. All video and audio came from open sources and are credited in the html code. Wireframe followed featured in V4 write up. Animated water and pop-up media was anothe feature i wanted to include. I also redesigned the navigation , and modified the mobile version of the site and removed all flexboxes