Tribute Page, Survey Form & Landing Page Feedback

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

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

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…

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

Thank you @Allessandra for the feedback, actually

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

1 Like

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.