2nd RWD project

Could I please get some feedback on my coding? It passes all the tests and everything but I feel like it’s kind of all over the place and maybe overcoded? Or maybe under designed? I appreciate your time!
https://codepen.io/Jhowardjr73/pen/rNxjjdJ

@jhowardjr73 I think your page looks good. I know I would have stuck with a strict black and white theme to match the original card game, but that’s just me. In regards to your code, it looks pretty good. It would be advisable to remove every <br /> in your html and use CSS to set top and bottom margins between your elements (I had some in my Tribute page and a moderator called me out on it, so out they went). I can’t speak about your use of the


, so I’ll a moderator handle that. I think your CSS should have font size rules using ems or rems.

Here’s a brief video about how to use them:

Thanks a lot for the guidance! I was originally going to go with black and white but I wanted to play with the colors a little. I will take the breaks out and work out the padding. That will give me more opportunity to learn CSS. I’ll have to play with the em/ rems and learn more about them. As far as the horizontal break I like the way it separates the page and couldn’t think of another way to do it. Any ideas?

In regards to the <hr> you can use margins. Margin is the space that surrounds the outside of the element. Padding is the space that surrounds the content within the element. Does that make sense?

Yeah I think I get it. I took out a bunch of the breaks but i left some in that were lining up the text the way I wanted. I used margins instead. How’s this?
https://codepen.io/Jhowardjr73/pen/rNxjjdJ

That looks a lot better, good work!

Thank you, I appreciate all your help! :smiley:

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to select, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.

Thank you for the feedback! I didn’ t know that stuff about codepen. Writing code in it is a nightmare from my cellphone. Whenever I try do delete something using the backspace it keeps adding whats left and some to the end or jumps lines when I add something in the middle of a line. So I have been using a text editor app then copy/pasting into codepen. I did figure out how to use the format/ analyzer though!
Thank you also for letting me know about the W3C validator, what an awesome tool!

Wow, you weren’t kidding!
I will work on these and the other corrections you suggested this weekend. I really appreciate your guidance!
Have a safe and happy holiday!

I think I have it all worked out! @Roma

That looks better @jhowardjr73, nice job although the user is still not able to select a checkbox by clicking on it’s label. A user should be able to click on the label for a checkbox or a radio button to select. They shouldn’t have to only click on the radio button or checkbox.

I think I got it this time!

Nice job getting everything cleaned up

T hank you for your guidance!