FCC Tribute and Survey Form Feedback

Hello!

Here are links to my FCC tribute page and Survey Form Project. Any feedback is more than appreciated!

Tribute: https://codepen.io/cejio/pen/aMVwXW
Survey: https://codepen.io/cejio/pen/YgEYKj

Thanks,
Chris

Tribute:
It’s technically responsive and meets all the criteria but it’s overly-basic for my taste. The picture of Carnegie is huge on my display until I resize to mobile widths then it makes more sense. Your timeline at the bottom would read and look better if you gave it more styling. The timeline is also very slightly spilling into the border of your image because of the way the margin/padding/border are setup for the image.

Survey:
I like how you’ve laid this out and the colors you’ve used. Nitpicking at it… I’d put question marks on all the questions in the survey. I’d say ‘Enter’ instead of ‘Insert’. This is happening at all widths:
image

1 Like

Always go beyond the bare minimum in an FCC project!

Tribute:

  • You formatted the text content in your source code. Why not the final page?

  • <shock><surprise> No <p> or <ol>. Only <div>s?</surprise></shock>

Survey:

  • Punctuate your labels.

  • Don’t use insert, enter, or submit in your text.

  • If you use a verb in the textarea, maybe “list”.

  • Vertical align the labels with the inputs.

  • Age input is too short to see the placeholder text. Make it longer.

1 Like

Hello, thank you both for your feedback! I very much appreciate it. I updated both projects with your recommendations. If you have the time please take a lot and let me know what you think.

I really like the timeline, looks good!

Where did you learn content ::before and ::after? I can only use it to do something with text like change a list bullet.

Survey nicely aligned. Like the colors too!

1 Like

Hi @cejiofor, welcome to the forums. Nice looking pages but…

Tribute page;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link. In HTML you have some invalid element usage and you use the same id more than once. If you need multiple uses, use class
  • while responsive it’s not mobile friendly. The :hover functionality you built into the timeline is lost on mobile devices that are touch screens.

Survey form;

  • run the validators. A typo in CSS and multiple id usage in HTML and invalid elements.
  • don’t do your styling inline. Use external CSS for all your styling.
  • you made your checkboxes so the user can click on the box or the label. Do the same with radio buttons. Currently they have to click the button.
  • change the cursor to a pointer when hovering over the Submit button

as an aside;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
1 Like

Thank you for the feedback! w3schools has a timeline tutorial which was extremely helpful!

Thank you for the feedback! I didn’t know html validation was even a thing I could/needed to do nor the specifics of how CodePen works, very much appreciated!

For the tribute page, I changed to instructions to tap instead of hover on mobile devices, which seems to work. Is that a sufficient update for mobile responsiveness?