DEV Community

Dumte Nwidoobee Joshua
Dumte Nwidoobee Joshua

Posted on

Please rate my work and suggest how to improve on it

Top comments (3)

Collapse
 
moopet profile image
Ben Sinclair

You should think about the verical spacing, fonts, shadows, and curves vs. angles. Adding some padding between elements would make it easier to read, and changing to a sans-serif font would probably make it look more "professional" as well.

Personally, I'm not a fan of the curves and shadows on the input elements. It makes the submit button look odd because its different scale makes its curves slightly different, entering a kind of widget-uncanny-valley.

Red isn't a great choice for the text colour, as people might associate it with an error state.

input type="number" triggers the number pad on some mobile devices but input type="tel" is probably better as it's specifically designed for phone numbers (which can contain other characters).

The placeholder attributes don't add anything, and they're almost the same colour as the input text itself meaning it's not obvious at a glance which fields you've entered and which you haven't.

The label elements should either wrap their inputs or should be related to them using label for="..." and input id="...".

I'd remove the br elements and make sure the inputs were (inline-)blocks instead. That's my personal preference, because I see br as an unnecessary non-semantic element.

I'd also remove the colon suffix on labels. It doesn't add anything to the meaning of the markup, and you can always style it with label:after { content: ':'; } or something like that if you want. Personally, I think it'd look better without them. The legend (which could go into a legend and a fieldset itself rather than a p tag...) also has the same colon suffix, and there's kind of an unwritten style rule that you don't nest things with colons.

Hope this helps!

Collapse
 
dnjosh10 profile image
Dumte Nwidoobee Joshua

This is the kind of comments I have expecting. Thanks so much as I will be working on your observations and opinions.

Collapse
 
dnjosh10 profile image
Dumte Nwidoobee Joshua

But when I added the fieldset and legend, they scattered my work