An Ode to Peppers
Code is scary. My first coded webpage.
As someone who has never fully dove into the world of HTML, an assignment to fully code a webpage was intimidating. Tags, indexes, divs; the language of coding has always seemed foreign to me. The assignment was clear, take any object and make a page about it. Although nervous at first I settled upon an object I had already written about for this class, chipotle peppers in adobo sauce. With tutorials and online help forums open I was ready to go.
My first pass was to make a mock purchasing page. I was able to get three content columns but this success did not last long. The columns didn’t allow me to place the content as I wanted and were proportionally off. Then set in the standard coding frustration. The normal rollercoaster of failure and success within my text editor began to lower my excitement for this project. I went back to the drawing board and settled on a simpler but more interactive page.
I began centering and stacking content. First I added a paragraph explaining the item of focus and then began adding other static elements like photos. My page was beginning to take shape and with the implementation of a CSS file even look presentable. I utilized coolors.com to build out my color palette and Google Fonts to find a fitting look. After only a few hours on this new path my page came to its first level of “done.” A header with some text, pictures, and even a video; boom a webpage. With these simple elements present though I wanted to spice things up, no pun intended.
Continuing to look at W3schools.com for help, I found multiple Java-Script elements that could add a level of interaction into the page. The first element was brought in to help set the mood.
If people were going to look at this page with the context of chipotle peppers I felt a certain mariachi flair was needed. Users could now click on a small audio player and experience the sounds needed to transport themselves into the world of chipotle. I then stumbled upon a simple mouse triggered function. This process would allow for users to select one of two buttons and see according images on the screen. I utilized this script to ass users whether or not they liked peppers. If they did, a happy face would appear and if not a sad face would appear. The final and most complicated interaction element I added was intended to spice up the image viewing on the page.
I didn’t like the plain stacked nature of my images so I began looking at how to implement a selector. Back on W3 Schools I found a simple and easy method of creating containers and then scripting those containers to act. Minimal customization was needed and the image selector integrated seamlessly.
My page was beginning to take shape but lacked any rationale. Yes there was content but there was no justification for it. I decided to space the content out and add some text to create a journey of evaluation on the part of the user. As a viewer would scroll down they were now learning more and more about these peppers. The pieces now worked together as a linear narrative instead of a hodgepodge of pieces.
I hope you enjoy using the site and learning a little about my favorite peppers.
Here is a link to my Git Hub code repository.
