Survey feedback request please

Code Feedback
1

Here is a copy of my pen: https://codepen.io/codelaura/pen/xxZVQQw

I think it is my best one to date. Is it responsive enough?
what do you think about my code? how about the colour scheme?

Coder2021

2 Likes
2

I like it! It’s definitely responsive and your code is nicely legible (That being said I’m fairly new to the coding side of things so I’m not sure how much weight my opinion on how code gets). The color scheme feels professional, nothing wrong with that. Something cool you could do is try to style the buttons and text fields so they aren’t using the default styles.

1 Like
3

hi @coder20201
nice job,

in my opinion, if you’re not using @media query, try to set the form width: 100%; and add another width property, for example max-width: 600px . this way you can have full width on smaller screen, and max width of 600px on large screen.

i can’t comments, if that’s your style to make the radio button not horizontally align.

1 Like
4

Nice but a complete responsive design should include media query in my opinion,

It’s not really looking great on my phone but nice for a start

You have to adjust the size and with by changing the Values using multiple Media Query.
Learn more about media query if you don’t know about it

1 Like
5

I really appreciate everyone’s feedback.

1 Like
6

I tried your suggestion and the survey now appears to be responsive. I plan to build on my understanding of media queries on future projects for sure…one step at time.

Thanks again.

7

Hi Fran,
I’m moving onto changing the default buttons next. Once I had completed the tests, I wanted to give up and move on but I’ve got a fresh lease of life now.

How are you finding coding?

1 Like
8

Great job @coder20201

9

Thank you for your encouragement @ ZeeCkel

1 Like
10

hi @coder20201

you can try using the codepen css analyze tool, to find error on your css codes.
i mentioned because you forgot to add semicolon ; at your max-width: 600px; on your #survey-form id selector.

1 Like
11

This is so useful! I was using the w3c validation service with loads of cutting and pasting involved.

Thanks a bunch!

12

Your form looks okay @coder20201. 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.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Placeholder text is meant to show the format the user should be entering info into the input errors. It should not repeat the label.
  • The textarea should have placeholder text. The user should not be required to delete text that is filled in.
  • Change the cursor to a pointer when hovering over the submit button
1 Like
13

I’m having a great time. I am really into the design aspect of things, so learning the code to create those designs is really cool. I just completed my first project today!

14

@Fran, I am enjoying the design side of things too. Its really fun to imagine and then create something.

1 Like
15

@Roma , thanks again!