Survey project new iphone 12

Here is my survey project https://codepen.io/matthew-pourroy/pen/NWRXxpJ?editors=1100 what do you guys think I can do better?

Hi @pourroy.matt!

I think it looks good.

The main thing I would work on is responsiveness especially for smaller devices.

One of the reasons has to deal with the margins you set.
For example the title
margin:10px 550px;

This is why your title disappears on smaller devices because you have 550px on both the left and right hand side. That would work for larger devices but not smaller ones.

You don’t need to include this in codepen


<!DOCTYPE html>
<html lang="en">

Also, do not use br tags to create space between elements. Use css instead.

Your form looks good @pourroy.matt. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (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.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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.
    • The one for CSS is good. Use it and address the issue(s). There’s a typo you should correct.
    • (The one for HTML misses things which is why I recommend W3C)
  • Change the cursor to a pointer when hovering over the submit button
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
    • Do not use fixed dimensions on elements, use max-width/height and relative units like % and vw to keep everything responsive.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

You have 10 id selectors with the exact same styles. Use a class and apply that class to the elements instead of repeating the same styles.

.form-elements {
  width:200px;
  border-width:2px;
  margin:10px 10px 10px 10px;
}

Consider how annoying it would be to have to change for example the margin if you later decided to increase or decrease it. You would have to do it on all 10 selectors instead of just one class selector.

Also, don’t use fixed with elements, use max-width instead so the elements can still shrink. It also works great with auto margin for centering elements.

I made those corrections, thank you! https://codepen.io/matthew-pourroy/pen/NWRXxpJ

Perfect fixed it https://codepen.io/matthew-pourroy/pen/NWRXxpJ

Corrected it, thank you https://codepen.io/matthew-pourroy/pen/NWRXxpJ