Assessment Request for Advanced Form Styling 1 Skill Test

Hi. Any assessment would be appreciated. Thank you and have a nice day! :chipmunk:

Advanced Form Styling 1
Advanced Form Styling 2
Advanced Form Styling 3

Hi there @harryghgim! you’ve got some really good answers here, well done!

A few points:

For assessment 1:

  • I’d tone down the box-shadow a bit, maybe reduce the blur value a little.
  • you should give the generated content a width and height the same size as the icon being given as content, so that it will truly center vertically.

For assessment 2, you are so nearly there, but the center circle doesn’t quite line up correctly with the outer circle. It is better to use positioning to do this job — set the checkbox as position: relative and the generated content as position: absolute so you can move the latter relative to the edges of the former.

And size both with even number values, so you cna get them to line up centrally.

Something like this would work nicely:

input[type="radio"] {
  border: 1px solid darkgrey;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: relative;
}

input[type="radio"]::before {
  position: absolute;
  content: " ";
  width: 16px;
  height: 16px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
}

Assessment 3 looks really good, nice work!

1 Like