Tribute Page Suggestions For Improvement

Hello Everyone,

This is my first Post on the Forum.

I have made this tribute page and i sincerely request everyone to look at it and suggest me what could be done differently. I was really struggling while positioning elements and i think there is a lot of room for improvement.

While creating this website all by myself, I realized how easy it is to just read through tutorials and pass quizzes and feel good about yourself. I have also realized, the only and only way to learn web development is by making yourself uncomfortable. I was literally shaking while creating this website.
Here is what i created:

Tribute Project

The part where i struggled the most was where i had to position the elements and setting the appropriate margins and padding.

Any type of suggestion, be it positive or critical, are welcome.

Thank you, I have been in love with this platform. :blush:

By the end of today, I plan to work on the survey form. I have realized that more time should be spent on creating something rather than passing quizzes which i feel is easy.

hy !

I often have the same problem with layout and proportions … and what helped me the most was the chapter on CSS grid, mostly the grid-template-areas section
just as you said it’s much easier to pass quizz than apply what you’ve learned in that quizz in a concrete project.
I’ve just finished the Tribute Project and I’ve tried to use grid-template-areas on it and it works better than i thougth … :wink::wink:

1 Like

Hi @datageekrj, your page looks good. Some things to revisit;

  • On using codepen. 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 <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • Everything between the <style> </style> tags should be placed in the CSS section in codepen. No need to include the <style> </style> tags there.
      I mention this because;
  • 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.
    • You’ll find using the validators to check yourself to be very useful as you progress.
  • Regarding the fonts, you call ‘Segoe UI’ and ‘Roboto’ but you never link or import them. You may have them loaded locally but users may not.
  • Run the test script. You page passes 9/10 user stories.
    • Click on the red failing button and it will show which user story is failing and give a suggestion on what it’s looking for so you can pass.
1 Like

Thanks @Roma, for the feedback. I really need such feedback. I will go and fix these things really quick.

One little doubt, although i set the image’s width to the 80% of its parent element’s width and when i resize the window, the image is resizing as expected but why does the image responsive test is not green.