For this project, each person in my Creating online Media Class wrote down their names, their favorite kind of food, and a hex color on a slip of paper. Those slips were placed into a hat and we each drew one. With the information provided, we had to use HTML5 and CSS3 to design a restaurant website with a home page with an animated slideshow and three asides, social media buttons, a favicon, a menu page with at least 25 items, a logo, and three “dummy” links in the navigation bar.
My slip bore the name “Bethany Rau,” “Japanese” and “#FCE979,” a pale yellow color.
As part of the assignment I had to select a real restaurant site to emulate. Since I had to design for a Japanese restaurant, I chose to emulate the site of Kobe Japanese Steakhouse.
The most time -consuming element of this project was researching items for the menu! I can count the number of times I’ve been to a Japanese restaurant on one hand, so I didn’t know what would be normal to include on a menu. I didn’t want to just guess, so I spent hours researching popular Japanese dishes, sushi, bubble teas, sake and pricing.
Research aside, the next trickiest element to deal with was coding the animated slideshow. It is non-interactive, unfortunately, since I could only use CSS3 to set it up. I was one of the first to get my slideshow working, so I spent a lot of time helping my classmates troubleshoot theirs. I was happy to help, but it made for a long weekend of coding!
Now that I’ve mastered CSS3 a little better and I’m starting to learn Javascript, I’d love to go back and polish up this site. It was a great learning experience and I’d love to try taking it even further!
For now, you can view the current version of the site live at www.pixel-inklings.callyanncreates.com/310/p2/
The five photos I used for the slideshow were taken from the internet and are used here in accordance with the fair use in education act for academic assessment purposes only.