Hellow campers,
I have just started my survey project and this is where i am stuck and i have no idea on how to go throug. I would need your suggestion please.
What helped me allot was looking at other peoples work to get ideas and inspiration. You have everything you need, you just have to think about your layout and how you want to space things.
2 Likes
Exactly what @gabeskates has said. What sort of a layout are you looking to build? Your HTML is very very close to complete, only a few small suggestions:
-
Wrap your radio buttons in some sort of element, whether a
divor (preferred) afieldset. Doing so, they’ll be treated as a single unit, allowing easy positioning of them as a block. -
Some of your labels are separate from the inputs, with a
for=attribute defined on them, while others wrap. And you’re wrapping the right ones: checkboxes and radio buttons work well with wrapped labels. But do it on the rest (you’re missing about half the checkboxes).
Once you’ve got that done, you can start smacking around the CSS. That’s really the time you get to PLAY!
I took your code and forked it, and then made three simple CSS changes: I added a grid layout to the form, a width to all textual inputs, and a width to the submit button. Rather than show you the code, necessarily, I’ll show you a snapshot, maybe get you thinking:
1 Like
i like it. I have delated all the css codes and i will go back to it after finishing with the small html parts remained. Thank you alot
NOOOO!!! Lol
You didn’t need to delete your current CSS, that was a pretty solid starting point. If you are interested in moving it toward what I’d built, I’ll gladly help walk you through the steps between what you have and what I built.
They’re VERY tiny steps, and maybe five of them. 
the css codes are still there i hope it kinda improves
So what do you want for basic layout? Two-column, similar to what I’d showed?
yes thats what i want
One thing, remove the div wrapping the form. It serves no useful purpose whatsoever. put the id=survey-form on the form itself, it will render EXACTLY the same, but without the pointless nesting.
Okay, so have you encountered CSS grids yet? I used a simple two-column grid to define that. To do so, I added a couple lines to your #survey-form CSS:
display: grid;
grid-template-columns: /* Here you define what you want the column widths to be */
To keep it flexy and responsive, I used fr, which are "some portion of the available space. So if I’d made two columns like this:
grid-template-columns: 1fr 1fr;
Then I’d have two equal columns. But that’s not what we want here, instead we want the left to be maybe a third of the available space, and the right to be two-thirds. A rule to do something like that might look like:
grid-template-columns: 1fr 2fr;
That says “take the available space and divide it into three equal parts (1fr+2fr), then assign one to the first column, and two to the second.”
Start with that, see where you get.
Hi @Abdi1
It looks like you might benefit from the FreeCodeCamp Test Suite. This is a program that shows you the requirements and which ones have passed or not. Here’s how to add it:
- Click on “Settings”
- Choose “Javascript”
- Find “Add External Scripts/Pens”. Find the first open slot and paste in
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.
- Click Close
- You can now click the FCC Test Suite button
- Choose “Survey Form” in the drop-down
- Click “Run Tests”
- Click on
to see a detailed view of which tests worked - You’ll see a checklist like this:
Hope this helps!
am there now it has some changes
right thank you i can see i have passed 13/17
I think your email and name element needs to be required.
I think they’re also looking for a number input, not tel.
More info in the Survey Form test details window.
make that css rule grid-template-columns, rather than `grid-template-column". You’ll see a big change.
yes i have corrected them well there
type='tel' is perfectly okay, per the MDN. It’s a type defined for telephone numbers. Neat bit is, you can actually include a regex pattern. I may start using this one more.
awesome i had the same problem of writing column instead of columns in the challenges
1 Like
Crud-monkeys, you’re right. sigh.
Notice how your select element is being pushed into the left column? It has no element before it, whether a label or a p, to tell what its purpose is.