Project Feedback: Tribute page and Survey Form

Code Feedback
1

Hi all,

I would like to show my both Tribute page and Survey form. I solved both challenges using flex box and tried to make it responsive.

I faced a problem in specifying height for a flex-item. For example, In tribute page, I initiated the <main> tag’s (Flex-container, and items were directed as columns) height as 100vh and later I initiated <footer> tag’s (last flex-item in the container) height as 20vh. What I expected was it would appear in the page-end as the other footers but it appeared above on another flex-item.

My doubt is :- what are the situations we must specify the height for flex-items? or can we avoid it?(let it automatically decide its height, height: auto;). Can you guys please explain me where we should define the height and width for flex-items and containers?.

My Tribute project: https://codepen.io/thanos18/full/ZEzXzgN
My Survey Form: https://codepen.io/thanos18/full/vYBeEvo

Please tell me what you guys think. Should I change anything for better user experience or responsiveness, any other advises to improve my code?. I really appreciate any feedback for further improvement.

Thanks :slightly_smiling_face:

2

Both of your pages are solid, I like the formatting you’ve chosen on both. They are both responsive.

On the Tribute page, I would remove the transform on the footer a tags in your css and use something else to make it interactive (maybe background-color: #f2e71a; border-radius: 15px;). To me, it looks like a mistake when I hover these elements and they jump like they are.

On the survey page, I would make all labels clickable so that users aren’t forced to click on the radio/checkboxes in order to make their selections. (https://stackoverflow.com/questions/6293588/how-to-create-a-checkbox-with-a-clickable-label)

I am not sure how to answer all your questions but your pages both look good to me as far as where the footers are and heights.

1 Like
3

@saclark12000 Thank you for your feedback. I will focus on your feedback.

4

Both are beautiful and awesome :yum: Great job! :tada:

1 Like
5

@Steffan153 Thank you for your time to review my project, I really appreciate that! :smiley:

1 Like