Hey! I’ve been working on this project for the past couple of days, I kept the theme from the example survey since I’m as creative as a cucumber. Any feedback would be appreciated. Thanks!
1 Like
Good work, but let me ask you for small changes to make it superb!
Let talk about good parts first
Layout is functional and responsive, really good, but this could be better for mobile I’ll tell how.
Placeholder for textfield and textarea, very good.
Good sharp submit button, dude I like it so much.
And now some issues
Well the first one is about radio and checkbox buttons, they don’t have any label tag associated, please fix.
first combobox comes without any non selectable option by default (e.g. “please select”), but about the second combobox, you did it well.
One thing I don’t like about the design is the bad contrast between gray and crimson colour, gray is not very visible with very saturated colours like crimson, magenta, etc… please check:
Not all screens(including mine) render it clear. check gray placeholder colour which is not very clear with crimson bgcolor.
I also suggest for mobile you may let combobox goes and fit the container width just like textfields do.
Same I think bringing more size for combobox is good, same for text fields.
Like to see some update and progress with those issues fixed soon.
You may also check my survey form challenge walkthrough article which I stated these notes there too with samples and explanations(feedback is appreciated also)
keep going on great work, happy programming
1 Like
Hi @IkerSS 
,
HTML
- error
Stray end tag “input”
MDN documentation:
<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN
Permitted content:
None, it is an empty element.
Tag omission:
Must have a start tag and must not have an end tag.
Example:
<input type="text" name="ip-disabled"
id="disabled-ip"
value="I am disabled"
disabled />
- Line 43, 45,47:
<input type="radio" name="recommend" value="definitely">Definitely</input>
...
<input type="radio" name="recommend" value="maybe">Maybe</input>
...
<input type="radio" name="recommend" value="notsure">Not Sure</input>
- From line 68 to line 88:
```html
<input type="checkbox" name="improve" value="front">Front-end projects</input>
<br>
<input type="checkbox" name="improve" value="back">Back-end projects</input>
<br>
<input type="checkbox" name="improve" value="data">Data Visualization</input>
<br>
<input type="checkbox" name="improve" value="chall">Challenges</input>
<br>
<input type="checkbox" name="improve" value="open">Open Source Community</input>
<br>
<input type="checkbox" name="improve" value="gitter">Gitter help rooms</input>
<br>
<input type="checkbox" name="improve" value="video">Videos</input>
<br>
<input type="checkbox" name="improve" value="meet">City Meetups</input>
<br>
<input type="checkbox" name="improve" value="wiki">Wiki</input>
<br>
<input type="checkbox" name="improve" value="forum">Forum</input>
<br>
<input type="checkbox" name="improve" value="addcor">Additional Courses</input>
- error
The “for” attribute of the “label” element must refer to a non-hidden form control.
MDN documentation:
<label>: The Label element - HTML: HyperText Markup Language | MDN
Attributes: for
The id of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.
From line 40 to line 41:
<div id="recommendation" class="subsection">
<label for="recommend">How likely is that you would recommend freeCodeCamp to a friend?</label>
<br>
<input type="radio" name="recommend" value="definitely">Definitely</input>
Screenshots
- 360x640
- 800x600
- 1204x768
- 1920x1080
Cheers and happy coding
Note:
Tools used:
validation:
The W3C Markup Validation Service
screenshots and testing:
GitHub - puppeteer/puppeteer: Node.js API for Chrome
A blog post I wrote:
How to take screenshots with Puppeteer
1 Like
Thanks for all the feedback! I’ve done some changes based on your suggestions.
Good progress mah dude, very good.
Keep going on great work dude, happy programming