Survey Form: FCC Project - CSS Feedback Needed!

Hey I just finished working with CSS on the Survey Form Project, would like feedback please.

Hi @wellmanjesse, your page looks okay but there are some things you’ll want to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 10/17 user stories.
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • in the HTML section there are some things you need to clean up. You can ignore the message about the cols and rows attributes being required. That is not longer true. The rest should be cleaned up though.
  • I normally don’t critique someone’s design but with the colors and shadows you chose things are hard to read.
    • The font is very small on a desktop. Plus if the user enters a comment it scrolls and there’s not a way for the user to review their comment.
  • Let users click on the label, not just the radio button. (You did it for the checkboxes)
  • Don’t preselect answers for the user
  • change the cursor to a pointer when hovering over the Submit button
  • what is the purpose of the Status bar that you’ve set to 100%?

@Roma Hey thank you for the feedback. I swear I get it to pass with only html before I added css, then for whatever reason I end up having to double checking those id’s are there only to still not pass. I don’t know what I’m doing wrong.

Edit: I got rid of some of the CSS and cleaned up the HTML. It passes now…and now I’m going to restyle it making sure it’s not such a mess.

@wellmanjesse, to double check I commented out all of your CSS and still get the same 10/17 passing.
When the tests fail, you can click on the red failing button and it will give you an explanation of which test failed, and why. Have you tried that?

One thing that may help, try moving this line;
<form id="survey-form">
before the this line;
<div class="container">

@Roma It passes 17/17 now.

@wellmanjesse, I see that. Good job.
I edited my last text to tell you to;
One thing that may help, try moving this line;
<form id="survey-form">
before the this line;
<div class="container">

still do that. and then go ahead and do your styling and color.

@Roma Will do! Thank you for the feedback. I really want to make these projects shine for the portfolio project. This is my 2nd time going thru this section of FCC.

Originally started it back in March 2019, but trash those projects as well. Never realized how annoying css could be. lol

:smiley: I know what you mean. Practice, practice, practice…it’s the way we get better. It’s good to sometimes step back, start over and see what new you can do.
It all becomes a little easier with time. Especially when you get that “ah-ha” moment.

Happy coding!

1 Like

Yea, about a year ago I knew I needed to find a skill. Not really into auto or machine shop, I figured why not look into programming because I love the internet and always kinda like seeing different ways web pages were presented. 1st started with sololearn app, which was really good because I could go through the lessons quickly giving me a glimpse of the big picture. Learned a little bit of Python because I wasn’t sure where to start and heard it was beginner friendly-ish. Then after thinking about what exactly I wanted to do, I decided that perhaps I should change my focus to front end dev and build from there. Shortly started FCC along with youtube tutorials (Traversy Media, Josh Fluke, along with others) …Did part of a treehouse track for front end also for about 2 months, then recently I bought Colt Steele “the web developer bootcamp” for like $10 back in August this year. There’s a lot, but I really am focusing on getting very comfortable with HTML/CSS before I dive too deep into JavaScript.

Been in sales the past 5 years, but really find web dev very interesting and it really helps give me meaning to life because I am not limited. It’s a blank canvas and I can create whatever I wish, the catch is figuring out a way to break free from the ignorance of ignorance factor. lol. Happy Coding!

1 Like