Feedback/critique of my survey form project

Code Feedback
1

hello everybody. i have just finished my survey form project. i would love to receive some review and suggestions for improvement. constructive criticism would be really appreciated. here’s the codepen link https://codepen.io/strugglerz/pen/qBPWpmL. thanks

secondly, i could not understand this code in the project:

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

can someone explain…?

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • It’s a nit but placeholder text should not mirror the label. Rather it should show the format the user is expected to enter.
  • Change the cursor to a pointer when hovering over the submit button

As a suggestion (you don’t have to implement if you don’t want to) make the button look like a button rather than a bar

Side note, do not try and replicate the sample projects. They show one way the project can be completed. The instructions say yours should be “functionally similar” and to “give it your own personal style”

4

@Roma thank you so much for the valuable suggestions. I will keep them in mind in my upcoming projects. It would be nice if somebody could explain to me the code block.

5

@struggler, glad I could help.

If by “code block” you mean the media queries what is it you do not understand.

In the RWD lessons there was a media query lesson. Yes it was brief as it just touched on what media queries are and why / how they are used.
FreeCodeCamp uses the Read-Search-Ask method for teaching. There will be lessons introduced for you to Read and get familiar with a concept but not everything can be covered. In which case campers are encouraged to Search to learn more about the concept. After searching campers can / should Ask for further clarification for what they do not understand from their search results.

6

@Roma i understand it now. thanks for the help.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.