Please provide feeback for my survey project

Code Feedback
1

hi guys kindly provide constructive criticism with regards to my survey project, aswell as methods to improve on.
Also if you could kindly explain how can i made my survey responsive to various devices keeping my framework intact because im just not understanding it at all.
kindly find the link below:
https://codepen.io/MJ-786/pen/rNOjdNX?editors=0100

2

Hello there.

Well done, on completing the Survey Form Project. Some things I would like to see change:

  1. Add question numbers, so I know where I am, and do not easily lose place.
  2. Increase the font size, font-weight of the questions.
  3. Perhaps change the font colour, as the background has black in it as well…
  4. Ensure the first letter of each question is capatalised.
  5. Vertically align the checkboxes.

Keep it up :slightly_smiling_face:

3

hi any advise on how to align the text boxes ive tried the following .however it doesnt seem to be working
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;

4

To begin, I suggest you use the built-in analyse tool in CodePen to find some weird syntax in your CSS and HTML.

Once you have fixed all of those, start by placing your checkboxes in a container (div), and work from there.

5

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

  • When using codepen it only expects the code you’d put within the <body> </body> element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • codepen provides the boilerplate template for you. What you have is incorrect. What you have as a header element should actually be a head element. And a header element belongs inside the body element. That div outside the body belongs inside it also.
  • Run your HTML code through the W3C validator.
    • There are errors in your code to clean up.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • codepen’s HTML validator misses things which is why I recommend using W3C.
    • Run the analyze for CSS though. You have an undefined word.
  • Don’t use <br> to force line breaks or spaces. Use CSS
    • The tag is <br>, what you have (</br>) is not a valid tag.
  • Make your submit button a button
    • Something like this <div class="submit"><button id="submit" type="submit">Submit</button></div>
  • Change the cursor to a pointer when hovering over the submit button
6

hi @Roma thank you very very much for your feedback it was without a doubt an excellent source of feedback , may i ask you with regards to the comment about the boiler template that code pen provides what is that and what exactly that i have is incorrect? as for the rest of the comments i have corrected only im yet to find the alteranative method to shift my text a line down without having to use the
tag id appreciate any advice with regards to that.

7

By boilerplate template I mean that codepen has already linked the stylesheet (where you place your CSS code) to the HTML section. They provide all the head tags also. If you click on the Settings button, for HTML you’ll see a `Stuff for <head>’ box. Click on the button below it that says “Insert the most common…” and you’ll see the meta tag which you have in your code is put in for you.
Codepen just does all this behind the scenes for you. You can read codepen’s official documentation

As to what exactly you had wrong in HTML I explained in my post and you’ve corrected it.

1 Like
8

thank you once again :smiley: