Animated Survey Form. Please Have a Look

Code Feedback
1

Hello Campers,

I just finished my second challenge with some cool animation effects. Give your valuable feedbacks.

Please Have a Look :computer:


Thanks :slight_smile:

2 Likes
2

I noticed that if you put an age over 99, the animated ā€œAgeā€ word drops onto the inputed age value and the font color turns ā€œwhiteā€. I donā€™t know how to fix it, I just noticed the issue.

But I loved how specific you were with the last two music genres, made me lol

3

I can see in the thumbnail for your project that the background image is black, but when I loaded it, the background image wouldnt load. So I couldnt see anything on the page since the background defaulted to white. Might be a good idea to have a backup if the image does not load to provide a plain black/darker background. I did also notice the issue that luccarizzi mentioned above.

But after I just added a black background, your form looks nice! I love the little animations with the text, and the glowing buttons! Good work.

Cheers

1 Like
4

Hello @mahadi-devo! Great page with nice effects. When I am viewing your page on an iPhone and it doesnā€™t display well though. I noticed that you have @media but the page still doesnā€™t fit the screen.

image
image1242Ɨ2688 333 KB

I also noticed that you have 3 different sections in your css with @media for Max-width 768px. What is the reason for that?

Also you donā€™t have to write your css classes out in a ā€˜treeā€™ style list. I notice that you seem to list the parent class then the second, third fourth etc. If itā€™s a class then you can just list that class alone. That may be something that helps you though.

There is some contradictory things in the css because you are using the same @media several times. An example would be in your .container .header .title you are calling the font-size 50px and in the next `.container .header .titleā€™ you are making it 40px. It will only accept one.

A couple things about CodePen also:

  1. The html box you type into the the <body> so you donā€™t need to have anything for the <head> section there. The head stuff goes in that section which is located under settings>html. You will see a block that says ā€œstuff for headā€.

  2. Since it is the <body> section you also donā€™t need <body> tags.

  3. I would recommend using the css and html analyze and format tools available in CodePen. They are locate at the top of each box via a drop down arrow. You will see you have some errors which can be fixed.

  4. The javascript stuff can go in the JS section if you wanted to keep things separate. the ` tags wouldnā€™t be required if you did do that.

Great job using some transitions and making the page your own. It looks really good and the input sections are a nice touch.

5

@jfirestorm4 Thank you so much for your valuable advice. Iā€™m looking forward to do some changes in the page that you mentioned ::slightly_smiling_face:

6

@midnaVaria Thank you so much for your feedback and the tip :slightly_smiling_face:

1 Like
7

Thanks @luccarizzi for your valuable feedbackšŸ™‚

1 Like
8

It looks good but you didnā€™t choose the most readable font! I would keep that font for the title but pick something else thatā€™s easier on the eyes for the rest of the survey .

9

Itā€™s really good but maybe you should add an option for 0-1 years in the question ā€œHow long have you been playing the guitarā€