Assignment 3
Due
Submitting your homework
We are going to use Github Classroom for this assignment. You need to have an account on GitHub and be logged in. Authorize Github Classroom here and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.
Please make sure each of your exercise-N directories are self contained, i.e. that you don't reference any files outside of the directory
(e.g. from your repo root or other exercises).
While having a common assets directory for all your exercises might be a good idea in general,
we extract each exercise directory separately (as it may be graded by different people), and that will result in your pages not working correctly.
Do not use root-relative URLs that expect a local server to run at a specific directory within your repo, and if you cannot avoid it, please document it in a README
otherwise links may be broken for whomever is grading your homework.
If you submit after the deadline, it will count towards your slack hours.
Exercise 1: Critiquing CSS Demos (20%)
Exercise 2: Making interactive CSS demos (77%)
As you may have noticed, CSS is much easier to learn with interactive demos. These demos can have interfaces that help you dynamically explore the design space. In this assignment you will make your own interactive demo for a small part of CSS. After the deadline, you can play with the demos your classmates made and learn from them!
First, sign up for a CSS feature you want to make a demo of in this spreadsheet (use your GitHub username). You can select up to two features and decide later on which one of the two you will make a demo of (please maake sure to free up the other one when you know so that another student can use it). Then, use HTML, CSS, and Mavo (or JS, if that’s your preference) to make an app that helps people interactively explore how this feature works and teaches them about it. It should be aimed at users who know CSS generally, but not this particular feature.
At a minimum, look up the CSS feature you chose using the MDN link(s) provided in the spreadsheet. However, you are strongly encouraged to do your own research, find where people struggle when learning this feature, and make your app so that it illustrates the pain points of learning this feature best.
Pick a CSS feature earlier rather than later: only up to 3 students can pick the same one, so if you leave it too late, you may find that all the ones you like are taken!
Want to make a demo of a feature (or set of features) that is not in the spreadsheet? Contact us and if it has the right scope we can add it!
Your assignment will be graded primarily on the usability of the interface you create, and on how well it achieves the desired goal of teaching CSS learners how the CSS feature works. To achieve that goal, your interface should:
Unsure if your demo achieves its desired goals? Get a classmate (who is working on a different CSS feature!) to use it and observe. Did they "get it" or were they confused? What did they struggle with?
# A note on scope Some of you will have broader features than others. E.g. `linear-gradient()` can be used in `background` too, that doesn't mean that the student who picks `background` needs to demo every possible gradient as well. Instead, the demo for `background` should focus on showcasing the different `background` parameters, with only basic control over the actual `background-image`, which is only one of `background`'s many longhands. Similarly, an app that demos `text-shadow` or `box-shadow` needs to provide a better shadow specification UI than an app that demos `filter`, of which `drop-shadow()` is only one of the many possible filters. Choose an appropriate level of depth that doesn't result in an overly complex demo. Be more liberal with breadth than depth. If there are shorthands in the CSS feature you picked, you need to make sure at least part of the functionality from every longhand is included in your demo. Similarly, if each parameter accepts multiple units, you are not required to provide UI to set all of them, or for any possible range. That would likely just clutter your interface and obscure its goal. You may pick one or a few units that are reasonable and provide UI for that. If you do want to include all, think about how to do so usably. If you want to broaden the scope of your demo, that's fine, as long as you cover all the functionality you would have covered without the broadening. E.g. if you have picked `radial-gradient()` but you want to make a general gradient generator that generates any type of gradient, that's fine, as long as it still demonstrates all parameters of `radial-gradient()` that you would have needed to demonstrate if you were only dealing with `radial-gradient()`. # Examples in the wild [Exercise 1](#ex1) contains a list of interactive CSS demos from around the Web. You can likely find many for the CSS feature you picked by googling property names and/or values and "generator" or "demo". However, do note that **most of these have usability issues** and often the CSS they generate is very old too (a good rule of thumb: when you see `-webkit-`, `-moz-` etc prefixes, the code dates back to circa 2009-2015). Take a look **so you can understand the problem you're trying to solve better, but not to imitate their UI decisions**. Furthermore, not all of these have UIs that could be implemented without custom JS. # Mavo examples of CSS generators And here are two examples of such demos, implemented with Mavo that we made for you, one for a value and one for a property, with some notes about how each attempts to make improvements over basic functionality. ## [`hsl()` colors](demos/hsl/) - Gradients aligned with the sliders to show the user what color each slider tweak will produce. - Gradients update dynamically to help the user explore the 3d HSL space - Checkerboard underneath semi-transparent colors to differentiate transparency with lightness. ## [the `filter` property](demos/filter/) - Editable sample image - Ticks on sliders for the midpoint when that is important (via `<datalist>`) - Small thumbnails previewing each filter individually to make it easier to experiment with multiple of them - Collapsible filters to just the type & preview, via the `<details>` element - Double duty: Type dropdown acts as header as well - Gradient on hue shift to indicate what each hue corresponds to Note that in the spreadsheet there are features that overlap with these. If you pick a feature for which we have provided a demo (or a very similar one, e.g. `backdrop-filter` instead of `filter`), you need to make sure you go a sufficiently different direction. Just turning in the provided demos with cosmetic changes will not earn you credit.