Just finished my SurveyPage - Reviews welcome!

Hey there!

I’ve been NOT programming for 10 years + now, and since the whole COVID new world began, I’ve been out of my job, and really struggling to find a new one…
So I’ve decided to dust it off and get back at it. - I’m really glad I found this place to help me out, I’m planning on doing the whole code-camp, and started from the beginning with the basic HTML/CSS…

Would you please do a quick review of my page and please point out any major mistakes that I might be doing? All tests are passing, so I’m taking it as a success! :stuck_out_tongue:

But I’m also looking to get some opinions around “please don’t do that as it is bad practice” “Hey mate, you might have forgotten to this X, Y, Z… those are good practices”

Be as critical as you wish. This is my pen-> https://codepen.io/Yureta/pen/LYGbboB

Thank you very much for your time.
(plz don’t roast me)

The tests can’t test for everything and they certainly do not take the place of an actual human reviewing your work. My advice is to never be satisfied with just passing the tests :slight_smile:

I’ll point out a few major issues here to get you started:

  • When I narrow the browser window I get a horizontal scroll bar. For a page with a simple layout like this I should never get a horizontal scroll bar (except maybe at a very narrow width with a very big text size). To solve this, I would recommend you narrow your browser as far as it will go and style the page so it looks good at that width (with no horizontal scroll bar). This will be your base CSS. After you have completed this, then slowly widen your browser until you come to a point where you have enough horizontal room to make layout adjustments for a wider view port. This will be your CSS break point. Use min-width for the break point and ‘em’ for the value. Using ‘em’ makes the page responsive not only to changes in the view port width but also changes in the text size. You can ball park the ‘em’ value by dividing the pixel value by 16 (e.g. if you want to set your break point at 600px then you should instead set it to 37.5em).
  • Speaking of changes in text size, if you don’t know how to do this, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. As you increase the text size you’ll notice that the Submit button text starts to get cut-off and the legend text and borders on your fieldsets start to break out of the black box. A hint: If you need to set a width on an element that contains text then you should use ‘em’ instead of ‘px’ so the element can grow as the text size grows. You can set a max-width in ‘px’ though, but be careful not to make that too small.
  • You do have <label>s in your form but you are not quite using them correctly. Remember, the for attribute on the label points to the id attribute of its associated input. Also, you should not have a <label> in the <legend>. If you aren’t sure how to properly use labels refer to WebAIM’s Creating Accessible Forms documentation.
  • Do not use <br> to create line breaks/vertical space between elements. There are legitimate uses for <br> (e.g. formatting lines in a poem), but using it to put your inputs in a single column is not one of them. Use CSS to do this instead. If you need to add <div>s to help you do this that’s perfectly fine.

OK, I’ll stop there. Sorry, I hope I don’t sound too harsh above. I know you are starting over and learning new things and that takes time. I’m not trying to tear you down, I promise. I really just wanted to make the point that merely passing the tests isn’t enough.

A few suggestions to help you on your projects:

  • Use a ‘mobile first’ approach. Actually, this is a little bit of a misnomer, it doesn’t just apply to mobile devices. Really what it means is that you should start narrow and get wider. Always style your page for a narrow screen first (just narrow your desktop browser as far as it will go, you don’t need to use a phone). Then you can widen and use break points (‘em’ units) for wider view ports. Let the content tell you where those break points should occur. If you follow this method your page is pretty much guaranteed to look good on any device.
  • Add a few accessibility checker extensions to your browser and run them on your page. They will not catch everything but they will catch the obvious stuff that should be fixed. I use ‘Axe’ and ‘WAVE’.
  • Always manually increase the text size on your page to make sure it responds gracefully to text size increases. Firefox has this capability built in. There are extensions for Chrome (and I’m assuming other browsers) that will allow you do to this as well. Responsiveness is not just about changes in the view port width. It is also about changes to the text size.

Your form looks okay @yureta. 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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • Mentioning too because you have a head element within the body element and that’s incorrect. Maybe you meant to use the header element.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should address.
  • As mentioned, don’t use <br> to force line breaks or create spacing. That’s what CSS is for.
  • User’s should be able to select by clicking the label, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
  • As previously mentioned, the page needs to be responsive