Hi, I completed another of my HTML & CSS project and need some feedback
https://codepen.io/kalium123/pen/qBNMEOq (UPDATED)
Hi @dreamo123. Your form looks good.
Some suggestions:
- Add a placeholder for the textarea.
- Make the textarea more big vertically.
- Add a little bit margin between the
input
fields. - Change the color of the top
h1
to black so that it has more contrast. - Disable horizontal resizing for the textarea by adding
resize: horizontal
to the textarea. - There are some small errors in your HTML & CSS code. Find it by clicking the down arrow and then āAnalyzeā.
- Add a hover animation for the
submit
button. - Change the mouse to pointer when hovering over the
submit
button by addingcursor: pointer;
.
Anyway, good job as a beginner project. Impressive!
Thank you. I will work on the things you mentioned.
Looks good to me though the font could me more larger and the spacing should be minimised.
Your form looks good @dreamo123. Some things to revisit;
- Userās are not seeing your page the way you want them to. Most wonāt have āPoppinsā loaded on their computer and you neither
link
to it (head
element in HTML) orimport
it (CSS). - Thereās a typo on line 37 in your CSS;
font-family: Poppins, sans-serif, ;
thereās an extra comma
Hey, just thought Iād chime in with a few accessibility issues:
- The keyboard focus indicator is so faint as to basically be non-existent. When you use the Tab key to go through the inputs you should be able to clearly see where the focus is. Use the CSS outline property to make the focus indicator clear on all inputs/buttons.
- Youāll definitely want a
<label>
on your textarea. Iām guessing just change the Comments<h2>
to<label>
. - You donāt want to use
<label>
for text above the radio button and check box groupings. Instead, use a fieldset/legend combo:
-
When I increase the text size the āSUBMITā on the button breaks out of its container. The way to fix this is to use
em
units for width/height instead of px, which will allow the button to grow as the text size increases. -
Technically, your main content should be wrapped in a
<main>
. So I would suggest you change the #form-details<div>
to<main>
.
Thanks Roma. I corrected the comma and changed Poppins to Arial.