First project- Survey- Feedback welcome

Hey there, I was hoping for some feedback on my first project! Please let me know any tips you may have to help me progress on my coding journey! :slight_smile: (also let me know if the link doesn’t work, i’m new to codepen)

also not sure why it says surgery, it was a typo and I changed it but it didn’t update

1 Like

Nice work! My first Survey Form wasn’t nearly as good.
Just a few suggestions to make it even better:

  1. The Background: It’s a bit bright, especially with the pattern, and doesn’t contrast the best with the calm navy survey background color. Either consider darkening it or changing it to a compatible solid color. Here are some nice color suggestions that will go well with your navy survey form:
    Light Gray: #f2f2f2
    Beige: #f5f5dc
    Pale Blue: #e6f2ff

  2. The Submit Button: Your button is well placed and just fine as it is, but I noticed the styling you applied to it isn’t working. It’s because of a simple error that’s easily fixed. See below:


    You did a great job styling your button, but you forgot to apply it! Your selector input[type=“submit”] doesn’t exist in your HTML, so you were unable to see that chunk of CSS put to work on your submit button. Remember, you used a button, not an input tag. So replace input with button and it should work nicely. See below if you’re not sure what I’m talking about.

    Don’t worry - we all make simple mistakes like this all the time!

  3. Font: This is something I really like to do with my projects and IMHO, it really makes a webpage better, as long as it’s used professionally and consistently throughout the page with taste. Consider adding a font. The font you have now is basic and, well, I won’t say boring, but…
    …it could be less boring. So try adding a clean nice font to your work. I like to use Google Fonts - the pro’s also use it and it’s very easy to set up. Just go to https://fonts.google.com/, find a font you like (the fun part) and then just follow their directions on how to add it to your webpage. Usually it involves a simple copying and pasting of some <link> tags into your <head> section and then just adding the name of your font to your CSS body selector or another selector, depending on if you want to use more than one font. So it’s very straightforward and a good little skill to add to your toolbox. Read this CSS Google Fonts only if you’re having a hard time - but try to figure it out by yourself on google fonts’ website if you can - if I could I’m sure you can too.

All in all great job and keep on making more cool projects - you’ll be surprised at your own progress before you know it!
Happy coding,
Nicolas, 17

3 Likes

Thank you so much for your insight on the design side of things! I definitely forgot to go back and fix my css after fixing my html. I didn’t even think to look at other fonts! Like you said, that is the fun part and I didn’t even think about it :sweat_smile:. I really appreciate your feedback. This will absolutely help me improve my work!

1 Like

Of course, @mhasty1120 ! I remember when I first finished the Survey Form and received feedback here on the forum - it meant a lot and I wanted to return that.
Have fun with the fonts and feel free to share an updated version if you like!
Nicolas

2 Likes

It’s a great project. Really reminiscent of the FFC UI which I really like. Looks like @nickrg has already given you a big insight on the project. I’ll just leave it here with kudos! Good luck on your next project :wink:

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.