6.4500 Design for the Web: Languages and User Interfaces

Assignment 4

Due Wednesday, March 4, 2026 at 11:59 PM

CSS is much easier to learn with interactive demos. These demos can have interfaces that help you dynamically explore the design space. In Exercise 1 you'll critique existing CSS demos. Then, in Exercise 2 you'll create an interactive demo of a CSS feature, graded on usability and how well it teaches the feature. This week also offers optional retrogrades for some earlier exercises.

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.

To submit the assignment, please visit Canvas and submit the URL to your final commit that you want us to grade. A commit URL looks like https://github.com/designftw-YEAR/hw4-username/commit/b59f14ba05869b3067724aa6d2006667a54c8e7d. You can submit as many times as you want. This is important. Your homework is not submitted and is accruing slack hours until you do this!

To make sure your homework is graded correctly, please follow the following:

Please make sure each of your exercise 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 (URLs that start with /) or absolute localhost URLs, as these require the grader to run a local server at a specific directory within your repo. If for some reason 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 0: HW1&2 Retrogrades (Optional)

Now that you've received feedback on some of your assignments, we are offering a (completely optional) opportunity to improve some of your past work and resubmit it for a retrograde. Your final grade on an exercise will then be the average of the original grade and the retrograde. For example, if you got 10 points on the original exercise and 20 points on the retrograde, the final grade we'd put down for the exercise would be 15 points. We will never give you a lower grade than you got originally.

Not all exercises are eligible for retrogrades, either because they are part of multi-week assignments already or because we don't think fixing up that exercise provides a good learning opportunity.

This week, you may request retrogrades for any or all of:

To submit a regrade, simply commit and push additional changes to the relevant exercise in that week's repo. Retrograde submissions are due with the assignment where they are offered.

Regrades are an experiment. We would like to offer them in future weeks, subject to how this initial experiment goes. In future weeks, the amount of credit you regain, the problems you can regrade, and other details are subject to change.

Exercise 1: Critiquing CSS Demos (20%)

Find two existing CSS demos and critique each one.

We've included some demos below to choose from, but feel free to find others on the web.

Layout
Gradients
- Components.ai Gradient editor
- CSS Gradient generator
Shadows
Misc Effects
Directories

Deliverable: An index.html file in the css-demo-critique/ directory containing your critique of two CSS demos.

For each demo, include:

A clickable link to the demo
A couple of sentences about how the demo succeeds or fails with regards to usability and/or teaching the CSS feature. Remember the dimensions of usability we covered in class (Learnability, Efficiency, and Safety).

Any other files your writeup needs (e.g. screenshots) should be in the same directory (or subdirectories) and URLs should be relative (but not root-relative).

Exercise 2: Making interactive CSS demos (80%)

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 make sure to free up the other one when you know so that another student can use it). Then, use HTML, CSS, and VueJS 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 2 students can pick the same one, so if you leave it too late, you may find that all the ones you like are taken!

Feeling inspired from the demos above and you want to make a demo of a feature (or set of features) that is not in the spreadsheet? We love creativity and initiative! Contact us via Piazza and provided your idea has the right scope we're happy to add it!

A note on AI usage

You may use AI tools to help implement designs you come up with. However, you may not use LLMs to critique your designs or generate design ideas. This exercise is about developing your own design thinking and getting peer feedback.

If you use AI-generated code, you are responsible for it. Code with bugs will be docked points regardless of how it was produced.

To simplify grading, please:

Start with the provided starter code
Use HTML, CSS, and Vue.js as your tech stack
Minimize external dependencies
No build step: Your code should run directly in the browser without requiring any compilation, bundling, or preprocessing (e.g., no npm/webpack/Vite build commands). Just open the HTML file and it should work.

If you'd like to use AI for this assignment, we encourage you to try AI code editors or CLI tools (rather than just web-based chat interfaces). Many offer free student plans. Some suggestions: Cursor, Antigravity, Claude Code, and Codex. Note that we cannot guarantee we can troubleshoot these tools with you.

Your assignment will be graded primarily on the usability of the interface you create. All three dimensions of usability matter here:

Learnability: Your app will be used by people who are learning about that CSS feature, and it should support that use case well
Efficiency: Your app will also be used by people who are already familiar with the CSS feature, and are just looking for a shortcut
Safety: Your UI should try to minimize errors (e.g. it should not generate invalid CSS) whenever possible, and properly communicate invalid input to the user whenever preventing it in the first place is not possible.

Certain features will involve different tradeoffs between learnability and efficiency.

To achieve that goal, your interface should:

teach the user the CSS concept. In support of that goal, work hard at the learnability of the UI so that new users can understand how to use it to learn that CSS feature.
aim for a good graphic design that is aesthetically pleasing, to the extent possible based on what we've learned so far. Remember that documentation should be a last resort to increase learnability, don't just add "helpful" text all over your UI, spend time thinking how to make the purpose of each control clearer. That said, some text will likely be necessary to successfully teach about the feature.
provide appropriate controls and output that users can experiment with as many forms of the feature as possible (but not necessarily all), while still being sufficiently restricted that it facilitates learning. If you make it too freeform, it won't be of much more value than a text editor, but if you make it too restricted, it won't be teaching much. You need to find a good balance between the two.

Tips

Consider letting users control related CSS features to observe interactions between them (e.g. width/height for layout demos, color for text-shadow).
Don't just add one control per parameter. Instead think about the best way to help users conceptualize the feature.
You're not required to include experimental aspects of CSS. Check caniuse.com to see which browsers support your feature (or adjacent features).
Think about what mental model(s) you'd like to teach your users. For example, with text-shadow, you might think of it as horizontal and vertical offsets. But you could also represent it with distance and angle.
Test your demo! Have a classmate (working on a different feature) try it. What did they get? What did they struggle with? Try practicing the "I like", "I wish", "What if?" stems.

A note on scope: You don't need to demo everything about your feature. Focus on breadth over depth. Cover all longhands of a shorthand, but you don't need to support every unit or value range. If your feature overlaps with others (e.g. background includes gradients), focus on your feature's parameters with basic controls for the rest. You may broaden scope if you wish, as long as you still fully cover your assigned feature.

Deliverable: An index.html file in the css-demo/ directory containing your interactive CSS demo.

Your demo should include:

Interactive controls that let users experiment with the CSS feature
A live preview showing the effect of the CSS property/value
The generated CSS code displayed to the user (so they can copy it)

Any other files your demo needs (e.g. images, additional CSS/JS) should be in the same directory (or subdirectories) and URLs should be relative (but not root-relative).

Additionally, include a short write-up (approximately 250 words) describing your design process. This write-up should be done by hand, without AI assistance. Discuss how you approached the design, what alternatives you considered, and why you made the choices you did. Include this write-up in a design-process.md file in the css-demo/ directory.

Exercise N: HW4 feedback

Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, labs etc.

Please fill in your feedback about HW4 in this form. You can edit it as many times as you like until the survey closes (48 hours after the homework deadline). Since this is part of your participation grade, it does not affect your slack hours, but failing to submit the form on time, could result in a lower participation grade.

← Assignment 3 Assignment 5 →