New Survey Page

Code Feedback
1

Yes, I copied the layout of FCC because I didn’t want to waste more time thinking of new content(design) but rather focus purely on coding. I am actually really happy on how far I have come the last few months.
Here is my first go at the Survey Page project: https://codepen.io/huereca17/pen/mzNGwL

  • Have a laugh if you want lol

Here is me coming back a couple months later: https://silashuereca.github.io/SurveyPage/

  • yes, there are a few modifications with style
  • yes, I didn’t look at the example code at all
    • You learn so much more reading/searching and reading/searching some more haha

Question: Can I use this as a portfolio piece even though I copied the design but not the code?

Also, what are your thoughts on this?
See any errors?
New ideas?

I would appreciate some feedback to better my programming skills.

Thanks!
Silas

2

As long as you don’t actually copy/paste the source of the sample templates, FCC is perfectly fine with you copying them. As for putting it in your portfolio, perhaps you might want to change the survey material to something else first; it doesn’t have to be a real survey, so perhaps think of something funny or otherwise unusual you’ve always wanted to ask people.

Feedback on your page:

  1. You should include the test suite on your page to ensure you pass all the acceptance tests. Just stick this anywhere in your HTML: <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

  2. The ‘Age’ field needs to be of type="number" in order to pass the tests. You have to have at least one number field anyway, so it makes sense for age. Currently you have it as a text field.

  3. The labels get rather “squished” if you resize the browser to very narrow widths. Contrast this to how FCC’s template form changes the layout, putting the labels above the fields. This can be done with a media query that changes the width of the relevant divs to 100% at smaller widths.

  4. The textarea for comments is extremely small. Try setting it to 100% of its container width – try searching for “responsive textarea width”, since textareas can be a little fiddly.

  5. The form shouldn’t try to submit anywhere, and currently returns a 404 if you hit the submit button. Try changing your <form> tag to add onsubmit="return false;"

1 Like
3

Good work but all fields are affected on a mobile view… Work on responsiveness.

1 Like
4

Notes: the submit button is a mailto:// link
you have to push every checkbox to submit

1 Like
5

It’s responsive down to my IphoneX. What type of phone do you have? I will need to lower the min width of device. Thanks for the feed back.

6

I’ve already passed the tests a while ago so I am not necessarily looking to do that but thank you anyway.

Also, what widths are you going to? I have the min width set to 378px (it works fine on my IphoneX). I will need to lower that so it fits all mobile devices (I didn’t think of that for some reason).

I’ll look into the other issues and get those fixed. I appreciate the feedback!

Thanks,
Silas