Survey Form Project Review/Suggestions

Tell us what’s happening:
Describe your issue in detail here.
I’d like some honest feedbacks regarding my Survey Form… Either with the code or the design. Thank you.
Your code so far

https://codepen.io/teamie/full/dyNxdOa

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36 Edg/90.0.818.51.

Challenge: Build a Survey Form

Link to the challenge:

everything is on point you just need to change the font size and make it a bit large and you are good to go. :green_heart:

thank you @vedantjangid will work on that right away

Your project passes all tests, that is good so great job on that front! Starting out with your code, something very minor as it is functional as is, but more a general rule of thumb when creating code pens…You are including the freecodecamp tests as well as google fonts within the html portion of your code. These are better suited to be added within the settings of your specific Codepen.

I notice that you use a significant amount of semantic html by adding in labels and placeholders for your form. You’ve also added in a number of <div> tags throughout your html. You should look into the natural effect that these container elements have by default on the page. Look into the display property of block, which is by default how a lot of elements appear on a page. Many times you can skip the <br> tags by using this property to your advantage.

You experimented with opacity on some of the elements which I think makes it appear more modern. With that said, there is room for improvement within the design. One major design flaw is that there are not any viewport breakpoints, so when the browser width shifts to become a narrower size (often the case with mobile devices and tablets), it does not adapt. Look into CSS Breakpoints to make this change. There are some things you could do that you may not be aware of that I believe you might enjoy from learning. For example changing the margin of body to 0.

body {
margin: 0;
}

Applying this change will eliminate the white area around the background photo. With that said you might even enjoy this suggestion even more. You could apply your background photo with the attachment property set to fixed. What this does is causes your background image to “float” in the same position no matter where the viewer scrolls. Check this out.

#main {
background-attachment: fixed;
}

The textarea for comments or suggestions is resizable beyond the width of the screen. You can achieve this result by using the max-width property on this element. You might do well with some min-width and min-height properties set as well.

textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 250px;

You are onto a great start, keep it up! By the way, my cats name is Mufasa! Good luck with the proposed changes. Happy coding.

1 Like

Thank you so much @mnichols08 will put the corrections to work… My dog’s name is Scar haha, say hi to Mufasa for me.

Your form looks good @teamie. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive

Thanks alot @Roma I checked out the W3C validator and was able to identify some errors I made… Will make all required changes. It’s my first time coding and I kinda got too comfortable using <br> to break lines I think I can use the display property in CSS for that… Thanks for your suggestions, really goes a long way.

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