if anyone’s free to take a look at my code and give me some constructive criticism that’ll be great. I have ran the test on code pen and it has past and it has passed the html/css validation but if I have picked up any bad habits feel free to let me know!
Good job completing this task, in my opinion you should work a little bit on colors to increase contrast and people can easier read your form. In addition your form is not responsive and you probably should add some media queries or use other units than pixels for width.
setting background size to cover also should make it a bit better
I would suggest not using the <br> tag so much; CSS can do a much better job and using the <br> tag instead of using CSS is a bit of a malpractice in web development.
Your design is great, but I would suggest a solid background because your current transparent background makes text a bit too hard to see.
Your form looks good @raymond_clark. Some things to revisit;
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
For instance, links to fonts go in the box labeled ‘Stuff for <head>’
User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox (not working for your radio buttons)
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.
It looks odd seeing the checkboxes as part of a list. You can set container elements to be block-level elements so they’ll each take up the full width.
At the very least, hide the bullet points.
You’ve all given me some valuable feedback here which I’ll take on board. Still in the process of finding further tools as I go along also but the references here are great too. I know my design skills aren’t there yet !
I’m working through Treehouse css too at the moment so I’m feeling a bit more confident on the css now and will work through all your suggestions and comments.
Hi Roma- I’ve finally come back to the project. What did you mean in the above comment?
I have amended the other issues so hopefully these are a bit better. I have some more reading to do on the colour contrast but I have the idea for now and will use that link.
Thanks, much appreciated
I mean that for the checkboxes, user’s are able to click on the checkbox to toggle or they can click on the checkbox itself to toggle.
This is code for one of your checkboxes
In your form, click the checkbox a couple of times and see it toggle. Now click the label (the words “push up”) a couple of times and see it toggle.
Radio buttons obviously don’t toggle but user’s are unable to select by clicking the label, they can only select by clicking the radio button. This is a bad UX. Revisit this lesson and see how to properly nest the label.
There are still quite a few <br> elements being used to force spacing. Once again, that’s what CSS is for.
Side note, I’ll leave it to you to decide if your header and footer have a value add for your form.
I can now select when clicking on the label. I realised I had left the label title out of the syntax which didn’t help and I have removed the header and footer as they don’t really add value you’re correct.
I have replaced the <br> elements with <p> elements but i’ll read up on these in more depth as I’m not sure if i’m overusing <p> now.
