Survey Form Project: Feedback

Good Day!

I finally finished my 2nd fcc project. I think I have improved compared to the last project.
I would like to have your criticism on my code style (if it is hard to read or there are errors).
I would also like to ask if I am taking too much time in creating a simple page like this. This took me 14 hours to finish. I think I am going through this projects too slowly.

I highly appreciate your feedback
Here is the link


Thank you for the feedback in advance!
1 Like

You should *never use relative units for font (*unless you really know what you’re doing). The result is non-responsive website which contradicts the whole idea of Responsive Web Design certification.

1 Like

Hi,

If this is your second project, I don’t think you are taking too much time. This is only your second project. Later, you may want to redo it and you will finish it using less time. You will learn to add complexity and features. It will come.

Trust the process.

That being said, there’s some tweaking to do. I don’t see major problems, it’s all details but I would still work on them.
I like the fonts you’ve chosen except for the ones in the labels. They don’t go with the rest but that feeling may be due to the font-sizes. The font-sizes of those labels are way too big and they become too small when the screen width is decreases. Also that black color doesn’t go with the rest of the colors.
Unfortunately I can’t see the background image. If I click on the url I get ‘this site is not available in your country’. (If I want to use a background image, I find something for free and save it in my github account, then I link to the url of the image, this is possible on github, an image is a file, you can doubleclick on it and then it opens and you can see a url). There are other ways too of course, but this works for me and it’s not too complicated.
The colors are good exept for the black letters.
The text with those radio buttons are too close to each other. I would add some padding there
Everything works and yes, I can see, you have not yet built many projects. For example, You use flexbox for the spans, it’s awkward and flexbox has not really been designed for this but hey, it works, so who cares?
What you are going through and the way you build your pages is completely normal, you are learning so much now so just keep building and you’ll get there.

Greets,
Karin

2 Likes

I am not advanced enough to judge code, but I do like to see the page itself. I’m slightly mad at you…you made me sooo hungry! LOL. It looks delicious. I’d like to eat your survey form.

1 Like

Thank you for the feedback. But not using relative units forces me to use a lot of media query for the width of different devices. or am i missing something?

I will try to use a lot of media query and use absolute unit on my third project to make it as responsive as possible and challenge myself more.

Thank you very much for reviewing my project. I highly appreciate it.

Thank you for the feedback, mientje. I added a media query to increase the size of my radio and checkboxes. i will try to add a media query to increase the size of the fonts in smaller devices as well.

about the label font, I actually stopped designing the label part cause i was trying to alot a single day per project (but this one took 1 and a half day) thats why I just winged it. Ill design it on a later time.

about the unavailable background image, Is it okay to download an image in google then upload it on my github? are there no copyright things that I might encounter if i do that? i would like to try to so my background image or the images or links I import becomes available to all.

abou the closeness of radio buttons, Ill try to work on the distance of radio buttons and text. I think am focusing too much on smaller resolution’s responsiveness (even the computer I am using is at 720p). ill try to improve it so it becomes responsive by adding more media query

about the displayflex, Hahaha. for some reason when I add display:flex to the description of the radio and checkbox list, (I used span cause it doesnt add huge line-height like

and I realized if I use

or even h3 and just decrease line-height it will work the same)) The description stays on top and the buttons are below it. I changed it to display:block now. It still worked the same. I realized the problem was span is an inline element. thats why it doesnt automatically provide line breaks unlike block elements.

This feedback made me realize a lot of problem with my work, Thank you for taking the time to review it, I really learned a lot from this

Thank you again!

1 Like

LOL. I had the same problem. I actually prepared a snack I can eat anytime cause I also got hungry while working on it. Thank you for the feedback.

1 Like

Exactly, media queries are there specifically to make websites responsive :slight_smile:
For project like this one it actually possible to make it responsive without media queries with the use of max-width and relative values for the rest of the elements besides the text. There is UX “rule” you really must comply with: “When user zooms in (Cmd +) font has to grow accordingly” - it’s very important!

Hi @BonnieMaki!

Just some comments about your code:

  1. You can use tags like header , main , footer to organize your code and increase its semantic, instead of just comment as you did on line 4

  2. placeholder does not work for input type date
    https://www.w3schools.com/tags/att_input_placeholder.asp

  3. And I liked the way that you put the filter on your background, nice! :grin:

Yes, there are copyright things. It’s a problem. I often see beautiful images that I can’t just use. Every website is different. Some allow you to use it for non-commercial purposes, some don’t, it’s complicated and extremely boring so my heart goes out to you.

Those font size have improved. Your page looks a lot better.

And you taught me something new: the filter property, didn’t know that one yet.

I noticed you didn’t choose a font for the labels and that shows. What you have chosen, is really quite nice so it’s a matter of continuing your design. If you don’t feel like it, well, just do something else and you can always come back to it later.

display: block feels a lot more logical and is the correct choice. a span is inline by default, if you change it to block, it behaves like a div.

If you select the labels that surround the radio boxes and add a bit of margin to the right, you create more space between them. If you use the position property, you can move the labels and the checkbox inside it. (position is not easy, it took me a long time to get the hang of it and I still struggle with it sometimes)
.breakfast-choice label {
margin-right: 8px;
position: relative;
top: 1px;
}

Happy coding,
Karin

I’m going to stress again what @snigo said, never use view port units for font sizes. The user should always be in control of the text size on the page (i.e. they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Currently, the text size on your page will not change using this method because all of the font-sizes are defined with vw units. This means the only way I can increase the text size is to widen my browser window. What if I have really bad eyesight and can’t make my browser window wide enough?

Speaking of not being able to see things, the black text on your background is not that easy to see either. I think you need to increase the opacity of the background color on the form even more so the text stands out better. And then when you do that the light purple text may need to be changed to make it easier to see as well.

The <label>s on your text inputs at the top aren’t working correctly because none of the have a for attribute. And the <textarea> needs a <label>.

For the radio button/check box groupings, consider using a fieldset/legend for each grouping: https://webaim.org/techniques/forms/controls#checkbox