Survey Form (PIZZA)🍕 Feedback Appreciated!

Code Feedback
1

I just completed this project this afternoon. I basically wanted to stick heavily to the example, as I liked the color scheme and layout. What sort of things can I do to make some of the inputs look more “modern”? Is there a way to customize radio buttons or checkbox graphics? Any feedback appreciated, thanks in advance!

https://codepen.io/jsharick7/pen/gOaWpGp

1 Like
2
  • When using codepen it only expects the code you’d put within the <body> </body> element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Don’t use <br> to force line breaks or spacing. Use CSS for styling.
  • Change the cursor to a pointer when hovering over the submit button.
3

@jsharick7 Here are a few tips for improving your project.

  1. Submit button needs margin on the bottom because it is touching the edge of the browser.
  2. Textarea needs a little bit of padding to push the text away from the sides.
  3. Put a higher resolution picture in the background OR you can make the one you are using now blurry. Right now it is looking pixelated.
  4. Maybe add margin 0 to the body.
  5. What about adding the ingredients broccoli, spinach, garlic, onion, anchovies, and basil?
4

Thank you both for your replies! I definitely took those things into account. I did have a blur already on the photo, as it was pretty low-res anyways ( just found off of google, so I didn’t prioritize it much). The padding and things look much cleaner now (don’t know how I didn’t notice the button!)

@Roma what is the advantage of moving <br> to CSS? Is it basically non-convention to use those anymore? Also, is there an easier way than targeting the <div> and changing it to flex-direction: column? I found that works here, but not sure if there’s a better way if things get more complex…
Thanks for the Codepen tip about <head> stuff.

5

Not moving <br> to CSS, I’m saying use CSS to do your styling for line breaks, padding, margin, etc.

1 Like
6

@jsharick7 By the way, I do not suggest using images from Google due to copyright issues you may have in the future. You can get free images to use on your website on https://www.pexels.com/ and https://pixabay.com

1 Like