Second HTML/CSS FCC Project: Survey Project

Hello everybody!

So I need to get the fear of sharing my projects out of my body :sweat_smile:, so here is the survey project I just finished. All feedback are welcome of course.

1 Like

Hi, I like your project. It’s very interesting.
But I think that inputs could have bigger line height. It would be easier to hit the correct input. And the dino is not responsive.

1 Like

Thank you for the feedback :smiley:
I upped the height of the input lines, and made the dino responsive.

It seems like he was only responsive when pushed down below the survey form on smaller screen sizes. But after setting both height and width to 50% the dino now scales with the screen as it should, both when right of the form and also when below the form.

Well it also seems I forgot to put a div around the dino. That made him scale more properly overall. Responsive images are dependent on the containers surrounding them after all. :smiley:

1 Like

It’s a very creative implementation:)))

And, overall, well coded. I only really have one small criticism. The desktop layout is still not perfect. If the viewport is less than 1,500px, the page is wider than the viewport (so there’s a scroll at the bottom). If it’s above 1,500px, the page isn’t centered.

This second part is an easy enough fix: you need to add justify-content: center, or space-around, to your main container (the default is flex-start, which aligns your content to the left in this case).

The first issue is more complex. Here’s why: you’re combining FlexBox with old CSS properties like width, margin, etc. to code your layout. Things would be much simpler if you only used FlexBox specific properties for adjusting layout. In this case, you would set width with flex-basis, not width. You can also adjust flex-grow and flex-shrink, if you wish, though it doesn’t seem necessary.

Once you learn these flex properties in depth, I promise you, it makes layouts soooo much easier to code. There’s a great tool for learning Flexbox, called Flexbox Zombies. It’s currently free, it’s fun, and it’s comprehensive. You will learn Flexbox once and for all, and save yourself from layout related frustration forever.

1 Like

Thank you for that very useful feedback. I will get right on top of correcting the issues. :smiley: