Build a Survey Form - Finished and feedback wanted

Build a Survey Form - Finished and feedback wanted
0

#1

Tell us what’s happening:
I just finished writing the code for the survey form project and would appreciate any feedback. As a relative newbie, it really helps to hear what others have to say so feel free to give suggestions. Thank you!

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.0; SM-J727P Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/68.0.3440.91 Mobile Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form/


#2

Its a good attempt, and i like the font used for the page . Here are some suggestions.

Generally if you going for an approach of having the form on a simple page like that it will be better to position the elements to the middle of the page. This way you will cater to both left and right handed making it easier for people to use the page. The problem with having elements on one side is that its hard to see especially if its a user on their disadvantage hand. So its good to keep that in mind.

Either than that considering your quite new to CSS its good with what you have used. Try to explore more about CSS. Looking into things like rem vs px , flexbox and grids. and pseudo classes like hover on your button it will give you alot more options to play around with and allow you to position elements with ease.

I recommend this course if you are looking for a good tutorial, has everything you need to know about css.


#3

It’s Cool…
Very good looking font.
Nice job pal.


#4

Thank you for your feedback! I actually didn’t know to center my elements, but I will implement it into my code once I get to redoing it and take it into account for future codes.

I’m actually working on the product landing page right now and looking into flex and grid to see which one is best going to work for what I have in mind. Also working on a dropdown nav, which is going to take me some time to get through what i’ll need to do for that, since that also involves the pseudo classes you mentioned. We’ll see how that goes!

EDIT: I wanted to add I wasn’t feeling particularly inspired with this project, so I agree it is very basic. I tried a couple of things design wise, but I honestly liked the simple design better. A form like this doesn’t need bedazzling, so I gave up on that for this particular project. My first project has more features than this one (linear-gradient borders and flex are examples).


#5

For flexbox and grids u can use them both together. Flex is one dimentional and grid is 2 dimentional and both work differently. Actually there is alot of things you can do to beautify a page even as a simple form for survey forms. Youtube has plenty of examples for beautifying forms. If you feel like it you can redo again, you will see better results :slight_smile: . I actually redid my survey form which i did recently. Here is mine if you want to check out, where i used both flexbox and grid


#6

Oh, yours looks so good! I think I was having a little trouble with visualising anything “extra” , since the form is so general. I need to have an idea of who/what the form is for before things like color themes or pictures work in my mind. Maybe I’m just weird lol. Like I said, I’m defiitely going to redo it in the near future though!


#7

I didnt came with the idea immediately , and wouldnt say its completely original either. I looked thru some examples of forms online (tons of them). And youtube where they style some fonts and took some elements from here and there. I think its okay to take ideas from some things to learn :). Im sure u can find inspirations from other peoples examples for your own design gl ! :slight_smile:


#8

Your form looks really good. I really like fonts you used! A couple of things to consider:

  1. I would up the font size on your #description and #survey-form to 16px. That is usually the minimum font size recommended to make it easier to read. I usually use ems instead of px to help make the page more responsive. To match ems to px you just do desired font size divided by 16 (base font size) = ems. For example, on your heading, you would do 35/16=2.18em. Here’s a really good article about it https://alistapart.com/article/fluidgrids.
  2. I would up the font size of your Submit button and change the color on hover. You just use #submit:hover {background color: } in your css.

Hope the suggestions help!