Hello! I finished my first HTML/CSS project. I was looking for feedback on my survey project. https://codepen.io/SerGo35/full/QWvqXwb
Welcome to the forums @SerGo3577. Your form looks good. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in the HTML editor. (No need to include thebodytags). For anything you want to add to the<head>element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.- For instance, links to fonts go in the box labeled ‘Stuff for <head>’
- Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
- The one for CSS is good. Use it and address the issue(s).
- On the form it says the age is an option yet the user is required to fill it in. This would be a bad UX.
- If you’ve ever filled an on-line form you notice that the required fields have an asterisk. Your form has an asterisk for “Choose you role”(sic) yet that field is not required. This is a misleading UX.
On a side note, placeholder text should not mirror the label. It should show the user the format they are expected to use.
Welcome @SerGo3577 to the forum. Your project is good and amazing.
Here are my feedback and my suggestions:
-
You should fix your inputs width and make it responsive when the project’s width is
700pxor older
-
Your body tag height MUST cover all the height of the site itself.
So this white space is existing because your #form-div 's height is 1050px.
All you need to fix that is to delete this specific height and add padding. When you add contents to your #form-div, the height is changes automatically. And don’t forget to add margin-bottom to have a good layout. And you don’t need to set margin to #recomendation-div
#form-div {
padding-bottom: 1rem;
margin-bottom: 2rem;
}
#recomendation-div {
margin-bottom: 0;
}
The final layout will be:
- Your button is not looking good because of the border.
All you need to do is delete this default style by:
button {
border: none;
}
After you add this to the button the final layout will be:
Do you see the difference?
- You can also delete the default border style of
textareaand add some padding:
textarea {
border: none;
padding: 1rem;
}
See the final layout:
Thanks for your feedback but i don’t understand how fix responsive, because if look from Chrome it’s look like normal but from Firefox it’s doesn’t look good on the same sreen size
unset the height of #form-div then your surevy page become fully responsive
I did it, but nothing has changed
I can see the changes(mobile responsive). Good
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.