Feedback - FCC Survey Project

Hey guys! I would like to ask for feedback on my latest project I completed. Particularly, I feel like I was stumped on the checkbox html coding. I think I made it “work” but im not sure if its technically the proper way to write it.

Any feedback is greatly appreciated! Thank you!

Codepen: https://codepen.io/xCalypsoCodes/pen/LYWWYEX

1 Like

Your form looks good @calypsocodes. Some things to revisit;

  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
  • To help with responsiveness, rather than hardcoding pixel values try using relative units like em or rem and percentages.

@Roma , thank you so much for your feedback!

I used < br > because I wasn’t sure how to get the look I was wanting without it. I am trying to use the MDN site to look into margins. I started replacing the < br > with < p > but when I get to the checkbox section, it looks terrible. However, I am struggling to figure out how to add the margins to my css just for the checkboxes. I have the checkboxes as a label - do I need a different #id for each checkbox or can I sum them all up in a class?

I don’t know how to work on the horizontal scrollbar but ill google it and see what comes up! I will also look into the font suggestions. Px have just always been what ive used and what im comfortable with so I guess I need to work on that!

Instead of using <br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.

That would be a lot of id's. Remember, an id must be unique within the document.
Maybe revisit this lesson too. It’s not just for radio buttons.

The last bullet point in my previous post should help. Once again, to help with responsiveness, rather than hardcoding pixel values try using relative units like em or rem and percentages.

Not sure what you mean here. I didn’t give any font suggestions.

@Roma the font suggestion was because when you mentioned “hardcoding pixel values try using relative units like em or rem and percentages” and I thought you were referencing me using px for my font sizes. My mistake! I only realized that I was wrong after reading your second reply.

I have some research to do about your other suggestions, but im pretty sure I can figure it out from here! I found a page explaining html blocks and inline elements so hopefully that helps me out. Im still confused about the lesson you suggested to help with my checkbox problem but at the risk of just being told what to do and not learning what to do, im going to keep reseaching it to find out. You have me started on the right path!

Sincerely, thank you again for all of your help. I can not describe how much I have learned from you. I appreciate all of the time you take to help people like me who are so eager to learn but still need help. Thank you!

@ghadafcc Thank you so much!

If you mean a container for my checkbox issue, I am currently trying to figure out how to do this. Im beyond confused at this point but hopefully ill be able to get it completed!

1 Like

I was thinking you could try the fieldset element for checkboxes and radio buttons. It may help you with styling them too.

Hey @Roma! I posted on the html/css board for help and someone suggested to change my checkbox name. What I did was change my “.checkbox-code” and put “label” in its place and it worked. I don’t know if that is technically the “right” way to do it, but my assumption was that I may have needed to adjust the entire “label” instead of pinpointing smaller, specific pieces.

However, im on MDN looking up the Field Set element, and I don’t entirely understand how the CSS would work for it. The HTML makes a bit of sense, but when it comes to styling, what would I put in the CSS? Would I use like “fieldset class=Name” in the html then use the .Name in the CSS?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.