Survey project: could you share some feedback?

Code Feedback
1

Hi everyone,

I’ve just completed the first version of the survey project. This is a work in progress, but I’m really interested in getting some feedback so I can spot issues I might have missed, and fix them as I clean up the CSS.

Here it is: FreeCodeCamp- Survey Project

It’s worth noting that this took WAY more energy than I anticipated. I was certain that aligning boxes would be a breeze, but it turns out it’s a bigger challenge than I thought, so I learned a lot! ( but tbh, from now on it’s only google forms for me).

Thanks in advance, and happy coding everyone! :slight_smile:

Edit: Now that I’ve fixed some issues - I’d love to get more feedback about either mobile or desktop view, or the general feel you’re getting from the form.

I’d be grateful for any suggestions you may want to share!

2

Look good, neat and kind of pro in desktop, but it needs some more work for mobile.

Using placeholder for text fields, very good.

using shadow on top white text to bring more contrast, very smart, and very good.

This is not critical, but I would use a little more dark colour for text to bring more contrast.

Radio and checkbox buttons have no associated label to them(broken linking), c’mon! please, always use label to host a text to a radio/checkbox.

I think the should be a little more spacing between radio buttons. placing them vertically also work too and more common.

No any default option for the combo box, good!

“submit” and “remind me later” buttons have different height! not good! they should have at-least same height, if you go for same width too, so awesome. Also bring more space between them

About the mobile, it’s broken when screen goes a little more small, all becasue you used absolute constant values for text fields and other elements(200px for example). This causes scrolling horizontally which is not very nice!

Instead of 200px, use something else like 100%, and control the max value using parent element or another unit like inch.

vertically flow layout for radio buttons look better for mobile device, current layout looks broken , check:
image
Also note the not well spacing between elements. in mobile, input elements especially should come with good spacing with other objects.

I would apply a little more line-height for footer two line text.

Also this is good to place horizontal line between each section of form (e.g. after and before radio buttons)

For mobile also, you may reducing the margin to screen edge to utilize more space for page content.

Keep going on great work, happy programming

1 Like
3

@NULL_dev Thank you so much for this awesome feedback! Hopefully, the suggestions are all fixed now :slight_smile:

4

Good progress, very good.

Still could be better, keep goin on great work.

This is true this work is just for practicing, and even you would pass all FCC tests, but this is a good practice to take the work very serious and hard to bring world-class work.

This is I see in single developer here, I just try share my thoughts about works, and like to bring some hard and serious policy.

Keep going on great work, happy programming

1 Like
5

I totally agree, @NULL_dev ! There is always more work to be done and I appreciate you taking the time to share your thoughts.

I’d love to know what could be improved, if you have any suggestions. For example, I’m having second thoughts about the top image. Not sure if it’s contributing or not.

I’d also love to know what you think about other aspects of the project :slight_smile: Feel free to share - I’m constantly changing things, and for me - the work is never done. I’m happy to work on it if it can improve (same goes for my previous project - I’d love to get more feedback and improve it :slight_smile: )

Thanks again for all your help! I can’t wait to get to the next project later today.

6

Well some parts of the code are not belong to standard. for example using pink background colour. But it’s not standard if you use light green text over gray background, becasue the text is not really readable now.

The same story about images. You perfectly added good contrast (by good text color) and great shadow to make it readable at any part of the images.

Beside this is better to not user images come with vary colours(especially contrasted) as background, e.g. image of sky is good, becasue it’s almost blue and some white(clouds), but a coloured graffiti image is not a good idea.

I mostly focus on layout and functionality of pages, and I think any colour could work for a page.

Would like to hear from you and all other great developers doing good here, we all are here to help each other, cheers.

Never rush, work hard and try to make serious great stuffs.

Keep goin on great work, happy programming.

1 Like
7

@NULL_dev Great points, thanks again. I can’t tell you how much I appreciate your suggestions. It makes me criticise my work more, and thrive for better results.

I think for now, I’ll replace the image on top with some less colourful pattern that won’t take the focus off the form, and I’ll add a light background to the text.

Thanks again, I know I speak for a lot of FCC members when I say your feedback is extremely helpful! Can’t wait for the blog post :wink:

8

Hi again, everyone,

I have a small issue with this project and I’d love your help. When I’m on mobile display, if you scroll the mouse sideways - a blank space is revealed on the right side of the form. I tried changing/ removing margins and making the credit and form section 100%, but I couldn’t fix it.

Edit: Adding overflow-x: hidden; to #main did the trick :slight_smile: Any other feedback about the project would be greatly appreciated!

9

Please don’t, instead try to find the issue and fix.

One suggestion I have for you to make the mobile layout more better, especially let each row/line host only on element, rather two.

You mobile view is just like the desktop, but smaller! for example, in desktop, you placed “Name:” label beside the name input text field. This works in desktop, but for mobile, not so coll. For mobile this is better you place the “Name:” label at the top of name text field, and let both name label and text field go center and fit the screen.check:
image
Tip: EIther go for grid, or try to specify display as block rather than table-column/row for mobile view.

The scroll causes by following stuffs:
input field, they come with 100% of width, and margin, and padding. Note by default padding and margin are calculated with width, so it goes more than 100%, and causes scroll. use box-sizing to fix, check:

#name, #email, #number, #dropdown, textarea {
    margin: 10px;
    padding: 9px;
    border: solid 1px #E5E5E5;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
}

Next element is the top header bold text “Are you a procrastinator?”.
Because of “procrastinator?”, in small screen and large size, it won’t break to next line(by default), either go with smaller size(recommended), or let the word breaks at anywhere with word-break, fix:
Tip: study and search about <wbr/> tag, this might help.

@media (max-width: 800px)
#title {
    font-size: 36px;/*or smaller text, please use relative*/
    padding: 20px 0 60px 0;
    width: 100%;
    word-break: break-all;/*breaks anywhere it wants(not cool), better to fix the size*/
}

You also set min-width: 250px; for text area, this could break the layout too, please don’t.

keep goin on great work, happy programming

1 Like
10

Thanks @NULL_dev! I’ve been wrecking my brain to figure out what’s wrong, and I think it was the box-sizing attribute because it’s fixed now. Finally :slight_smile:

Your comments are really helpful, I appreciate it, and I’ll make some changes soon!