JQuery Website


Requirements/Project’s Goals

This project required students to design and develop a responsive, mobile first website for a fictional restaurant using semantic, situationally-appropriate, and meaningful HTML. The project also required at least two jQuery plugins in the site and at least 5 lines of custom JavaScript code that will add content to the page. I chose Shirley’s Sandwiches from the TV show Community for my project.


It was important that the design and style of the site was consistent with the branding of restaurant we chose. So, most of my inspiration for the look and feel of the site came from watching the show and gathering images of restaurant itself. I wanted to the site to be reflective of my style as a designer, but also maintain the brand of Shirley’s Sandwiches on the show. One of the ways I accomplished this was redesigning the logo and creating a style tile guide and a prototype of the site.

Targeted Audience

The audience for this site would consist of the demographic depicted in the show, Community – mostly young adults attending college/community college who are interested in gaining more information about the campus restaurant Shirley’s Sandwiches.

Skills/Techniques/Programs used

This project was a culmination of all the skills and knowledge we have learned in this class, and in the program as whole. I used Illustrator to design the logo, Photoshop to edit and optimize images, the terminal and GitHub for version control, and Atom editor for all coding. I also used the HTML5 Outliner and the W3C Validator to check all of my code.

Design/Coding Stages/Steps

First, I began by creating a style tile, which served as style guide throughout the project, and developed a prototype of the site rather than a static mockup. Next, I created the structure of the site in HTML and outlined the content for each page of the site, including images and text. Then I added all the styling for the pages using CSS and ensured that the site was fully responsive; I utilized media queries to create a mobile first design, beginning with the smallest, mobile screen size and then tablet and desktop screen sizes, respectively. Lastly, I added any JavaScript and jQuery, both plugins and custom code, in order to add elements of interactivity to the site.

Favorite Aspect of Project

As a designer, my favorite aspect of any web project is always the CSS. This is where I can get creative and add styling and design touches to the site to create the aesthetic I am envisioning for a digital space. As with any design project, it is important that form always follows function, but I definitely enjoy the creative process of making a site visually appealing.

What did you learn while completing this Project?

I tend to identity more with the role of a designer than a developer, so I began this course with some doubts about my abilities as a developer. This course, and more specifically this project, has certainly given me more confidence in myself both as a designer AND developer. I am grateful that this course pushed me outside my comfort zone and helped me develop my skillset as a web designer!