Hello. I’d like assessments of my work for advanced form styling tasks 2 and 3.
Here are links to my code:
Task 2: https://codepen.io/wruther/pen/GRzyYmb
Task 3: https://codepen.io/wruther/pen/PoVEyZr
And here’s a link to the assessment page: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling
Notes:
-
Task 2:
- I decided against going for any fancy animations; I preferred to keep it simple. Plus, while I didn’t find the radio button animations to be such, there are several animations that I find distracting and annoying. For example, the silly little bouncing icons on my LinkedIn home page. Therefore, I’ll be keeping most things static.
-
Task 3:
- I went for a solution that aimed to minimize code repetition.
- I went for something that maintained its layout through viewport width and fieldset width changes. After a lot of experimentation with percentages, custom properties, and calculations, I found that the best way to accomplish that is to express the label width, span::before width, and span::before margin-left in pixels. And I was interested in seeing how narrow I could make the fieldset width before text started overlapping.
These assessments were very interesting. They’re the kind I could spend hours tweaking until I get them just the way I want them.