Took some initial feedback and this is round 2 of the survey form, any feedback appreciated!
1 Like
Hi there,
Your form looks good, plus it made me chuckle.
A couple minor things:
- Your image should have an
alttag. - Thereâs a typo in
margin-bottom.Codepen has an Analyze CSS and HTML feature you can use to find errors. Itâs also good to run them through a validator.
label {
display: flex;
align-items: center;
font-size: 1rem;
margin-bottom: 0r5em;
}
- You shouldnât put style rules in the html. Keep all your style rules in the CSS.
- This last one is simply personal preference. I like subtle hover effects on the submit button. a change of color, perhaps, as just one more visual for the user.
Nice work.
3 Likes
Your form looks okay @LearntoCodeQuickly. Some things to revisit;
- Make the project from scratch, with your own code, style and content. Donât take code from the sample project.
- The projects arenât just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.
- Run your HTML code through the W3C validator.
- There are HTML coding errors you should be aware of and address.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective âAnalyzeâ link.
- The one for CSS is good. Use it and address the issue(s).
- (The one for HTML misses things which is why I recommend W3C)
- Keep all your styling external
2 Likes
Thanks @cherylm for the feedback, Iâve incorporated and given the button some hover love.
@Roma , Iâll always use the validators moving forward now, thanks for re-iterating that, I think thatâs a critical lesson that just finally sunk in with me, youâre right that W3 caught a couple of things CodePen missed, and it caught a couple of problems with the boilerplate HTML Iâve been using in Visual Studio that Iâm drafting in.
As for not using any example code, thanks for the perspective, I re-did the assignment from the ground up, taking a different tact than the example form. I found an alternative for dealing with the primary container over a full-page background (e.g. not using the boolean body :before) and I avoided using as many div classes (e.g. avoiding the use of the form group and styling the inputs themselves). Learned a few things building this from the ground up for sure.
By the way, super impressive how much feedback youâre able to give on these forums, kudos!
1 Like
Good job cleaning things up @LearntoCodeQuickly. A couple of things you should revisit;
- Userâs should be able to click on the label to toggle a selection, not just the radio button / checkbox
- With the regex youâve put into the
patternattribute for the email input userâs are not going to be able to submit your form. The error message that pops up is not helpful. This would be a bad UX.- Itâs not a required attribute and you probably shouldnât use it at this point.
1 Like
Fixed those, thanks!
Good job.
Happy coding!
2 Likes
Hey, this is looking real nice. Just a few last minute suggestions:
- When I crank the text size up to 200% the button text at the bottom of the page breaks out of the button and is hidden. Whenever you have an element with text content you want to make sure it can grow as the text size increases. Right now you have the width on that button set to 20%, which doesnât allow it to grow wider. If you just remove that width then the button grows as needed. I donât think there is a good reason to have had that width on there in the first place. In general, if you do need to set widths/heights on an element that contains text use
em(orrem) units so the width grows as needed. - I think the the white background needs to be a little more opaque. I know you already have it set to 85% but I donât think that is enough. Youâve got a very busy background and depending on where the text is on that background it can be very hard to read.
- The label for your textarea doesnât have a
forattribute. Add an id on the textarea and then point theforattribute on the label to that id. - For the radio button/check box groupings, consider using a fieldset/legend combination, which will improve accessibility.
- Iâm getting a horizontal scroll bar when I narrow my browser all the way in. Granted, it doesnât scroll much, but if you are a perfectionist like me you donât want it there
- As Iâm widening my browser, the form starts to get wider and then I reach a break point and it gets narrower again, and then it gradually gets wider again. This happens twice. I donât think you need to use break points here to control the width of the form. Just put a max-width on it (in
emunits) to keep it from getting too wide and keep it centered on the page. - Really picky feedback here The placeholder text is generally used to give the user an example of the input you want. So âyour nameâŚâ and âYour emailâŚâ arenât really providing any helpful information. In the textarea, if the information you have in the placeholder is really important then you should move it out of the placeholder so it is there permanently on the page (because as soon as I start typing it disappears). Also, I donât think screen readers will read the placeholder text (I could be wrong about this), and if this is the case then screen reader users wonât get this information.
1 Like
Love picky feedback, itâs great, thanks!
Couple things there I hadnât thought of (like text size 200%). I canât replicate the horizontal scroll bar though with my devices, what are you looking at it with? I think the ::before background boolean is a better way of setting bg images and itâs because of the way I set it, Iâll re-look at it, I think that takes the problems away.
Firefox 85 on both Linux and Windows 10. It does not seem to appear with Chrome.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.