I’ve been having some trouble with the Survey Form project, mainly with alignment and spacing.
Here’s my codepen:
I have already searched google, the site and the HTML & CSS book by Jon Duckett but I haven’t been able to figure out either what I am doing wrong or what I am not doing at all. Thanks everyone!!
label can have a
for attribute that connects it to an input with an
for must match
label does not have attribute
name binds radio buttons together.
It’d be nice if Age was a valid subscriber’s age range using
Your design uses the same pattern for radio button section and checkbox section.You should use the same html pattern for both.
Drama section title use
label without input Time section uses
span. Better for both would be
h3. Don’t agree? Then use
p. It’s not necessary to put these two sections inside a
div since they are styled the same and are the only two lists on the page. Only one single
ul style is necessary.
label and the
input is inside a
li so they want to stay together. You floated the
input left and a previous style centered the label.
.title is floating the text left which doesn’t look good towards the end of the form. Consider vertically aligning the comments’ elements and the submit button.
Hope this helps. I like the survey color and shape.
Thank you very much for your feedback! I will be reviewing everything you mentioned throughout the weekend I’ll be back with an update!
The Jon Duckett book isn’t bad but the layout part is very outdated.
I’d strongly suggest looking into learning Flexbox and CSS Grid. Floats are really not something you want to use for layout unless you have to support old browsers. It isn’t bad to learn a bit about them but I wouldn’t use them for page layout in a current project. I will say, they work just fine for their intended purpose of floating text around an element (like an image).
Here is a fairly simple form example using both some Flexbox and CSS Grid
Thank you for the reply and for confirming my suspicions!
After my review this weekend, I was thinking I might have to go over Flexbox and CSS Grid.
I’ve found some resources online like the mozilla developer site, the css-tricks site and some youtube videos.