Hey people and aliens! How’s it going? I just finished my second project: Survey Form. And a little paranoid voice in my head tells me something’s missing. Could you give me feedback? Thanks for your time!
Hi @fernanda.is.learning, your survey form is looking good. The one thing I would suggest is to not use the
<br> element to induce spacing. There are other ways to group thing and you can use margin and/or padding in CSS.
your page looks nice
I think it’s good to add some empty lines in your HTML code, e. g. between logical sections on your page:
You can also order attributes alphabetically in CSS selectors, it’s easier to find one you are looking for when there’s a lot of them, works for me
Hello there @fernanda.is.learning,
Maybe you should consider adding some padding to the textarea and text inputs?
Also: I agree with @pdogonowski that you should space out your HTML and CSS code to make it easier to read.
I think you’ve done a great job overall.
I think it looks good on monitor and resizes well enough on smaller screens like phones - although maybe a little more work on the padding on the mobile screen sizes so it is centered instead of slightly off to one side (but that’s just me).
Hi @Roma, thank you! I keep using this without realizing it like it’s a bad habit. I have to stop using this in the wrong way I deleted all the
<br> elements now. Thanks for reminding me!
Hi, thank you!
I just added the empty lines and it got a good clean look. In general, I try to order the attributes in the same order as the HTML tags, but I’ll try to order the attributes alphabetically in CSS in the next project and see what works better for me. Thank you for the tips!
Hey there @asemarian,
I added padding in both, and then I realized why you gave me this advice. Now it’s looking better, thanks! About the space out in HTML and CSS, I did and you’re right, it’s a way better to read!
Thank you! I’ve tried a few things to modify padding on the mobile screen sizes, but I haven’t figured out a way that works. Can you explain to me how you do it, please?
Hi again ,
I think what is happening here is you have a fixed width set to .input-textarea of 530px so when viewing on a screen size smaller than that it is looking a little bit off regardless of what you do with margins or padding.
A simple fix is you can use a media query aimed at smaller screen sizes to change the width to a smaller fixed value,or use a relative value like width of 85%.
Here is a easy to understand guide to media queries and breakpoints is W3 schools, and some more info can be found here in MDN docs.
Let me know if you need any more help after you have played around with the media queries a bit (which are really useful to know anyway).