How are you doing guys?

Code Feedback
1

Tell us what’s happening:
I just finished the survey form project, can ya’ll give me a feedback?

link: https://codepen.io/Mohamedb3850/full/pojJWma

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

2

Hi, so I see the structure is there. However, I would change your color scheme. The yellow and blue aren’t very appealing together and they are both really bright.

More importantly though you should try to make the page responsive. So when you make the screen smaller the email boxes don’t push out of its container.

3

please, for feedback ask in #project-feedback, I have moved your topic there

4

When I narrow my browser the text inputs at the top break out of the green box and the content in the green box gets very narrow. My recommendation would be to start your styling with a narrow browser (don’t use a media breakpoint, make all of the styling default for the narrow browser). Then after it looks good slowly increase the width and find a point where you want to style it differently for wider widths and create a media breakpoint there, adding styles specifically for the wider view.

In other words, start small (narrow) and then use media query breakpoints for the bigger widths.

5

Thank you ieahleen…

6

Here are some changes to your code that I made to help your responsiveness. Hopefully it helps with other items on your page. I left some comments to help.


form{
 /*give it some opacity: 0.5 */
 background-color: rgba(32, 178, 170, 0.5);
 /* keeps 60% of the width of the devices screen */
 width: 60vw;
 border-radius: 15px;
  /* to keep the form in center of screen use margin*/
 margin: 0 auto;
 padding: 20px 10px;
}

input{
  display: block;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-left: 20px;
/* keeps boxes to 50% of container so they shrink as container shrinks */
  width: 50%;
}
7

Its nice, and the button’s CSS can be improve to be better.

8

Your form looks okay @Mohamed5. Some things you need to revisit;

  • When using codepen it only expects the code you’d put within the <body> </body> tags 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.
  • Run your HTML code through the W3C validator.
    • When you only have the code that’s between the body element and you copy/paste from codepen you can ignore the first warning and first two errors.
    • There are other errors you need to clean up.
  • Review the lessons on adding radio buttons and checkboxes.
    • Users should be able to click a radio button or its associated label and that’s what gets selected. In your code click on the label (word) Maybe and see what gets selected.
    • There is the same type of error with your checkboxes.
  • Make your submit button look like a button instead of a bar.
  • Make the cursor change to a pointer when hovering over the submit button.
  • And as already stated, make your form responsive.