Restaurant-Survey Form

Code Feedback
21

You can’t customize radio / checkbox buttons easily. It requires fairly complex code, try googling and you’ll see the complicated code. Also, it will probably require having two elements for just one checkbox. The first one will be the real checkbox that will be hidden, and the second one will have something to do with making a custom checkbox.

22

@Steffan153 Sure, I will check it and try to implement it. Thanks for the guideline.

1 Like
23

Actually, since you have labels for the checkboxes, it shouldn’t require many adjustments to the HTML. You could try hacking on this pen:

https://codepen.io/spacemonkey/pen/vmZROv

24

I just noticed a typo in the html, it is opening the label tag and then the closing tag is missing a /.

1 Like
25

@Steffan153 I tried to check the typo in html code in the checkbox section. But I didn’t get it. Can you please mention the line number or value of that checkbox?

26

On line 32 in HTML, it should be </label> instead of <label>.

28

@Steffan153 Thank you. I just closed the tag. I was looking into checkbox so I didn’t get it.

29

I could’t find many nice checkboxes, and it’s actually good to be simple & boring (no recreating checkboxes / radio buttons / select boxes to make them look nice, etc.). Because then you spend hours just trying to make something look nice, it’s better to just use what the browser gives you. Also, with the browser’s built-in elements it comes with accessibility etc. out of the box.

30

Well done. Looks nice. I ran the html analyzer and there’s some attributes missing for the text area.

31

@shwetapatel3591 Here is a tip. Steffan153 showed you how to view the website in mobile view in the dev tools.As a challenge, I suggest trying to start a project at that size (the smallest iPhone 5) and expand outwards adding media queries where the design breaks. You will have to use

 @media (min-width: ??px) {
  /* code */
}
1 Like
32

@ericlyv Thank you. I will look into it. Actually, I know about that analyzer attributes missing but I don’t need it. Though I try to solve that issue.

33

@brandon_wallace I am not sure but I think it is as following:

@media (min-width:320px)
{
}

Please give your response to it. And again thanks for your suggestions.

1 Like
34

@shwetapatel3591: Yes, that is correct for iPhone 5/SE. :smiley: You can see the dimensions at the top, like this:
DeepinScreenshot_select-area_20190601073759

35

@Steffan153 Thanks a lot!

1 Like
36

@shwetapatel3591 Hi, here is an example of a mobile first media query.
You should use the break points that you need for your particular design. Every webpage you create will be different and require you to use different break points.

@media only screen and (min-width: 400px) {
  .title {
    font-size: 6rem;
  }
}

@media only screen and (min-width: 500px) {
  .title {
    font-size: 7rem;
  }
}

@media only screen and (min-width: 600px) {
  .title {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 700px) {
  .title {
    font-size: 10rem;
  }
}
37

@brandon_wallace Thank you for the suggestion. I appreciate it.

38

Wow! nice survey form!!
Some things you need to change:

  1. You wrote ‘Which is your most favourite cuisine in our restaurant?’. You need to re-write it to ‘Which cuisine is your favorite in our restaurant?’
  2. can’t I pick all of the cuisines? I’d eat almost anything.
  3. Great job!
39

@ConnerOw1115 Thank you so much for your feedback. I will make the correction.

40

@Steffan153 How did you do the blurring text??
that is so cool!!!

41

@ConnerOw1115 Thanks. It can be done using opacity property in CSS.