Feedback on Mohandas Gandhi's Tribute page

I Built This
1

Hi all, can you please give feedback on this first project:

https://codepen.io/cmatthaios/pen/XWNJbJe

Thanks!

2

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • Side note, the test script being JS would not run if placed in the head element. Codepen is forgiving which is why it works now.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address. (Typo’s but this is a good way to find them and other syntax errors)
    • 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. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia entry” is not accessible
  • The dark blue link against a dark background does not offer much contrast. You can search for a contrast checker to make your page easier to read.
1 Like
3

Thank you, I believe I made all the corrections. The only errors was because I removed head element causing issues for main element tag

4

Make sure you hit the save button.
I’m still seeing “wikipedia entry” which is not accessible and the issue I mentioned with the contrast.

As an aside, keep the test script (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)

  • The test script should be included, with all tests passing, when you submit your projects.
1 Like
5

Hi,

Im not sure what to do about the link. I tried to force it to be white, but it still remains that color. Please see the css for that.

Thank you for letting me know about the script code, I have re added that back in.

6

You do understand that “ wikipedia entry ” is not accessible, right?

You’re over thinking it. Use dev-tools and investigate the link. Only look if you can’t figure it out and if you look and still don’t understand don’t hesitate to ask.

#tribute-link {
  color: #ffffff;
}
1 Like
7 
#tribute-link a:link, #tribute-link a:visited  {
  color: #ffffff!important;
}

This part of your code is not working because you target an anchor element which is descendant to element with ID tribute link.

#tribute-link a

This would work for the following html

<div id="tribute-link">
  <a href="...">link</a>
</div>

If you want to target an element with some id, you do it like this:

a#tribute-link 

<a id="tribute-link" href="...">link</a>

In your case though you don’t need all these selectors and, like @Roma has already mentioned, #tribute-link is all you need.

1 Like
8

So does the link now make it more accessible?

Also IDK, I tried that css first, and wasn’t working. Thank you!

9

Yes it does. Good job

1 Like
10

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