Tribute page feedback1

Code Feedback
1

Tell us what’s happening:
Describe your issue in detail here.
Here is the link to my tribute page project: https://codepen.io/jumpingmercenary/full/PopMawp
Please review it and tell me my mistakes(if any). I want to be sure of my project before submitting it.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

2

Hey! Welcome to freecodecamp forums.
I just checked out your website and here are a few things i would suggest you to work on.

<div id="main">

You should not be using a div tag to differentiate the main portion of your website when you literally have a main tag in HTML. Using the right tag makes your code semantic as well as accessible even more so in the case of the main tag because it is used by screen readers to help the disabled to skip over unnecessary content. so basically

  • Use the main tag to enclose the main part of your page.
  • use section tags to differentiate between different sections of your page for example the div with the class of tribute-info could be changed to a section tag.
  • Make sure the footer, headers, sidebars or navbars are not a part of the main tag.
  • adopt a strategy that help you arrange your CSS code in predictable way because if it isnt arranged properly then it would get harder for you to debug it as the size of the CSS file grows

Hope this helped! :slightly_smiling_face:

1 Like
3

I have made the required changes in my tribute page project. Please have a look at it again: https://codepen.io/jumpingmercenary/full/PopMawp
Also please elaborate on how to improve my CSS arrangement for better predictability.
Thank you for your help :slightly_smiling_face:

4

You’re using a div tag at the end of your page with a class named footer when you could be using a footer tag instead which makes much more sense.

and here’s an awesome response to learn about maintaining CSS.

2 Likes
5

Welcome to the forums @garvitgoel53. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
  • Run your HTML code through the W3C validator.
    • There is an HTML syntax/coding error you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • People are not seeing your page the way you intended. Understand that not everyone will have the font-family “Bradley Hand” installed/downloaded on their machine and you neither link (HTML) to it or @import (CSS) it.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia entry” is not accessible

On a side note, give a read as to what the strong element means in HTML5.
I don’t think you would want to use it that way embedded in your h1 element
Using it as an element for the dates in your timeline is not the best choice. (understand what the better element would be?)

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.