HTML Survey Form Project - What kind of traveler are you? (Feedback welcome!)

Hello everyone! I just completed my first responsive web design certification project, an HTML survey form. I went with a travel theme to find out about people’s travel. I greatly appreciate any feedback you can provide. Thank you!

You don’t need to use font-family with the same value in every selector.
You have font-family in the body. That should be enough.

background-color: #1E84499F;

This is invalid hex format.

I appreciate what you’re trying to accomplish here; the layout looks good, fonts look good. I am not sure how responsive it is as I am on my desktop.

There are some things that bother me about the design.

  1. The image background, even though you have a slight opacity filter on it, makes it look busy, especially since majority of your elements are also yellow and the main colors in the image are yellow and green
  2. If you’re going to use an image background, make sure you fill the container with one single image. You can do that several different ways, one way being
.someClass {
  object-fit: cover;
}

which will fill the container without stretching the image by keeping the correct aspect ratio,

I like it, a lot, in fact. Just need to clear up some of the busy design.

This seems to change the opacity of the color. This person used 9F on several hex colors and when I deleted the 9F the opacity instantly increased. Not sure why though.

1 Like

Thank you for your feedback! I agree, I also felt like the background image felt a little busy. I used the yellow elements to add some unity with the background, but I can see how that adds to the “busy-ness.” I think I’m going to try lowering the opacity on the background image to see if that helps.

I also appreciate the suggestion on the sizing. I actually don’t want the image to repeat like it is. My intention is to have the image fill the background and then scroll instead of repeating, but I wasn’t sure how to do that. Any suggestions on that would be helpful.

And yes, you’re correct about the hex code. The last two characters reference the alpha channel and control the transparency of the color. How To Use CSS Hex Code Colors with Alpha Values | DigitalOcean

Thank you for your feedback! Please see my comment on twhite96’s post about the hex code.

I initially didn’t have the font-family for every selector, but I noticed that the text inside of the input boxes was not matching the body text (Gill Sans). I deleted the code to test again and am still seeing that the text inside of the input boxes is set to the default if not specified by using the selectors. Any suggestions?

1 Like

Oh wow, I was sure that for changing opacity rgba or hsla is needed

try to use * selector - if you want all your text to have the same font-family that should help

*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 1rem;  
}

depending on what I need I am using selectors similar to this one

  • I would set the background image to cover and give it background-attachment: fixed.

  • When using an alpha channel use rgba instead. Very few people will know what the value 9F translates into.

  • I would decrease the transparency on the form color. Having that much opacity just makes it harder to read.

  • You can set all input elements to inherit the font as a base style in the start of the CSS along with other such base styles.

input {
  font-family: inherit;
}

Great, thank you for that! I was thinking I probably didn’t need all of those selectors but wasn’t sure how to best set it up.

Yes, I can see how the hex code thing is confusing. I was more familiar with hex color codes so that’s why I chose to adjust the transparency that way. I think I will stick with rgba or hsla moving forward.

Great feedback, thank you so much!