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
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.
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.
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.