My short, simple, and somewhat non-sensical survey form

Project Feedback
#1

Couldn’t think of a way to make it fancier without making it look distracting, so I’m probably done tinkering with it.

In any case, feedback is welcome and appreciated.

2 Likes
#2

Very good job @jx2bandito! I like it and it’s simple and clean. The background is non-distracting, which is perfect. But, I think the input fields lack a little bit of styling. Making the title underlined will make the users misunderstand that it’s a link. Also, your HTML & CSS code has some errors. You might want to solve that by using CodePen’s validator.
Anyway, very good and I like it. Best Wishes :smile:

1 Like
#3

Oh, neat, I didn’t know Codepen had it’s own validator. Is it just the ‘Analyze…’ option from the dropdown in each tab or is there more to it? I went ahead and fixed the suggestions from that option - I did not know classes were supposed to be double quotes.

Thanks for the feedback

2 Likes
#4

It is the 'Analyze" button. Nothing more. Also, when writing HTML code, W3C (World Wide Web Consortium) recommends using double quotes instead of single quotes. Use single quotes only if necessary like in these situations:

<p title='Hello "World"'>Hello "World"</p> // here the title attribute's value contains a double quoted text. So, for cases like these, you need to use single quotes.

Happy Coding!

#5

Welcome back @jx2bandito. Your form looks good. Some things to revisit;

  • Not all user’s see your page the way you want. I’m not on Windoze so I don’t have the ‘Calibri’ font. When specifying a font-family it’s best practice to also have a fallback font like ‘sans-serif’ or ‘serif’.
  • Change the cursor to a pointer when hovering over the submit button
  • Revisit line 7 in your CSS. There’s a duplicate.
  • By taking away focus you make your form not accessible to someone that relies on the keyboard to navigate.
1 Like
#6

Thanks for the feedback.

I went ahead and added a fallback font, changed the cursor on button hover, and removed the duplicate.

I had removed the initial outline for focus so it would not clash with a replacement design.

#7

Remember how things are called in CSS. Instead of;
font-family: sans-serif, calibri;
you want;
font-family: Calibri, sans-serif;

By using the former, everyone is going to see your page with the sans-serif font. A fallback font such as sans-serif or serif is the last to appear in the font-family declaration. It’s just that, something to fallback on in case the primary, designated font does not load.