Summer 2017 | University of California, San Diego CSE Department
Homework #2 - CSS Replication and Application
In this homework we explore the use of CSS,its often frustrating syntax, and how it might be used to support styling our class SoundBoard project.
CSS is not a trivial technology to learn, there are literally 100s of properties to master and many of the usage of many of these properties is not straight forward. To further complicate matters we find that browser support for CSS can be quite erratic and the use of vendor prefixed properties (ex. -webkit-) is not uncommon, but generally required. Presentation is quite important so given the complexity of implementing designs using CSS many aspiring Web developers give up and adopt CSS frameworks such as Twitter Bootstrap. This is not a surprising outcome as developer productivity can be significantly improved using a CSS framework, though this gain often comes at the expense of unique design and reduced performance. We will get to explore both the use of frameworks and raw CSS in this assignment.
Part 1 - Replication
We have a CSS challenge for you! We provide the HTML, but you must write most of the CSS to replicate this "beautiful" design.
Your design will have to be responsive, so on a phone device (or at reduced width) it will look like
Fortunately, we have provided you all the image assets and a starter CSS file with hints in it complete with these screen captures of the layout we want. You can download that Zip file here. Note: You must not modify the HTML there is no need to do so and if you do you expect to receive significantly reduced points on Part 1.
Part 2 - SoundBoard 2.0: CSS Attack
It is clear from HW1 that HTML is inappropriate for presentation. Even though we can do some things with HTML, we really must use CSS for presentation except in certain restricted use cases like email templates which actually need HTML presentation. In this portion of HW2 we will add design to "Template 1B" from HW1 in two different ways. The first version we will execute should use the popular framework Twitter Bootstrap. (You may use any version of Bootstrap you see fit)
Note: you may find it useful to modify your HTML template to make the Bootstrap version work. In fact it will probably get bigger and much less semantic.
The second version of your SoundBoard with CSS is to do a similiar design as you did with Bootstrap (at least roughly) using minimal vanilla style CSS. You may write it directly from scratch or reduce it from the Bootstrap version and modify to suit the new requirements described below.
The two versions may look very similar if not identical. However, if done correctly the second version should be significantly smaller and likely much simpler and even semantic in comparison to the Bootstrap version. In both versions of the file add in HTML and CSS comments indicating the file sizes and the load times of the pages on your test Android Phone throttled to 3G. Also note anything out of the ordinary from CSS or HTML validation in comments. Make sure you use the CSS validator https://jigsaw.w3.org/css-validator/ to check your work, but be forewarned it may not be easy to please this tool (Example: see a quick check of Bootstrap here) We will not grade you on valid CSS for the Bootstrap version, but validation will be taken into consideration for grading the second version.
25pts for Part 2 (10pts for version one, 15 for version 2)
Total: 50pts We may award up to 5pts bonus for groups we think that put in extra effort that puts them in the top 10% of the class. Part 2 Warning: If your vanilla version is not significantly smaller (50% or better) and measurably faster loading than your Bootstrap version you receive 0pts for it. How you accomplish this requirement is up to you.
Homework turn in will happen in two phases. Part 1 is due by noon Wednesday July 19 and as such it will force you to learn CSS in time for the midterm. Part 2 is due by Sunday July 23rd at noon so take your time and get your look and feel correct as you should not modify it much in future assignments.