Project #2 Survey Form

Code Feedback
1

Hi!
So I have managed to get the second project done. The thing I am most proud of is that it didn’t take me too long. I spent quite a lot of time on project one and still ended with a very simple site.
Anyway, here is the project number two!

Since I am a complete novice, any feedback is very welcome!

All the best!

2

Hey Carlos,

great job so far! :clap:

My ideas:

  • all tests pass, awesome!

  • you can get a code validation:

    • HTML: paste your codepen HTML code into the body
    • CSS: paste your whole CSS code
    • you will see some small errors, that’s totally normal; try to fix them from top to bottom, I think you are able to fix them! :+1:

  • create work writing comments for the user stories :clap:

  • you can increase the overall readability of your page by changing the visual hierarchy, e.g. between the different questions; you can read more about it in principles of design

  • when I decrease the width of my browser, the content gets cut off; a horizontal scrollbar is mostly something you want to avoid; this is important for people who read your page on a smartphone:

    Screenshot_2020-09-07_11-42-24
    Screenshot_2020-09-07_11-42-24501×607 69.3 KB

Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

Feel free to ask questions and keep up the good work! :slightly_smiling_face:

Looking forward to seeing your next steps.

1 Like
3

Hi Miku,

First and foremost thanks for your feedback! I reallt enjoyed the ‘code validation’ will definately use that in future. Really helpful to revisit my code, made me see some silly mistakes!

I would really appreciate some help to deal with the issue that ocurs when one decreases browser width. I keep on coming over issues like that. Could you maybe point me in the right direction?

Thanks and regards,

4

You’re welcome! Yes, that’s a great feature!

You’re using padding: 10px 250px 50px 250px; to move your form.
So if you think about it, pushing something 250px to the right/left is a problem when your screen is only e.g. 300px wide. Centering with hardcoded pixel values is mostly not a good idea.

Centering is very easy with CSS flexbox. I would recommend to have a deeper look at the lessons about justify-content and align-items.

1 Like
5

Some additional things to revisit on your form @carlosdevelopmentpat;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • In the textarea, it’s a bad UX when the user has to delete text before they can type their own.
1 Like
6

Hi Roma and Miku,

Thanks for much for your feedback and help.
I have had another go at the project, basically the same page but with simpler code, and taking both of your precious feedback into account.

Here is the site if either of you fancy having a look.

@Roma I am aware the script should be kept in. But I code my site separately and then paste the script in to check the results!
Thanks to you both!

7

Hey Carlos,

great work!

Coming back to this suggestions.

Visual hierarchy and spacing are really important to lead the user.

I re-worked it a little bit:

Screenshot_2020-09-10_09-12-55
Screenshot_2020-09-10_09-12-55686×777 216 KB

  • I increased the font-size of the questions (visual hierarchy between questions and possible answers)
  • I added some more spacing between the questions
1 Like