Assessment wanted for Advanced form styling 1 skill test. (Tasks 1-3)

Assessment wanted for Advanced form styling 1 skill test. (Tasks 1-3)

Link to task: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling#advanced_form_styling_1

Links to my code:
Task-1: https://jsfiddle.net/EiNzp/0xf7sa26/2/
Task-2: https://jsfiddle.net/EiNzp/0t9yudxm/2/
Task-3: https://jsfiddle.net/EiNzp/3hubm4dk/1/

Thanks :wink:

Hi @EiN

Safari Testing

I’m in the same situation like you.
I try sticking to standards, paying attention to the compatibility notes on MDN and hoping for the UI frameworks I use to care for cross-browser consistency.
There are paid solutions to test on different browser like https://browserstack.com, but I haven’t used any of them.
Sometimes I ask coworkers to test my web apps on their iPhones with Safari to see if there are any funny things going on.

Task 1

I heard using line-height on inputs tend to get more consistent results. I have to admit that I haven’t done extensive testing to see where the actual differences are.
I recommend also adding -webkit-appearance: none; since only the newest Safari supports it without the prefix.
For the icon it may be a bit easier to use it as a background image on the div, add some width and height and change the form to Flexbox with align-items: center;

Task 2

This looks very good. You could add some width to the labels (larger than the content) to make the radio buttons align nicely.

Task 3

Very cool work on the icons and colors. Nothing to complain from my side.

Have a nice day,
Michael

1 Like

Hi. I made the changes you suggested. Here are the new links to my code:
Task-1: https://jsfiddle.net/EiNzp/8L04j7z6/2/
Task-2: https://jsfiddle.net/EiNzp/x1q9matv/
For the icon in task 1, it’s really easier to use it as a background image in a div.

1 Like

Yay, Great job!
The code in task 1and the layout in task 2 look much cleaner now. :+1:

1 Like