Tell us what’s happening:
i have finished my survey page… is there anything to improve myself and when my input fields are being hovered the width is not changing symmetrically… pls help this out.
My bad, i used the wrong project format. Your page passes 11/17 uses stories. But you need to make the page responsive (use media queries), and follow the user stories.
Hi @kabs31, there are a few things you should think about revisiting;
codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
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. You have some HTML errors that you need to correct.
if you’ve ever filled out an on-line form you may have noticed that required fields are marked with an asterisk. You have fields that are required that don’t have a flow to them so they should all be marked.
you require a phone number but don’t do any checking as to what the user inputs. I can put in “hello” and it gets accepted as a phone number. Do validation.
there’s an error in your “rank” and “select the characters”. If a user selects a rank and then chooses to select the character the rank is always reset to “1”.
dark text on a dark background is a poor choice. For some users this is not readable.
you have a LOT of <br> tags. Think about using margin/padding in CSS instead.
as mentioned, your page meets 11/17 user stories and is not responsive.
I’d suggest you animate the inputs getting larger when hovered over and for the comments, instead of putting an input, try using the <textArea> tag.
I really don’t want to select all of the checkboxes.
Lighten the shadow a bit.