My Survey Page Project

Hi all, Here is my Survey Page Project.
I took the approach of building from the smaIlest phone up to desktops (3 screen size triggers).
All notes well documented in my code as to my approach.
1 index.html file and 3 supporting .css files (one style sheet for each trigger)

Ideally, you should view from the smallest phone up to a desktop to get the best understanding of what I did. I know I should have kept it a bit simple, but figured since I was going to try to build from a small phone up, that if I visually changed the layout slightly on each trigger, the idea would come across better.
Not sure if the code is too long for the approach or not, but it seemed to work in the end.
When it came to linking in the desktop, it was a bit challenging, so not sure if this was the best approach. Perhaps I needed diff html files for each phone size?

Anyway, let me know what you think. Input always welcome.
Ok, here is the link: (let me know if this link is not working)
https://codepen.io/LetsWorkThis/project/editor/Zybqvy

Hi again,
OK, since I’ve received ‘0’ replies on this project, I must have gone wrong somewhere.
Please advise. Did I completely miss the target on this project or not?
Thanks, in advance,

Hi @ReallyWant2Learn, maybe it’s just me but this is an over complification of what could have been a simple form.

  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • You have multiple uses of id's. An id must be unique in a document.
    • No one boxes comments like that any more. It makes your code difficult to read plus, you can see it throws errors.
  • Make is so users can also click on the labels to select a radio button and checkbox.
  • Do not use the <br> element to force spacing or line breaks. There are ways to group like subjects and then use CSS to make it look the way you want.

If you want to keep your form this busy you could have used grid layout. Then using one CSS page just not display those elements you don’t want seen on a smaller screen.
I hope this doesn’t sound critical. Just giving you feedback. Have you ever filled out a form that was this busy? More than likely not. You started at a page that had a lot but when going to the form itself it was simple with only questions, place for name and email and possibly a text area and a submit button.

Hi there and thanks for the feedback,

Yes, perhaps it’s a bit busy for a simple form.
Somewhere along the planning, I got the idea to see if I could make something that was responsive for diff sizes through the use of @media queries and I figured on each size trigger just have something change a bit for a diff visual look.
In reality, this probably makes things more confusing as you mention. But I was figuring that different audiences (screen sizes) would be looking at it and that it would show diff info for diff audiences. Nothing really wrong if that was the intent.
But I think this wound up more of an experiment to see how I’d do with it all.

From the top, when I was looking at the results via browser and dev console, it was all looking great. All sizing pretty well and didn’t notice any problems. I saw no errors from these areas and all my tests passed.

As you mentioned about using W3C validator, I did not remember that.
I ran it through that and see all the errors that are showing up.

All the block notes in there are for my referencing mainly, since I didn’t code this in one succession.
I do keep reading though how it is important to make notes of any particular nuances you have with your code, to help others see your intentions. Only for important stuff I know.

Thanks for your input, I’ll redo it to a simple form for the subject and learn from the process.
It was a nice try at working with @media queries as well for me.

The problem is not that you made a form that has different content based on the screen width. I’m sure you got a lot of practice with media queries, which is good.

The form is just not user-friendly. As said, it is busy and hard to read and fill out.

You seem to have questions just for the sake of having questions. Some of the questions are long, yet do not tell the user what they are about to give an answer to. “Please Choose One of the Following” should just be “Gender”, as that is what you are asking for.

The inconsistent alignment of elements and lack of spacing makes it hard for the eyes to track through the form.

The task of making a form is very common and an important skill. I’d consider redoing it and imagining you were paid to make it for some company. Make it for the company and its users, not for you. It’s OK to have fun, just don’t turn the page too much into a funhouse.

Here is a (long) smashing magazine article that touches on a lot of best practices.

Keep up the good work!

2 Likes

Hi guys,
Thank you very much for the feedback.
I will go back and not think so much into it, haha.
Great feedback to grow from.

I’m a newbie, so I was impressed that you did so much work on the responsiveness. You ask about vertically aligning labels in your comments. I did that with relative position. Keep going! I love that with freeCodeCamp you can get fairly immediate feedback.