Building A Tribute Page Done

Code Feedback
1

Hello Guys I have just finished with the assignment of Building a tribute page.

here is a link:

https://codepen.io/erukana/pen/NWqMXWX

let me know what you think of it and I welcome any opinions towards improving it.

Thank you,

E.

2 Likes
2

I would put a max width on the content text. Currently the text will expand as wide as you can make your browser and really wide content is harder to read. I would also put a little spacing between the list items, or at least make the line height a little bigger.

If you want to get real picky, use a figure element with figcaption to mark up the image:

Also, your page is clearly broken up into header, main content, and footer sections, so you can easily use the header, main, and footer tags. Technically, all content should be inside of these landmark tags:
https://dequeuniversity.com/rules/axe/3.3/region

I’m not sure if the FCC curriculum has gone over the above for you yet, I’m just pointing these things out for your information.

I’m not the world’s best stylist, so far from me to criticize here, but I would suggest a better font (since Google fonts are so easy to use and free). And possible a little more color?

1 Like
3

Hello,

Thank you for your feed-back. I was able to adjust accordingly with your suggestions.[max width on content,color,fonts,applying figure element,]. I failed to adjust the space of the “ul” contents,maybe you would help me out accomplish that and also how can i over-run " id" commands from and apply independent commands in the" class element"

I am still new with all this coding so abit rusty with most things.

**let me know what you think of what i changed **

https://codepen.io/erukana/full/NWqMXWX

4

Wow, what a change! So with the added color you now have another issue. The color contrast is not quite high enough between the text and the background. The background color on the list is a little too dark. Your current contrast ratio (black on brown) is only at 2.96. To make it pass AAA standards you need to get it up to 7. You can test color ratios at

https://webaim.org/resources/contrastchecker/

One way to make it pass using the current background color is to change the text color to white (then it will have a contrast ration of 7.08).

Same deal with the headers at the top of the page. There is too much background bleeding through them and thus they are hard to read (especially the smaller one). First you’ll want to increase the CSS opacity so that it doesn’t bleed through as much and then you may need to make either the background color or text color lighter to increase the contrast ratio. Similar issue with the Wikipedia link at the bottom .

And to be honest, I didn’t even see the text at the very bottom of the page until I looked very very closely, so that needs to be over a solid background as well.

The bolded ‘Fredoko One’ font you are using is quite thick and thus the letters are very close together, making it hard to read. I would add some letter-spacing to bolded content using this font.

Overall, the page looks much better than it’s initial version, but color brings its own set of challenges :slight_smile:

1 Like
5

Hi @Erukana, your page looks good but there are some issues that you need to go back and clean up.

  • You pass 5/10 user stories. You need to pass all of them.
  • 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>’
    • I mention this because codepen provides a boilerplate template for you and they way you coded it is wrong. There is a way that the basic elements need to be in the template and it’s not correct the way you’ve set yours up.
  • There is no such element as <p2>. The element is <p> no matter how many times you use it.
1 Like
6

Hello ,
Thank for your feedback,I will try to adjust accordingly with your advice. But i will first have to finish with some school assignments and also projects following the “TRIBUTE PAGE PROJECT”. So it will take some time before i come back to this To be honest as beginner in coding it means a lot that you have appreciated my work .Thank you so much.

Maybe we could get in touch sometimes cos most times i get stuck and have no one to get a quick reply respective of what am coding or something of the sort.Hope that’s okay.

Otherwise,thank you so much

E…

7

Thank you,I will adjust accordingly with time