Simple Survey project advice

Code Feedback
1


This is a new attempt at the simple survey project. I could really use some advice on my code please.

2

No need to repeat color: black that many times, it’s black by default so you’ll be fine not declaring it at all. If you want to ensure that text color is black just in case, declare it on a parent, e.g. body.

Similar thing with repeating margin-left: 40%, instead of doing that on each element individually, put it on a parent div that contains the survey form. I can see this is a recurring pattern (font-weight…) in your CSS, so try and fix that up.
Repeating yourself is a pretty bad habit, especially when you get into Javascript (if you’re planning to), when you notice it’s happening, think on how you can change the code to just a couple of lines while maintaining the same functionality.

Also, try to make your code prettier:

#survey-form {
  display: block;
  margin-left: 40%;
  font-weight: bold;
  font-size: 30px
}

looks better than

#survey-form{
  display:block;
  margin-left:40%;
  font-weight:bold;
  font-size:30px;
}

That’s CSS. For your HTML, try to be more consistent with your indenting.
Prettifying your code won’t make your site run better, but it’ll be nicer to look at by yourself and other people, especially when your CSS will be hundreds of lines long.

You asked for the opinions about your code, but I’ll try to give you an advice on your design as well.
How would you rate the look of your survey at the moment? The background is very low quality (it’s stretched, which decreases quality), alignments are very inconsistent, all text is unnecessarily large and the form elements are of varying width. All that put together makes it look pretty bad.
In testing/practice environment it doesn’t really matter that much, but I’d advise planning your design ahead and trying to make things look better than they are. This way you’ll not only learn more with each project but also become a better designer at the same time.

3

This is my first time reviewing project, so take my words with a grain of salt!

I forked your project and made some changes here.

Here’s a summary of my suggestions / what I changed:

  • Use a higher resolution picture for the background: I was able to reverse image search your background and I found a much higher res version of the same picture and swapped it out.

  • Content: I changed around some of the wording, grammar-wise

  • Linting: I made the indentation of your code more aligned, also you had some mismatched html tags ( I added an opening html tag and removed the text-area div that wasn’t closed)

  • I removed all of the html line breaks, since they aren’t necessary

  • You had two sections of radio buttons that looked like they were one section, so I separated them a bit

  • Design: I added a transparent background so that the text stands out more, and gave the section headers their own style.

Take a look at my CSS changes. I moved the font color style into the body tag, since all of your other elements should inherit that color. I used set pixel amounts for the margins, instead of percentages, because we don’t want the margins to get too weird on smaller screens. I made a class for the sub headers so they can all use the same styles.

Further suggestions that I didn’t implement:

4

Thanks so much, I do not fear failure because fear of failure is fear of real learning and of progress.
I will continue to move ahead and learn.:thinking:

5

Thank you, I looked at the changes you made (so cool) you are very obviously farther along than I am. Even though your changes are simple and elegant, it shows that I have much work to do and a great deal to learn. I very much appreciate the feedback.

6

That’s good to hear! Keep at it :slight_smile: