Survey Page Feedback/Assistance-Genetic Engineering

Code Feedback
1

Here is my finished survey page . I’ve fulfilled all the necessary requirements, but I’m still not satisfied with the end result. I’m having trouble figuring out how to align my radio buttons/checkboxes vertically. Also, I like the background colors for my boxes, but I would like to prefer have them be transparent similar to the way it is on the example survey page. Any assistance would be greatly appreciated. Thank you.

https://codepen.io/Dvenmar/pen/abZzaQK

2

You’ll need to provide us a link to your pen @dvenmar .

3

My mistake.

https://codepen.io/Dvenmar/pen/abZzaQK

4

I think the page still needs some work on the styling

5

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

  • 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.
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • It’s very hard to read the questions and then sort out the radio buttons and checkboxes. Revisit this lesson and know that what you can do with the radio buttons you can do the same with checkboxes.
1 Like
6

Hi there,
Nice work on your survey form.

For the transparency effect, I suggest you read this, and use “transparency using rgba,” which is about half way down the page.

For making checkboxes/radio buttons display vertically, give each radio/checkbox label a class, and set the display to block or flex.

I hope this helps.

1 Like
7

Thank you Roma and cherylm for your help. I very much appreciate it. I finished the page and submitted it a few months ago. Here it is.

https://codepen.io/Dvenmar/pen/abZzaQK

Unfortunately, I ran into another problem. On desktop, my page looks the way I intended it to look. On a mobile device however, it doesn’t look so good. Any tips on making my page more mobile-friendly?

8

@dvenmar, I’m still seeing quite a few HTML syntax/coding errors.

  • Run your HTML code through the W3C validator. The link is in my previous post.
  • Also, as stated previously do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
    You hard code a lot of pixel values in CSS. To make responsiveness easier use relative units like em, rem, percentage.
1 Like