CSE 134B: Client-Side Web Languages

Winter 2017 | University of California, San Diego CSE Department

Homework #3 - Building Out Clickable Templates in HTML & CSS

This homework presents an opportunity to use HTML and CSS to implement a click-thru prototype of our class project. The emphasis on this homework is to explore the use of CSS to make our prototype high enough fidelity to give an end user a sense of what it might be like once fully implemented. We also are going to explore the effects of various CSS approaches on the application.

In the previous assignment we built out HTML templates and found that without a visual representation it became quite difficult even for us the creators to invision the form of the application. In this exercise we are allowed to make our application look like it is finished by using as much CSS and imagery as we like. We will not use any interactivity other than providing links between pages and using HTML attributes or buttons to simulate what form activity might feel like. If we do our job well our templates should be presentable to a testing user who could click thru them in a browser (on phone or desktop) and gain a sense of how the app might work. There will be no code here. If JavaScript is required for some simulation it can be vanilla JavaScript only and limited to no more than 10lines per file. It should not be required the point of this assignment is not programatic implementation, but simulation. Don't worry the next assignment will allow us to add as much JavaScript as we like to implement the application. We delay that effort until via our prototype we have a better sense of the app's flow.

A secondary goal of this assignment is to understand the ramifications of the use of technologies in this case CSS. Since we are using CSS and images heavily we want to see if we can measure the impact on us (the developer) as well as the end user (and their browser) of choices we make. To explore this we need to implement the screens in two ways. The first way is a vanilla CSS execution where we author all the rules ourselves and there is nothing extra provided. The second is to use a framework such as Bootstrap to implement the screens. We are going to record our productivity with each measured by rough time taken (in your work hours) for each approach and also the impact of the solution in terms of file size and rendering time. To make the difference obvious the end user render times should be measured on an Android device with a 3G network throttle. This can be accomplished using a USB cable tying a phone to your system and using Chrome Dev tools to throttle the connection. The TAs will be using a device like this BLU or something similar. No particular device is required but understand if when looking at a chart like this one using an iPhone 7 or Pixel phone you are not getting an accurate reading of what typical users will experience. You may do the versions sequentially or in parallel, but logically you may find doing the vanilla version first makes the most sense for comparison and framework evaluation.

Your turn-in will include two versions of your app prototype that should be reachable online at your hosted location. You also must provide the repo information for the TAs to look over your efforts. The TAs will provide specific information in channel to help you with turn in logistics. Most importantly you will also need to provide a write up that discusses your findings with the two methods employed. You should provide numbers in terms of work effort (lines of code, hours taken, etc.) as well as user impact (load times, byte count, etc.). Your write-up should also provide a reasoned discussion of when you would want to employ each approach. Try not to declare one way the winner, instead present thoughts on how and why each approach you take would be valid for one situation or another. The write-up should be no longer than 3 pages and be succinct and to the point.

Back to CSE134B


  • 15pts for executed screens in CSS/images (framework way)
  • 25pts for executed screens in CSS/images (vanilla way) - extra points because likely it takes you longer.
  • 15pts for analysis (5pts for each version and 5 points for discussion about appropriateness)

The CSS points will focus on four pieces with slightly less emphasis on the visual execution part. The considerations are visual execution, syntactical correctness (use the CSS validator if you like), file and rule organization particularly as related to class, id and element use, and of course browser compatibility and performance

Total: 55pts, the top 3 executions will receive 15 extra points

Due Date: 9PM Friday Feb 18th.