Tribute Page, Survey Form & Landing Page Feedback

Code Feedback
1

Hi Folks,

So I recently finished the 3 first challenges of FCC: Responsive Web.
If you can rate my pens and give me any feedback, I would appreciate it.
:smiley:
Links:
Tribute Page
https://codepen.io/erick-eliel-rojas-navarro/pen/vYXYPQY

Survey Form
https://codepen.io/erick-eliel-rojas-navarro/pen/YzGXway

Landing Page (work in progress: 70%)
https://codepen.io/erick-eliel-rojas-navarro/pen/xxEOEmY

1 Like
2

Your pages look good @eliel7158. Some things to revisit;

tribute

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • Thereā€™s a horizontal scrollbar on smaller screens

survey form

  • 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.
    • The link to the font goes in the box labeled ā€˜Stuff for <head>ā€™
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • I donā€™t comment on someoneā€™s styling often because itā€™s their choice, but maybe rethink using opacity. The text on the form is hard to see.

landing page

  • Run your HTML code through the W3C validator
3

I really like the MineCraft Theme Form. Itā€™s been well thought out visually, and was well executed.

From a Readability and Design Perspective, the font shadow should really be altered to:

text-shadow: 2px 2px 1px rgba(000, 000, 000, 0.2);

Instead of the lighter color, at a higher opacityā€¦

Also, the background Image Disappears in smaller Responsive widths. It would be better if it remainedā€¦

Screenshot 2020-12-18 at 7.31.47 AM
Screenshot 2020-12-18 at 7.31.47 AM987Ɨ524 83.9 KB

Other than that, Good jobā€¦ Nice to see such a creative interpretation of the projectā€¦

4

Thank you @Allessandra for the feedback, actually

this was my plan but i will change it. Thank you so much

1 Like
5

Thanks @Roma, yes my tribute page is vague but iā€™ll make it better. And Iā€™ll change the text, many people told me ā€œitā€™s hard to read, change the colorā€ so I will :D. THANKS.