Advice on Survey form

New to this section so bare with me. Could someone with more experience give me any feedback on my Survey Form Project? I’m starting to become happy with the results after finally figuring out I needed to use rgba to apply the look I was going for. However I’ve wanted the background to stay in place while having the form itself freely move up and down.

I may have done my border incorrectly and should have used another method to achieve this but I’m not entirely certain.

Hey! It’s looking good and definitely coming along. For the scrolling effect you want, you’ll want the image background attachment to be set to “fixed”. You can add the word “fixed” to the shorthand background attribute, or you can set background-attachment to fixed.

1 Like

I’ll give that a try. At first I wasn’t sure if that’s all I had to do or that plus adding a z-index. Would it be easier to do by placing the actual ‘body’ in the CSS at the top versus the bottom? Was not sure if the placement was off either instead needing to go above my .container

I checked the pen and it looks like you got it!

My understanding is as follows (for reference, I’m an on-again-off-again junior dev with a lot to learn): For simple background images the background CSS is all you need. There are some use cases where maybe you’d want to put an image for layering in the actual markup and play with z-index, but those are uncommon. Since background images aren’t needed for screen reading accessibility purposes, if you can keep them to CSS, it’s likely best .

Organizing your CSS sheet is more about readability than function (grouping related elements/running top to bottom is a good idea), exception being if you have two conflicting values (ex: #div {color: blue;} and #div{color: orange;} for the same device widths), then the value lowest on the sheet wins out.

I’ve def learned a fair amount after taking ten years off from coding. In my teens years ago I did everything in-line or internally vs externally from what I remember. I’ve been trying to solely do everything externally. Using code-pen…I’m on a 15 inch which I should be doing everything on my 23 inch monitor instead. While I’m happy thus far, when I jump on my external monitor the form is no longer centered.

Regarding your advice on organization. I recently instead of keeping all my CSS to one file I’ve decided to create multiple files so for instance if I make a 5 page website but in the end its 3 layouts I figure creating 3 might be best simply to keep from having a headache. Awhile ago I started creating a website and eventually all of it in one file even though I was placing comments, got to be almost too much…or would you have any advice? Been trying to play around with what feels best trying to simplify things versus over complicating everything.

I’ll have to remember about conflicting values.

Your from looks okay @heikja. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 7/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.

TY!, I’ll have to remind myself from now on to do just that.