Feedback: tribute project

Code Feedback
1

Hi, I am new to HTML and CSS. Please rate my first project

https://codepen.io/priyabhatnagar/pen/KKgOabp

Thanks

1 Like
2

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

  • Run your HTML code through the W3C validator.
    • There is an HTML coding error 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. For a more thorough explanation read Web Accessibility in Mind.
    • “ wikipage ” is not accessible
  • Never use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

Side note, The header and footer elements should be outside of the main element. Maybe do a search using something like “ html semantics ”

  • The footer element should be outside of the main element. Maybe do a search using something like “ html semantics ”
3

Hi Roma,

Thanks for the review. The suggested changes are applied.

Thanks

4

@PriyaBhatnagar,

  • Keep the test script when forking the pen (<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.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
      So you know, for this test when you correct one issue that the test is looking for running the test will show the same test failing. This is why it’s important to read the entire failing message because even though the same test is failing it will be for a different reason. You’ll need to make different changes a few times to get the test to pass.
  • The issue with setting view port units for font sizes has not been addressed.
1 Like
5

Hi Roma,

Thanks for pointing out about the test script. I was wondering where to write test cases. The font size issue is addressed.

Thanks

6

it seems that you still fit your h1 font size based on screen width in the java script section. The line document.getElementsByTagName("h1")[0].style.fontSize = "6vw"; . Delete this and use the #title selector in the CSS section instead, where you can set units different from vw. Id suggest pixels or em.

7

If you’ve removed that line in JS you need to ensure you save the change otherwise it looks as though it hasn’t been addressed.

8

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