Project Feedback Appreciated

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

1 Like

To be able to grasp html & css and do a survey form in such a short span is impressive.

1 Like

great looking. i was where you are 6 months ago. keep going! your doing great.

1 Like

I’ve been spending the majority of my time on it :sweat_smile:

Let’s just say I have no life :joy:

1 Like

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.

1 Like

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.

1 Like

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.

1 Like

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 :slight_smile:

  • 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 a legend. Same for the radio button group as well. See WebAIM: Creating Accessible Forms.
  • Technically, ids on HTML elements should be unique to the page, so all of those radio buttons and check boxes that share the same id should have unique ids. One reason for this is that then you can use the for attribute on each of those labels to point to the id of their associated input. I know that you are embedding the input in the label and therefore you shouldn’t need to use the for attribute. But accessibility best practices dictate that you always use a for 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 the for attribute. In fact, I just came across one of these situations earlier today with the FCC Registration Form course. So I would recommend you add for attributes to all of our labels.

Again, great job on this. Look forward to seeing your future projects.

2 Likes

WOW

I appreciate the feedback so much!
My project tomorrow will be to fix all that you have mentioned, thankyou :slight_smile:

1 Like