My Survey Form 2!

Code Feedback
1

Hey Guyz! So, based on my last project’s feedback i had to completely redo it. Cuz it was LIKE a complete ripp off of the sample. So, some people suggessted me to do another one on a entire blank page!!!

So, here’s wht ive done: https://codepen.io/Jaywin12335/pen/BaKXLOw

It’s not that responsive than my last one . I knw that!
If u guyz wish to see my last survey form , i gave a link in the project, so that u can compare :smiley:
Please let me know ur feedbacks!!

2

Since you know it’s not responsive I suggest you make it responsive. Start with your browser as narrow as it will go and style for the narrow width. After you have that down gradually widen your browser and make sure it looks good as it gets wider. With a simple form like this you don’t really need any CSS break points, so this is super easy to do.

3

Thank u so much for ur reply
I’ll make the page responsive.

4

Your page looks good @Jaywin12335. Some things to revisit;

  • As stated, this is a simple page and you should need any media queries.
    • One of the best ways to make a page responsive is to define widths as percentages rather than hardcoding pixel values. For instance, your submit button. Why not make it a button instead of a bar?
  • 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, you have invalid properties.
    • (The one for HTML misses things which is why I recommend W3C)
5

I like the look, but it’s a little disturbing that the input fields scroll over that plant thing on the left, the text is hardly readable. It would make more sense if your inputs were a bit more centered.

One hint: If you give an element (like your input fields) a border on hover, you should give it the same border in its non-hover-state, just with border-color set to “transparent”. That would get rid of the weird “jumping” effect on hover. (Also note: the property border-size does not exist in CSS, I think you mean border-width instead).

6

the image is very heavy. when working with large images use the .web format. On the other hand, you have to work more on responsive design.

7

Thank u so much for ur replies

I’m working on making my page responsive

8

What do u mean a .web format image?
I don’t know what that is?