Critical Feedback on HTML/CSS & associated Questions

Hey Peeps

I was just wondering if anyone had the time to take a look at my project and give me any critical feedback on my implementation or structure, I have some questions that I drummed up while doing the project that i’d like cleared up if anyone has the knowledge and time…

So here’s the link to my Survey Page, please note I haven’t applied Responsive Design yet, as I need to learn more of it first, which is what I’m gonna be doing later today… Below are my questions:

https://codepen.io/entheogenick/pen/arrYXq

1- Should I wrap my radios within one label, or is two labels the better approach?

2- The FOR attribute in LABEL, must that be the same as the NAME or the ID in the input field (for radio, checkboxes etc), BECAUSE if you have multiple wrapped in one label, you only have one FOR, and therefor the ID’s would all have to be the same, which is bad… right?

3- Are my uses of BR 's okay? Or should I just absolutely avoid using BR 's all together?

4- Should I have a LABEL within a LABEL to give the text prompt (question text) or is the use of a P tag okay?

5- Is there a ‘best practice’ regarding DIV 's & the amount used, or is it personal use based?

6- I’ve found that if I change the size of my page, some elements will move from their original locations adjusting to the page and their properties given, what is some ways I should consider to overcome this issue, or should I just center it, and what if centring it is not an option?

So yeah, that’s what’s been in the ol’ mind grapes, I wonder who can make some sweet ass juice out of this!

A HUGE thank you to anyone who contributes anything to this post!

Q 1,2,4 => https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Q 3 => https://stackoverflow.com/a/1726103/11319322

Q5 => Use as many as you need but as few as you can.

Q6 => Media queries, flexbox and grid are the strategies you are looking for.

As far as your feedback survey page goes, instead of having the ‘parent’ and ‘child’ divs, you can give your <form> a class or id and give it the style you want. Or you could wrap your form in a div and style the div. How you have it setup though doesn’t work because the submit button and the additional feedback box aren’t visually inside the parent/child divs at most widths.

1 Like

First off, thank you for the replies to the questions!

And second, I just tried what you suggested, and it TOTALLY WORKED!!!

And third, IT TOTALLY WORKED!!! lol, thank you so much!

Much love!

1 Like