feedback will be appreciated https://codepen.io/codree/pen/JqZNXo
You should probably make a grid. The left column’s items can start at the end. The height of the rows can be set to auto.
Hey there!
First and foremost, congratulations on completing your survey form.
I’m going to give you a pretty comprehensive review, so don’t panic if it feels like I’m pointing out a lot of things. It’s already awesome, I just wanna help you make it even more awesome. I’m going to include screenshots from your form to give you feedback on specific areas.
Just capitalise the “L” at the beginning of the word “let” and maybe add a colon “:” at the end of the line.
You should try to prioritise aligning this items. Much like @TazExprez mentioned, you might want to use a CSS Grid.
There are two things with this section. The radio button should be on the same side of each option. English speakers read from left to right so it is optimal to place the radio button on the left of the option, making it obvious that it is a response. The options should also be laid out differently. Either the uppermost answer should be vertically inline with the question or they should all be placed below it.
I think my last point about the layout of the radio buttons applies here too.
Again, maybe you should realign the text box here and expand it in size. Comments and/or suggestions will usually take up a little space.
You’ve done a great job and you’ve made something that you should be proud of. Polish these things off and you have a survey form that anyone would be proud of!
1 Like
Thank you for the constructive criticism, however i understand these problems but i m struggling to fix them. can you help?
Turn the “survey-form” into a grid:
#survey-form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(10, auto);
}
grid-template-areas:
"description description"
"name-label name"
"email-label email"
...
"comments-label comments-textarea"
"submit submit";
#description {
grid-area: description;
justify-self: center;
}
.Name-label {
grid-area: name-label;
justify-self: end;
}
.name {
grid-area: name-input;
}
.email-label {
grid-area: email-label;
justify-self: end;
}
.email {
grid-area: email-input;
}
...
.comments {
grid-area: comments-label;
justify-self: end;
direction: rtl;
}
.comment {
grid-area: comments-textarea;
}
.submit {
grid-area: submit-button;
justify-self: center;
}
Rename your divs to what they actually hold to make it less confusing. Btw, you can have classes and ids with the exact same names.
I skipped the items in the middle of the survey form. The grid-area property can be named whatever you want. When an element is in the middle of the grid, and the grid is two columns wide, you use two spaces, so the grid-area is used twice. I used direction: rtl; in the .comments selector {} because the question mark would appear in the front of the question if I did not use it.
I hope this helps.
Hi,
I noticed something unusual in your code on the first few lines. The first p tag along with its content is all in one color (red) when all tags, attributes, values and contents should all have distinct colors. It took me a while to figure out while, so here are the errors:
The div with ID form-outer is missing the “>” in the opening tag.
The form has similar issue. But the “>” symbol is inside the href quotes when it should be outside of it.
I haven’t gone though the rest of the code as thoroughly but seems fine. These could be the root of all your problems.
I am quite new to FCC as well and have completed 4 projects so far, so I’m no expert but from my experience and from what I just learned now from this, the one tip I can give is look at the color in the code. If the lines are all the same color, there is something wrong and that could cause issues. Double check your code, and make sure all symbols, closing tags are not missing.
I would suggest you indent your lines to make it easier on yourself. Saves lots of time and pain to look for the errors. Sometimes it is that missing symbol or little thing that drives me crazy when looking for mistakes. Especially when it is right in front of me.
Apart from that, the form is not too bad. Keep it up.
1 Like
Just noticed that you may have too many divs. I would put each label and each input in its own div, but I would not put them together inside of an additional div. This will help with the mobile view. This way you can have a grid for the larger tablet and desktop views, but not for mobile. For mobile you can just have a bunch of divs, one on top of the other, just like in the example in the project page. You also need a @media query. This way the grid will only be used in one screen size range, and the other layout will be used in another screen size range. You can choose the default and the one that will be affected by the @media query.
Hi @codree90, your form is looking good but as others have pointed out there are things you can do to improve it.
Let me give you a tip that I think will help you. codepen provides validators for HTML, CSS and JS. Click on the arrow in the upper right of each section and then click on the respective ‘Analyze’ link. In HTML you have some typo’s that will affect how things are working. In CSS, you have some duplicate declarations and some invalid properties. These will effect how your page is being styled.
When you forked the pen there was a script that had the user stories needed to meet the FCC requirements. Here it is again;
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
You’ll see your form is meeting 8/17 user stories.
1 Like