Hey guys, could you please give me some feedback to my Survey Form?

https://codepen.io/AlexMaksimov/pen/jObpeBW

Hey guys. I have just completed my project №2 - Survey Form. I really want to hear your critics and what I can improve in this page. All feedblack I will appreciate. I know, there is a problem about responsiveness, but I still don’t quite get how it works. Could you please give me an idea how can I do it?

Thank you and happy coding!

The responsiveness actually isn’t bad! I mean, everything scales down and there’s no overflow when I reduce the screen to mobile size so I don’t see huge issues

The first thing that jumps out to me is that the background is ending and repeating at the bottom of the page. You could include background-size: cover; in the body styling that should stretch it out and have it fill the whole page

I’d also add that because the background is quite “busy”, the contrast changes rapidly in the middle of sentences and this ends up with the form not having 100% the readability it could have.

Personally, I would add a background to the form, and you could use rgba if you wanted it to be somewhat transparent so your chosen background is still visible and has the impact you want it to :slight_smile:

Overall, good job! :+1:

1 Like

Some text is hard to read, because of the background, but there’s a neat way to fix it!
You can apply a transparent color over the background to form a “tint”

  background-image: 
<!-- This Adds a Translucent Background "TINT"- 
we use a comma to separate it from the image below  -->
    linear-gradient( 
    45deg,               <!-- change to desired angle of gradient-->
    rgba(82, 82, 140, .8),<!-- change to your color-->
    rgba(49, 49, 104, .9) <!-- change to your color-->
  ),
<!-- This will add the image below the tint -->
    url(YOUR URL);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
2 Likes

So some things I noticed:
You have a body ending tag and a html ending tag, but no beginning tags for them.
It’s failing 10 of the tests so you’ll want to click the red button after running the test to see what’s failing and fix those things.
As for the responsiveness I see what you mean that when shrinking the window your content stays positioned and then goes into the left side of the page. I think you just need that media query fixed. If you look at the project they provide as example and change the view to edit it can give you some visual into how some stuff is done. Alternately you can check out W3Schools for some info. I go there all the time to find out how to do stuff or get a refresher. It’s a little easier than digging through the courses on here.
Overall the look you’re going for is nice, just needs some tweaks and to pass the tests.
https://www.w3schools.com/

1 Like
  • 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.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you should address.
  • Change the cursor to a pointer when hovering over the submit button