Feedback for Survey Page and my terrible use of CSS grid

So… here’s my survey page at the moment: https://codepen.io/Ast2435/full/wvwoKNp

It’s ugly, very ugly, if not the website, then the code, this abomination isn’t even responsive, i tried to use CSS grid, and i think i did it the wrong way, i’ll read more about CSS grid and try again in the product landing project, but for the meantime, i’m taking all the criticism and feedback you have about the survey page, i know i used CSS grid in an unorthodox way, please if you have some examples where i can see how to use it effectively i would be grateful.

Also i did not use media queries again, but i’ll keep them in mind for the next project.

For my product landing page, i’m hoping to use CSS grid and CSS Flexbox the way you are supossed to do it, and i’ll try to at least include one or two media queries, but it might take some time.

  • I would choose a background that is more easy on the eyes. You can also try using this background with a lower opacity.

  • Don’t forget to also apply the right font-family to the placeholder text.

  • The gender box is slightly smaller due to the dropdown. I faced the same issue ( https://codepen.io/michelz/pen/vomLWb ) and solved it by applying the below code.

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
1 Like

Hi @Ast2435, your form looks okay. There are some things you need to revisit;

  • Pass all the user stories. Currently your page meets 13/17
  • If you’ve filled out an on-line form you may have noticed that required fields are marked with an asterisk. If a field is not required, don’t mark it as such.
  • Don’t use inline styling, use external styling for your page. To further expand on that though, your radio buttons/checkboxes don’t need to be list items in an unordered list.
  • You have places where you use the <label> element incorrectly.
  • You also have some missing closing tags.

If you’d like a little practice with grid, try playing with Grid Garden

2 Likes

@Roma @michel-z

Thank you so much for the feedback, about the user stories, i already passed the test, but it appears like that because of bad nesting of the form element when i tried to fix something after i passed it, and now if i try to take the form out of that div, everything moves :frowning:

i’ll take care of the other comments today, thanks for the dropdown list fix, and i agree, the background is ugly, but i don’t know how to make it less opaque, i can research it though!

Thanks for the link to Grid Garden, i started it yesterday and it’s really helpful, next one is Flexfox Froggy! :smile:

Just one more thing, i noticed that when the browser width is small, the page is not as responsive, do i need to add a media query for this? and what should it do? reduce the grid columns from 2 to 1? that’s all i can think of.

EDIT: i’m trying to fix the form element, but when i put the whole website inside the form element, it dies, everything moves where it isn’t supposed to move, when i delete the form element, everything magically aligns, any tips for this? it’s killing meee

You’re off to a good start. I see you’ve started reworking our form. Let me give you a hint. Comment out all of your CSS and take a look at your form and see if it passes all the user stories. (I know it does.)

Now you can start styling it. Tbh, the form is simple enough that you can make it responsive without having to use Flexbox, Grid or media queries. But it’s up to you how you want to style it. I would suggest keeping it simple. As you progress you can always revisit it and give it some extras as you learn more. But as you do (if you do) keep in mind that you still want to pass all the user stories.

I saw your notes/comments in the JS section. If you comment out all your CSS you’ll see your textarea is at the bottom as you expect it. It won’t hurt you to possibly ditch all your CSS and start from scratch. Delete it, take a deep breath and start again. You can do it.

1 Like

I fixed it!, i had to do extensive debugging, AKA: i changed every row’s background color until i could see what was going on lol. It turns out i was using CSS grid code directly onto the textbox where i should’ve been aiming for the div the textbox was in :man_facepalming:

My original idea was to just use normal CSS, but i wanted to gain experience using Grid, and oh boy it worked, now i know i should be targeting divisions and not single elements haha.

I guess taking a break from looking at the code worked, had to read everything carefully to caught it, but i’m glad i did it, thank you so much for all your help!.

Before starting the product landing page i’ll take a break to read more about CSS grid and flexbox since i want to use them better next time.

1 Like

Hey @Ast2435, I also found this for honing Flexbox skills. Probably a little better than flexbox froggy since he makes you do things repetitively.
The flexbox game is free. The grid one isn’t free yet but I keep watching hoping that someday it may be.

Btw, good job on figuring it out!

1 Like