Who likes coffee? Feedback on my coffee survey please!

Code Feedback
1

Hi coffee people!
I’d really appreciate feedback on my Survey Form please, second challenge done with some hiccups (not caused by coffee)

Thanks in advance!

2 Likes
2

Hello~!

Your text is a little hard to read on the white background. I checked the contrast rating and it is only 1.74. The WCAG standard is a contrast rating of at least 4.5 :slight_smile:

image

1 Like
3

Hey, looks good, just a couple things.

  • You’ll want to run your HTML through a validator. There are a few errors, one specific is you use the ID milk twice.

  • At less than 810px your title word wraps and the line height is not high enough so it overlaps itself.

  • There is no padding to the container so the text gets very close to the edges which looks a little off.

  • At smaller screen size or px width I’d say you might want to get rid of the paper effect and let the text use the whole page, or reduce the side margins a good amount so it isn’t so squished up.

  • Along with that, when screen is smaller your slider options force the text to wrap and it looks funky. You might want to figure out how to put it below the slider and set it to the left and right underneath.

Nothing too major, but the validator is the most important part really cause you’ll want to fix those errors. It’s the first thing the mods here will post about saying you should do. Keep at it!

2 Likes
4

It’s great! It would look better if everything was centered.

1 Like
5

Your page looks okay @LSFerrand. I see I’m a few days behind on what others have commented on but there have been no changes so some of what I say may be a repeat of what they said. Some things to revist;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • If you’ve cleaned up as codepen expects then since copy/paste from codepen you can ignore the first warning and first two errors. Otherwise clean up all the errors.
    • There are HTML coding errors you should address.
  • Users should be able to click on the label to select, not just the radio button / checkbox
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • You have the following property: value; in codepen, background-image: url(../img/background4.jpg);
    • No one sees the background image you want because it’s hosted on your computer. You’ll need to put it somewhere where it can be accessed. GitHub is one place, there are other image hosting sites you can use too.
1 Like
6

Hello!
I didn’t notice that the importance of the contrast, thanks for pointing that out!

7

@codecory Thanks for the comments, will check one by one and improve it :blush:
@Roma Merci for the feedbacks, I will check all… However, I had the picture linked to pixabay, somehow I didn’t copy the right version… :confused:

8

Thanks! Will check on that too :slightly_smiling_face: