I have just finished with my Survey Form project 
As I am still confused with CSS and some aspects of HTML (especially the labels and inputs, specifically regarding the “for, id, and name”, my code is very messy imo and I had plenty of difficulty aligning items. However, since I am still getting the hang of these two languages, I am quite pleased with the result, all things considered.
I would highly appreciate it if you would give me feedback on what needs to be improved, and what mistakes I should not make for my next project. Thank you in advance!
Link:
You should be.
Actually I thought your code to be quite neat.
The editors in CodePen both have Tidy and Analyze functions that will format your code nicely and check for some errors. Both are well worth using. Your code was very neat already, there were a few warnings from the analyzer that may or may not need attention.
There were a few places that you appeared to be shimming with margin rather than letting the browser align / center for you. The main labels for checkbox and radio button questions both had a left-margin that seemed arbitrary even though there were other styles in place that centered those on the form.
#pet-label {
margin-left: 2em; /* maybe I'm missing the reason for this */
margin-top: 1em;
border: 0.1em solid grey;
border-radius: 1em;
}
Because you relied on floats for layout you need to be aware of the clearfix hack (Google that). At some screen sizes you have a case where the upper question starts to wrap into the lower question’s label. Floats were made to wrap text around elements and just got borrowed for layout use so beware of their “wrappy” tendencies. Floats for layout aren’t going away quite yet but flexbox and grid are much more predictable.
At smaller screen the radiobuttons had better spacing than the checkboxes. Not sure why that is.
Also be aware that when using <ul> to hold menu items there is some styling built into the browser that may need an override to remove. Otherwise these <ul> elements all end up with some mystery padding that pushes them to the right on your page. You can’t see it without using DevTools but your radiobutton / checkbox lists both have 40px of padding-left.
/* useragent styles from browser */
ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px; /*this one most problematic*/
}
You obviously figured out the user agent styling built into the input elements and did take steps to override those styles. You could have gone farther with the customization but good catch on that.
Now that you have a working form you might consider exploring some aesthetic styling beyond the base requirements. The example shown for the project is a minimally passing form that is technically correct. Articles that have examples of stellar web forms and browsing the samples of sites that sell form templates can sources of inspiration. Searching “Survey Form” on CodePen can yield some inspiring examples as well.
2 Likes
Thank you for your very informative and clear feedback. I apologize for the late reply, I am in S. Korea, so the time difference is quite significant.
Yeah, I need to familiarize myself more with CSS. I was getting confused alot, that’s probably why I added a margin-left on both the checkbox and radio button labels.
I will definitely look into the clearfiix hack. I’m also going to rely less on floats, and more on flexbox and grid.
I’m planning to redo all of the front-end projects after I get a bit more familiar with HTML and CSS (and maybe javascript) 
Your feedback has been very helpful. I am currently searching on Google the things that you have mentioned. Cheers!