[Complete!] FCC Challenge 2(Build a Survey Form)- Feedback please

Hello. I think I’m going to call challenge 2 done. I’ve worked off and on for 3 days and am very satisfied with most everything. I know that it could be so much more. That said, it’s only a challenge and I’d like to move on. I passed all 17 tests after an hour. The rest of the time was spent on responsiveness and then styling. I styled it after Amazon’s style due to the content but, I emulated it to get the practice. I didn’t copy any of their colors or c/p any of their code. Let me know what you think.
I know I can do more but, I also feel like I can revisit it later, once I’ve had more practice and learned more things.

If you need me to look over yours, let me know! Thanks!

Out of curiousity, you are using a grid layout, with the grid-template-columns set to 1fr 1fr 1fr… but then you use two columns. On this laptop, I see two columns used and a third one, empty.

Thanks for responding. Yes. There is an empty grid space, on purpose. I used a “.” to keep that center row, last column empty. It brings the form to just the center area, making it centrally located at all times. Also, if I ever go back to add some more text and some links or images, or even ad space, I have that available.

I just needed nothing there. I like it but, happy to hear your opinion. Do you dislike the design on a pc?

Not at all, it’s a good design. works well, like the descriptive column as an aside. On the whole, works well. Simple color scheme, and viable form.

Very well done.

1 Like

Thanks! Really appreciate the honest feedback!:slight_smile:

well done and entertaining

2 Likes

It looks great on my phone, which is something I have trouble figuring out for my projects… :face_with_raised_eyebrow:

3 Likes

Some problems that I’ve found:

  • Why you have an extra invisible column on the right?
  • With 602 x 740, elements start to overlap each other.
  • I’d remove the orange “M” in the header as it is kinda difficult to read with that background

Overall it’s not bad at all. Here’s some suggestions to improve this form:

  • Input placeholders with the orange background is barely visible
  • Name and email labels are on the right but everything else is on top of the inputs. I’d choose either one or another.
  • I’d change the radio buttons to be vertically align, as it is it’s difficult to know which option matches the
  • Same for the check box
  • I’d lock the text area to stretch only on the vertical axis
  • I’d increase the Submit button, it’s very small at the moment. Also remove the ‘!’ from the button.
  • I’d stretch the left column to match the right column when not in mobile view

Happy coding

1 Like

Plan your pages with mobile first in mind :smiley:

1 Like

Hey, thanks for checking it out! Well, you were the first that had an issue with mobile so, I’m glad you looked. I had designed for mobile and had a media query set at 600. You squeaked through at 602. I bumped it up to 610 to accommodate.


That takes care of the invisible column(since it’s only supposed to be on desktop or large screens.(thanks)
That puts all labels where they should be on a 602px screen.(because it should have swapped, it did for me and everyone else. Thanks)
I’m no the biggest fan of the orange m either but, if you look at it on pc, I’ve got a shadow to draw it out. Still not showing up mobile. But, due to being based on Amazons limited pallette and my limited experience, I’m still working on that, at a later date.
Thanks for the suggestion on the radio buttons. I don’t have a problem with them personally. I think it was the display issue that I fixed.
Submit button should be fine if the media query had worked. It’s a tad small but, pretty standard size compared to Amazon Payments.
And, the left column should match the right column when not in mobile view. Don’t know what you’re seeing but, form is perfectly centered for me on both mobile and pc. Probably down to those 2 extra pixels on the mediaquery(which I’ve fixed. Thanks.)

Going back I did add an Amzon logo(not working my mobile) working on that. Just to show that it was based on Amazon and their minimal design. Like on https://pay.amazon.com/us/global-partner-program
But, I really thank you for being thorough.:slight_smile:

1 Like

I do try to, but sometimes my iphone shows the codepen’s full page weird…I noticed some other people on here, as well as one codepen, have had some compatability issues, but I guess @Jerami figured it out! I’m gunna look at this article though anyways, maybe it’ll help me fix my issues. Thank you

2 Likes