Survey Form feedback before submitting

Code Feedback
1

Hello fellow learners,

Ok, this took me gazillion years! I’ve been on it since Xmas.
Survey Form Codepen

Since I had no idea for a design for my form, I took the Google form design. Oh boy! Was I in for a ride!!!

  • I danced with flex for the header

  • I also waltzed with z-index but settled for fixed position etc …

  • I had fun with the little star input without JS. For whatever reason, the input box shows in codepen where on my computer it doesn’t show, no matter what screen size I chose….Why?

That left me exhausted for the rest: I would love to continue and improve but at some point, I have to stop and submit. So I am fairly aware that there are plenty of things to improve(ugly input boxes I’m looking at you!). I honestly did not pay attention to the mobile version.
So, I think I’ll submit unless there is a huge reason you see I shouldn’t: I’ll give it until the 13th of April 2019 to receive your feedback!

PS: now, I have an important question though. As you can see in my work, I change from percentages to em to px for sizing stuff. It shows that I have absolutely no clue how to use them and when because I chose randomly when it fits on the screen. I just don’t get it. Any light to my darkness?

Thanks for the help!
Laetitia

2

nice design
I found that one of your input fields extended outside the form page. :wink:

1 Like
3

Thanks for taking the time to check my work and answer.
Yes, the input fields …there is that too !:pensive:

4

Hi @carquet

Nice design, nice work !
Don’t worry, no one projects are perfect. The final release is just the step before the next :wink:
For the input who goes out, use a relative length for his parent instead 770px (cfr. https://www.w3schools.com/cssref/css_units.asp)
Take your time, it’s not a race. :grinning:

And for the px/em size, the link above explain what you search.
In résumé, use relative lenght to adapt the visual of your element to the user’s display .
Em means that you use the size of the parent element. Let’s consider this ‘div’ containing a ‘span’, if ‘div’ has a size of 20px and ‘span’ of 2em, ‘span’ will have 40px of size. And if ‘div’ has no size, it takes the size of his parent and so on. Rem works the same but based on the root element (html). By default the browser put a little css before yours (called user-agent) it’s for this reason we have generally the size of 16px for ‘p’ element and so. I don’t know if i’m clear :sweat_smile:

Keep working :wink:

1 Like
5

Salut!
Thanks for taking the time to: check my work, give me words of motivation, correct my mistake and answer my questions!
Now, for the px/em/% thing, you were perfectly clear, thanks for the explanation and the link. However, I must admit I knew the theory already and my question was rather: WHY? why would you use one over the other? when can you mix them? or not. At the moment, I just try one and if doesn’t look good, I try the other: there is no real logic behind my choice.
How do you choose?

6

As mentioned before, ems and rems are relative to the size of the text, which is not just convenient for thinking about as a typography unit, it also sizes proportionally as you change the text size, without you having to go back and change the sizing as you would have to with px.

Good rule of thumb is if in doubt, size everything in rems. Obviously there are still a few use cases for px units, such as thin borders, but for the most part, stick with rems. Ems are still useful if you’re sizing something in proportion to the current text size, so the best way to think about it is imagine if the text in that particular element were huge (say, a banner or headline), would you want the margin/spacing/padding/border/whatever to grow proportionally, or stay a standard width? If the former, you want ems, otherwise you stick with rems.

1 Like
7

Sound advice .
I’ll try to stick to that next time, thanks!

8