CSS Demo Critiques

Demo 1: CSS Grid Generator

I think this website is a nice sandbox for learning to create different kinds of basic grids. It lets me choose the dimensions of the grid, adjust the size of each cell, and draw as many divs as I'd like. Then I can view the code and study how the grid I made relates to the generated code. So, I do think I learned from this demo. However, from a usability perspecive:

• Learnability: It was unclear how to draw the divs at first, and required me to read the help menu. The X's on the divs to remove them were so small I also did not notice them at first. The verbose "Please may I have some code" button made it harder than it had to be to figure out where to view the code. A better label like "view code" would make the functionality a lot more obvious and understandable at a quick scan.
• Efficiency: Mostly pretty quick and efficient to use once I understood everything. I only wish the X's were bigger so they can be faster to click.
• Safety: I did not like how it's possible to type any number into the "columns" and "rows" fields. If I wanted to change the columns from 3 to 4 by deleting my 3 and then typing a 4, this is allowed, but clears all the cell dimensions I entered (because it momentarily thinks there are 0 columns). Clicking the up or down arrow on the number input box does not cause this bug, so I think they should force this input by disallowing the user to type into these number boxes instead.

Demo 2: Shadow Palette Generator

Overall I liked this website too, but for the complete opposite reasons as the other website. I feel this one did a much better job with usability and was very simple, although I had a harder time learning from it because the generated code is a lot more dense, which makes it impossible to tell what each number means. This website cannot teach how to make shadows, but at least it offers intuition about what is and isn't possible with shadows. Usabaility-wise:

• Learnability: It's clear what parameters I have control over since all the inputs are well-labeled, which means no help menu is needed like the other site. Some wordings are unclear (like "oomph" and "crispy"), but there's little cost in just playing with the sliders and seeing what they do. The button to change background color is questionably big and starts to lose its signifier as a button, but you're still tempted to click on it since the site has used repetition and consistency to suggest that below every label is something clickable.
• Efficieny: Scrolling down to view code is about as slow as clicking the button in the first demo. Annoyingly, though, it's possible to overshoot how much you scroll since the page doesn't stop at the end of the code. This leads to a weird "Fitz's law of scrolling", where you can scroll too far down, then scroll too far up, etc., until you finally get all the code to fit on screen. One solution would be to just add a button or self-link that scrolls you to the perfect height on the page.
• Safety: It's very hard to go wrong while using the site since there are only 6 different paramaters you can tweak, which are all controlled independently with different inputs. The only potential issue is the lack of an undo feature. This means if the user wants to try a different light position, for instance, and then wants to change it back to their previous choice, it will be hard to get back that exact same shadow again.