Project Feedback- Tribute & Survey

Could I get feedback on what’s good, bad or what I’ve done wrong in my projects for further improvement, please. Much appreciated!

Survey Form
Tribute Page

Regarding your survey form:

  • The select drop down and textarea both need label tags.
  • Consider using a fieldset for your radio button and check box groupings.
    https://webaim.org/techniques/forms/controls#checkbox
  • The black text at the top is very hard to read on that background, consider changing it to something that stands out more.
  • As I am tabbing through your inputs I really cannot tell where the keyboard focus is. You should style the CSS outline property for your inputs so that they stand out more. This is especially true for the radio buttons and check boxes.
  • Instead of using a pixel width on your text inputs consider using em’s. That way they will grow in width as the font-size is increased.
  • Graphically denote which fields are required.
1 Like

Thanks for your input and the information you provided, I’ve amended my code now with your recommendations. Appreciate the helpful response! :grin:

Hi @jmedina0126, some feedback.
Tribute page

  • You may have the font Playfair Display loaded on your computer. I do not so I see the page displayed as sans-serif. Consider linking it (click on the Settings button and put it in the box labeled ‘Stuff for <head>’. Or @import it in the CSS section
    • It’s a little odd that you chose a font with serifs and a back up font without serifs.
    • Also the font-family name for Playfair Display needs to be in quotes. You’re missing the leading quote.
    • As an aside, it will never fall back to Arial. It will stop at sans-serif. If you want Arial to be the fallback, make it your second choice.

Survey form

  • Same comment about the font. I don’t have Quicksand loaded so I’m not seeing your form with the font you’d like me to see it with.
  • Don’t use the <br> element to force spacing. Use margin and/or padding in CSS.
    • on a side note, the <br> tag is self closing. This (</br>) is not a valid element.

Good job on both pages.

1 Like