My version of Survey Form - coffee order

My version of Survey Form - coffee order
0.0 0

#1

Hi all,

Second project finally finished, please check on my Survey Form and let me know what you think!


#2

Looks really nice! would it be possible to select more than one type of coffee if you choose to have more than one?


#3

Hi, good point.
I’m pretty sure it is possible, unfortunately I don’t know how to do it yet :confused:

Thank you for your feedback I’ll try to find a way to upgrade that


#4

Hello Marek,

GREAT DESIGN, dude it looks very good, but has some very small issues I note now. I love coffee(who doesn’t?) This brown color scheme really got me, perfect.

Layout looks responsive?! no. Because of one very small issue! Check your textarea, you set the width using absolute unit (width:465px). So it breaks the layout, how? when screen is small(e.g. mobile is 320px), so it causes horizontal scroll, and it’s bad! check:
image
Simply control the textarea width using a relative unit like width:100% (tip: set box-sizing:border-size too)

Check the label for “address” textfield is linked to name textfield. fix it.

Checkboxes come without any label associated! fix them.

I like the radio buttons so much(I vote for espresso, double please), as they look like inline block elements, very cool. If you are know some js, check this sample, and try to make the radio buttons more cool, o yes.
But one small suggestion for this, check this:


check the “Latte” label is next to the radio button, while other labels are located on next line. This is not critical pal, but if you could bring all to next line could be Great!

Your combobox comes without any disabled/hidden selected option by default, please add.

I think text fields and combobox are a little small in size! add some small padding like padding:0.3em could be great.

Not just text fields, I see whole page font size is small for me, so let me give you a tip/note.
I see you did override the global(body tag) font-size to 20px. so 20px is an absolute value. Please don’t!
Because 20px is small for my screen, while could be so huge for another one.
Tip: try not to override the global font-size using an absolute unit like 20px! Instead use em to make the text of some part smaller or larger.
Another tip: no setting the global font-size is the best size. Let user use his default font-size he likes.

Another suggestion I would give you is about the text field and combobox styling. They are white(default style), while your textarea is not.
I also think textare should be more contrasted, use lighter colour for background for example, and use the same colour for tetxfields and combobox.

The Order button is so sharp and cool! but I wish it comes with page colour scheme! Whole page is brown(so cool) but this button is not! I suggest you resync the colour of page elements.

All I notes I added here could be found at this survey form challenge walkthrough article, you have a quick read for more explanation, samples and tips.

Apply the fix, it’s a great work.

Keep goin on great work, happy programming.


#5

Wow NULL thank you so much for all tips.
I’ll correct everything for sure tomorrow, because my brain is a little bit overload for now.
I don’t know JavaScript yet, for now I want to get confident with html/css before moving forward.

I appreciate you pointed everything what needs to be corrected - I think learning on own mistakes is the best!
I’ll let you know first after I correct everything


#6

This took me some time, but was totally worth! Please check updated version and let me know what you think.

link

Without your walkthrough I couldn’t make it. I appreciate your help so much.

ps.
Sorry - button has still the same color (I personally like it), however I added hover effect with translation into brown.


#7

Hello Merek,

Well the update is really good! awesome progress, perfect.

I like the new radio button without any radio, it looks very cool. I again go for a super monster size espresso please :smile: :star_struck:

It really looks very good for mobile now, well done.

Just a very small suggestion, just check:
image
I think if you could add some very small padding for the dark brown container could be great.

That’s it, it’s okay, it was just a suggestion. I’m so happy you keep the one you liked, keet ip up, not a problem.

Keep going on great work pal, happy programming.


#9

You’re right, this should work :), thanks once again. It’s time to move on with some tutorials and next FCC project.

I hope you’ll check it also


#10

:+1:

You’d better tag(inform, message, whatever) me once you got it. I might forget.

Keep going on great work pal, happy coding.