I finished my Cobra Kai sign-up form, AKA the survey form. Feedback?

Hi all,

Here’s my survey form - I’ve messed about with flexbox a little, and also read a few templates for guidance. Please let me know (gently, I’m feeling fragile) your thoughts! https://codepen.io/zara-knox/pen/OJNWVZN

It’s written from the POV of Johnny Lawrence from Karate Kid/Cobra Kai, so apologies for any offensive language. That’s how I keep myself amused while I code.

Thank you!

Hi @ZaraK,

Fun topic :smiley: Although Mr. Miyagi would be disappointed…

I am a bit picky, so these are just small things :wink:

  1. The site has a horizontal scroll. I believe it’s because of the header’s padding.
  2. I think it would be nice if you changed the font in textarea to match other inputs.
  3. You can also change the dropdown’s styling to match other inputs.
  4. Maybe by adding some padding between questions you could group them a little and make more readable? I’m talking specifically about the radio/checkbox questions.

Cheers!

1 Like

Thanks for the amazing feedback! I’ve applied it all now (I think!).

It’s amazing I didn’t have a clue how to do anything when I started, but I could swoop in and make those changes pretty quickly. Is this… progress? All the waxing on and off must be doing its job.

Thank you!

Hi @ZaraK,

I love the whole Karate Kid/ Cobra Kai theme! Very creative and fun. Now I feel like watching the movie.

Anyway just a little bit of feedback for you. The form looks great on bigger screens but as you shrink down the window everything starts to disappear. It would be great to see this be a little more responsive. It’s a great design and would look awesome on mobile.

Just my 2 cents. Anyway, great job!

1 Like

Slowly and steadily getting there :wink:
@mikethecodegeek has a good point as well.

One more quick fix. In the textfield, the text is hardcoded. I believe it’s much better to put it in as a placeholder - https://www.w3schools.com/tags/att_textarea_placeholder.asp

1 Like

Hi Mike!

Thank you for the feedback!

I tried to look at its responsiveness by going to Debug Mode > Inspect element, then reducing the screen-size. As far as I could see, everything was fitting on the page when I was selecting iPhone view, tablet view, etc. I think I must be getting this wrong somehow - is there a better way of checking?

Would you have any tips for making it more responsive? Perhaps media queries would need to be involved somehow?

Thank you! Also, do check out Cobra Kai if you haven’t already - it’s coming to Netflix next week!

You’re right! Thank you! Done :slight_smile:

Yes, responsiveness is my weakness as I just don’t know where to start for best practise (of course, I hear that one should design for mobile first, but I’m overall not very good at knowing where to begin with it).

@ZaraK

The easiest way to check for responsiveness is to simply expand and collapse the window. Here’s what I mean.

ck-full ck-med ck-mob-with-dim

Also, if you open the inspector you can see the dimensions of the screen as your changing sizes (see last photo).

Here’s a great place to get started with some responsive design principles.

Edit: I noticed the link looks very generic. It does go directly to some responsive design lessons.

PS: I’ll definitely keep an eye out. Looks like a good show!

1 Like

Your form looks good @ZaraK. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • The test script, being JavaScript, would not go into the head element. It won’t work if it’s there. It belongs right before the closing body tag. Now, codepen is forgiving so it can be at the top or the bottom of the HTML section.

  • Somehow there’s a duplicate of the test script in your code. It should be;
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

  • When you’ve moved the fonts to the proper place in codepen, run your HTML code through the W3C validator.

  • Since copy/paste from codepen you can ignore the first warning and first two errors.

  • There is an HTML coding error you should be aware of and address.

  • Just a side note. The placeholders in the input fields shouldn’t mirror the label. Instead, they should show the format of what the user is to enter.

Thanks Roma. I have gone through all your feedback. When you say there is an error in the HTML coding, could you point me in the right direction?

Thanks.

Hmm… Cobra Kai. This one is nice, really. I love it, But since you ask for feedback, then I guess I’ll give you one.

This is based on my opinion.

  • The Header part shouldn’t have border radius
  • Ask question part, would be nice if the text is justified.
  • Code is nice, your CSS good. Consider use bootstrap.
  • Responsiveness in mobile for the form part
  • The rest isn’t important, you’ll better as the time goes on.

I really love the color actually, it match all the vibes, contrast, etc.
I wonder you have a few background on coding stuffs I guess.

1 Like

Running your HTML code through the W3C validator (linked in my post) returns the following for line 25 in your code;
Error : The value of the for attribute of the label element must be the ID of a non-hidden form control.

You don’t need a label element there. It could be wrapped in a p element. But if you want to keep the label element, since the user story requires the dropdown to have id="dropdown" then the label elements for attribute must be the same.

Hope that helps.

1 Like

Thank you, Roma. Changed the label to ‘dropdown’.

Thank you - I’ve gone through the responsiveness section a couple of times now, as it really is the point I find myself floundering on. Even though it outlines the principles of viewport/media queries, I have trouble applying it to my code. Many tutorials I find online seem to give examples of media queries in terms of changing background colours, but I do not know the best way to apply media queries to my page AT all. It’s like something isn’t clicking at all for me there. I agree, it has the potential to look nice on mobile - just no idea how to start despite reading through some tutorials!

Hi nitrostrike,

Thank you for your kind feedback. I’ve made the header and textarea changes now. Not used any bootstrap, as I haven’t encountered any in the freecodecamp course yet - still too new! Looking forward to learning it.

No background in coding whatsoever, and just a beginner! I’m very flattered, and glad you love the colour.

Responsiveness for mobile is something I do NOT know how to do. I completed the responsiveness section in the CSS course, but really not sure how to apply it to my code.

@ZaraK, if I may offer a suggestion.
The survey form shouldn’t really require the use of media queries if set up properly. That is, widths as a percentage, etc.
Now with yours, it’s the way you have it set up that causes it to not scale to a smaller screen. But if you think about the flow of your form it may not be the best UX design. You’re having the user fill out personal info and at the same time giving them a quite large area to ask a question. Wouldn’t that area be better situated at the bottom of the form? After you’ve asked them the questions, you give them an area to ask any additional questions. If there are none, they leave it blank, hit submit and Bob’s your uncle.

1 Like

Roma, I absolutely agree. I don’t know why I was so attached to having the question textarea on the side other than I saw a template that used it. While that might work well with brief forms, it doesn’t translate well to a longer form like this one. I’ve changed it now. I hope it’s looking a bit better.

Would you say it’s responsive now? Or marginally so?

As always, I appreciate your feedback on all of this. Thank you.

I think I’m still looking at the page from when you first posted. If you’re not modifying that pen then please give the link to the latest pen you’re working on and I’ll give it a look.

Ah, I see. Here it is: https://codepen.io/zara-knox/pen/oNxZEqP

I’m sure you see something like @media on CSS lesson, that’s when you do responsive things.

Let’s say on desktop, the background color for body is white, and you want to change it to black on mobile, then just add on CSS :

@media only screen and (max-width: 500px) {
  body {
    background-color: black;
  }
}

So that’s it! When the screen width is lower or equal than 500px, it’ll make body change color to black.

“So how do I make the text are responsive”?
Same like media above, but instead put the container where the text belong to and change it accordingly.

My tips, try to become best friend with browser developer tools, you know the one that you can inspect element. On firefox there’s a thing called Responsive Design Mode which allow you to simulate different kind of mobile screen.

Anyway, you’ll find the responsive things are easier on Bootstrap, take your time :wink:

2 Likes