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!
- 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.
@jsharick7 Here are a few tips for improving your project.
- Submit button needs margin on the bottom because it is touching the edge of the browser.
- Textarea needs a little bit of padding to push the text away from the sides.
- 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.
- Maybe add margin 0 to the body.
- What about adding the ingredients broccoli, spinach, garlic, onion, anchovies, and basil?
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
<br> to CSS, I’m saying use CSS to do your styling for line breaks, padding, margin, etc.
@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