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.
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.
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
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
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!
Welcome back @jx2bandito. Your form looks good. Some things to revisit;
font-family
it’s best practice to also have a fallback font like ‘sans-serif’ or ‘serif’.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.
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.