Critiquing CSS Demos

I found this demo of the clip-path very helpful for learning how to use this property. From a usability perspective, the possible actions that I can take as the user are very obvious (for example, choosing one of the example template shapes, dragging the points of the clip-path to adjust the clipped region, or changing the size of the demo image) which is great for learnability. I also liked how the CSS code at the bottom of the page was color-coded and always visible and reacting to the changes I made to the clip-path. This feedback made it easy to see how the values provided to the clip-path affected the result, and it is great for user efficiency since users can copy the relevant line of CSS at any time. Finally, while I was trying out different shapes and making adjustments, I did not run into any safety issues or errors related to inputting invalid values (for example, the demo size had built-in min and max values for the image width and height which were used if I entered either too large or too small values into these fields). I thought this method of handling errors for the user was both safe and efficient since I did not have to worry about correcting these mistakes myself.

One suggestion that I think would make this demo even better for teaching users how to use the clip-path property would be to show users where they should put the CSS shown at the bottom of the demo. For example, they could show the HTML of the image being clipped and the CSS that selects that image and applies the clip-path property to it. I also think that allowing users to edit the CSS shown at the bottom of the page and displaying the results of those changes in the demo would help users gain practice applying the clip-path property themselves.

Overall, I found this demo to be relatively easy to learn and found it helpful for teaching me the basics of how to create grid layouts using CSS. One main area of success that I noticed was the discoverability of the four main grid options (number of columns, number of rows, column gap, and row gap) on the right-hand-side of the UI which was easy for me as a user to learn and navigate. This made it very clear to me what settings I could control in the grid layout. I could also immediately see the effect of each change on the layout which gave me helpful feedback to connect how the value of each option impacts the resulting layout, helping me learn the concepts quickly.

Some areas for improvement would have to be efficiency since the user must request for the CSS code to be generated manually after changing the available options. I wonder if it is possible to always show the CSS code below the layout options. This would improve efficiency, and it may also help teach the user how to write the CSS themselves for these types of grid layouts by seeing which components of the CSS change depending on the layout options. Additionally, it took me a while to discover that I could create div classes based on the cells in the grid, so I wonder if there is a way to indicate that this functionality exists, perhaps by showing an example div already created in the grid and allowing users to delete it or edit it depending on their needs. Finally, on the issue of safety, I did notice that the rows and columns in the layout have an input for adjusting their size; however, the demo does not tell users which units they can enter. When I tried entering something like "100m", I got an error message that said "Must use real CSS units, goofball." Instead of having this error message and requiring users to look up acceptable CSS units, I wonder if these could be provided to the user in a select input. This would make the UI more safe and more efficient if the user does not already know these units ahead of time.