Hello! I’ve just started learning HTML5/CSS3 for a little over a week and would love if you could view my codepen and give feedback on my project (soon to be projects as I build more) <3
To be able to grasp html & css and do a survey form in such a short span is impressive.
great looking. i was where you are 6 months ago. keep going! your doing great.
I’ve been spending the majority of my time on it
Let’s just say I have no life
Thanks! How far are you in your journey now?
im about halfway through quali ty assurance certification. i am always getting stuck but keep pressing on.
soon you will be doing some really cool projects.
I spent probably all day trying and trying to do that form survey. Finally I finished it. On my mind round the bad thought was that I’m not good for design. But the consistent is the key of success. So look my Form Survey.
PS: Thank you for posting your code on Code Pen, I had not idea that that web site exist.
Like 90% of us here. I have a suggestion that fcc opens a fridayNite4Geeks chatroom, whereby we exchange views/code in lieu of drinks. I have a feeling that could be viral. TBH, more gratifying and fun to do so than to drink aimlessly.
I love your mix of subtle colors.
We tend to think that a survey form is so simple that we can do it in a matter of minutes. Not so, it takes the time that it takes to do anything good.
That sounds like a good time!!
Hey @melissarose, this is real nice, especially for a week’s worth of studying. I am impressed by your quick acquisition of skills. Keep up the good work.
I’m sort of keen on accessibility, so the majority of my feedback is going to center on that. I feel that the best time to start learning about accessibility is at the very beginning and since you seem to be able to pick up this stuff fast I’m guessing you can handle some accessibility suggestions
- Color contrast is a big concern in accessibility as a lot of people have trouble with their color vision, especially as they age. In order to be considered accessible, the contrast between the text color and the background must be at least 4.5:1. Yours is about half that right now. So you’ll either need to make the font darker or the background darker. There are a variety of tools out there to help you test for contrast. The one I find myself using a lot is WebAIM’s contrast checker.
- The contrast requirement includes the placeholder text as well. You can use the CSS
:placeholder
pseudo-element to adjust the font color for that as well. - Don’t use
<br>
to create vertical space between elements. Use CSS margins instead. The<br>
element does have a few (very few) legitimate uses, but using them as margins is not one of them. - You should have a separate
fieldset
around the checkboxes and the question for those checkboxes should be in alegend
. Same for the radio button group as well. See WebAIM: Creating Accessible Forms. - Technically,
id
s on HTML elements should be unique to the page, so all of those radio buttons and check boxes that share the sameid
should have uniqueid
s. One reason for this is that then you can use thefor
attribute on each of those labels to point to theid
of their associated input. I know that you are embedding the input in the label and therefore you shouldn’t need to use thefor
attribute. But accessibility best practices dictate that you always use afor
attribute on a label, even if the input is embedded in the label because there is a possibility that some assistive technology won’t work correctly without thefor
attribute. In fact, I just came across one of these situations earlier today with the FCC Registration Form course. So I would recommend you addfor
attributes to all of our labels.
Again, great job on this. Look forward to seeing your future projects.
WOW
I appreciate the feedback so much!
My project tomorrow will be to fix all that you have mentioned, thankyou
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.