Review my survey pageee

Please review my survey page Thanks https://codepen.io/Teebreezy/pen/ZEEyGLB

1 Like

Basic HTML and HTML5: Create a Set of Checkboxes

It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label

1 Like

Thank you I will include it now

Maybe another background - with more quality, and you don`t need so large fields.

1 Like

For some reason the image quality reduces when I use it as a background. Any idea how to solve this problem?

I figured out that The image upload site I use reduces the image quality. How do you guys upload pictures on codepen?

oh, Your problem in image. Low resolution - try more bigger image

Thanks I have fixed it, Image is better now :grinning:

1 Like

no problem, try different colors and fonts. But fonts should not be much different.

I think these changes would improve the design:
So, you need more contrast between your elements. The dark green translucent background gets lost in the background image, and the black font on top of it is difficult to read.

By making the background a lighter green rgba(199, 198, 169, 0.92), it no longer feels sucked into the background, and the text is much easier to read. You can keep the original dark green by using it for your labels. (The background doesn’t have to be a light green. Just a suggestion.) Also, I think the box-shadow is too harsh. You could increase the blur on it or try out a translucent black.

You should give your <main> element some padding. The elements inside are too close to the edges. Makes it feel squished/cut off. Your name/email/age elements feel a bit squished together as well.

The default serif font seems out of place with the background image (traditional font vs modern military). If you don’t want to choose a less traditional serif font, I would set the CSS to use the default sans-serif font.

With your #description section,
I would rewrite it so it fits on one line, un-bold it, and remove the period at the end.

And as a side note, I’d recommend using HSLA instead of RGBA. Makes understanding and adjusting the color much easier than RGB :+1:

Thanks a lot for this indepth review. I have a lot to work on now. If you have some time could you please also review my tribute page https://codepen.io/Teebreezy/pen/oNNWdmo

This is better. Spacing is still an issue though. The text runs up right against the edge of the browser window, and the citation also is too close to the edge. The image could use some more room around it too.

This might help: Add
body { filter: blur(8px)!important; }
or
body { filter: blur(10px) contrast(.2) saturate(0) brightness(.7) !important; }
to the bottom of your CSS section.

Now check out this pen and add the blur. You should be able to see how the white space in this tribute page makes the layout more visually comprehensible. Your eye can easily move around from element to element. It doesn’t take any effort for the eye to see the distinction between elements / groups of elements. You see the shapes clearly.

If you go back to yours, you’ll see the visual separation is much less clear. Everything feels too crammed together.

A 5 minute video talking about the use of white space

Thanks a lot… I will make the correction however I’m not familiar with this filter property. Very insightful video about white space too. Thanks once again