Feedback on Tribute Page-SBS

Code Feedback
1

Can you review an d give feedback on my tribute page project https://codepen.io/chythanya/full/BaoBNjd

Thanks

1 Like
2

I’m not seeing any major issues, just a few small things:

  • Don’t jump heading levels. You should go from <h1> to <h2> instead of to <h3>.
  • Why do you have a width of 450px set on the timeline but not on any other content? That looks very strange to me. If you are going to set a width, make it a maximum width and use ‘em’ instead of ‘px’.
  • I would set a maximum width on the content directly under the header image. Currently it will stretch as far as I can widen my browser, and I can make my browser very wide. A lot of people find long lines of text annoying and hard to read.
1 Like
3

Your page looks good @chythanya. 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>).
    • Your page passes 8/10 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Review the lesson about giving meaningful text to links.
  • Since each of the points in your timeline starts with a date that is also offset with a different color maybe think about getting rid of the bullet points
2 Likes
4

“Don’t jump heading levels. You should go from <h1> to <h2> instead of to <h3> .” - Noted

I used the 450px size so that I could restrict the content of ‘timeline’ to the center. I realised this is a mistake. I haven’t used em. But I now starting to use % for width. I used the same in my second project. https://codepen.io/chythanya/full/NWGwKmK

5

What is forking with the test script. How do I do that any help video. Coz, I googled and haven’t found any. Also what are the two user stories did I miss.

If I change Wikipedia Entry to Wikipedia Page will it be more accessible.
Ya, I also think that the bullet point are redundant.

6

Easier to search the forums here for an example of forking.
In my previous post, I gave the test scripts. Take everything that is in the script tags including the tags and put in in the HTML section of codepen. You’ll see a green hamburger menu. Click on it and run the test for the appropriate project. For any test that fails the button will be red. Click on the red button to see which test(s) failed and an explanation of what it is looking for and how you can correct it.

Read the article in my post, ‘Web Accessibility in Mind’. In short, if someone is relying on a screen reader to go over your page, every word is not read. ‘Wikipedia Entry’ or ‘Wikipedia Page’ tells them nothing.

Good thing to Google. ‘css get rid of bullet points’ may be a good search.

Edit to add;
If you are still confused with how to use CodePen, please read the official documentation.

7

Thanks a ton. I was able to use the script given by you. My first project has passed 8/10 user stories and 2nd one 11/17. Also I was able to use it in VS Code. I will work on the failed user stories before moving to other projects.

Also will work on the accessibility of the links part.

Thanks for your feedback. I was really helpful.

1 Like
8

Hello @chythanya I’ve created a video with some feedback on your project https://youtu.be/s1N-ybGso_M. hope you like it :slight_smile:

1 Like
9

Saw the video. Thanks for choosing my project to review as a part of your video.

Mobile preview was really useful.

1 Like