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.
Good job!
1 Like
Hi,
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
1 Like
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.
1 Like
Hi 
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).
Good job 
1 Like
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!!
1 Like
Hey!
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).
Happy coding
1 Like
Hi @fernanda.is.learning, I am looking at the mobile view. What @MazontheMoon mentioned would be good for that textarea at the bottom of the form.
May i also suggest, your menu hamburger would look a lot nicer on the page if there a fixed menu bar that spanned the width of the page. Keep the hamburger menu icon the same size. Currently, as you scroll, the menu hamburger button seems smooshed or to tight up against the text form elements. Having a page wide menu bar div will give it a cleaner view and not look so tight. But otherwise, it is a good looking form! Good job!
1 Like
Hey again ! When you said to work a little on padding in mobile sizes I thought it would be to modify the padding of the entire page (haha silly me) So today I did as you spoke and it was pretty simple. Thank you so much for the tip and the links! I’m doing the next project (the product landing page) about five days now, and although I can make a page ok, I forgot it should be responsive to all kinds of screen … so the page only gets cool when viewed by computer. I am having a hard time understanding media query and making the page responsive. I think I’ll recreate the page in mobile first 
but the point is that the links you sent me are much more enlightening than others I have seen, so really, thank you !!!
Hi @SHoar! I modified just as she suggested!
About your suggestion: I didn’t know what a hamburger menu was until you comment and I google it haha. It’s very cool! And now I’m thinking that maybe you might be talking about the green hamburger menu, if that’s so, it’s the FCC user story test. If this is not it, then I’m lost. BUT it was a great idea, and the page would look more professional. And it has 90% chances that a hamburger menu is the solution to the problem I’m having in another project. So I’ll learn how to do it and I’m gonna add it to the projects. Thank you for the idea and the feedback !!!
Hey Fernanda,
great work!
Some ideas:
- General Spacing: I would increase the space between 1.) label and input, 2.) the checkboxes, 3.) the sections in general, 4.) the border of the inputs and the text in the inputs
Hey ,
Glad the media queries links helped you out.
Gimme a shout when you have the Product Landing page finished and I’ll happily have a look over it (I’m still a total noob myself but sometimes it’s easier for other noobs to understand what you are dealing with in these project eh!)