Looking for feedback on my Harrison ford tribute page and form projects

Tribute: https://codepen.io/Taouen/pen/NWqEMer

Form: https://codepen.io/Taouen/pen/OJVrNdm

Looking for feedback of any kind,

Thanks!

The survey form is pretty rock solid. You’re even using fieldset/legend for your input groupings. Very nice.

I just have a few recommendations:

  • The ‘Select all that apply’ text does not quite have enough color contrast to be accessible.
  • When I narrow the browser the padding on the side of the form still remains. At some point I think you should lose the padding (i.e. allow the width of main to be 100% or close to it) so that the content isn’t scrunched up into a narrow center column. I think you could avoid this issue by doing the following:
    • get rid of width and display on main completely (you don’t need them)
    • leave the margin on main as is
    • make your browser very wide and then set the max-width on main (in ‘em’) to a value you are happy with
    • now narrow your browser window to see how it makes a very nice transition
  • The ‘Submit’ text on the button breaks out of the button as the text size increases. Set the width on the button in ‘em’ so it can grow with the text.
  • Your placeholder text should not just repeat your label text. The placeholder text should give an example of what you want. If you think it is clear and an example is not needed then you don’t need the placeholder text.
  • Graphically denote which fields are required (this is usually done with an asterisk).

1m

Thanks so much for the feedback!

  • I see what you mean with the padding. I definitely forgot to squish it and see what happened before posting about it :stuck_out_tongue:
  • I also ran the page through and accessibility tool and somehow it missed the contrast on that text. I just changed the font colour back to the same as everything else.
  • I agree with the placeholder text. I only put it in there as it is required for the user stories for the project, I’d likely leave it blank otherwise (easy enough to figure it out without placeholders on something this simple).

Thanks again!

Ahh, I didn’t realize the placeholder text was required. I’d still recommend you change it to examples of what you expect the user to type in there (e.g. placeholder=“John Smith”) but I think you understand the concept so I’m not going to lower your grade for it :slight_smile:

1 Like