My first project: Tribute page! Looking forward for your feedback!

Hey there, guys! Check out my first project, a tribute page to Scorpions rock band! https://codepen.io/sdrashen/pen/zYGXeMd
strong text

1 Like

Hey @sdrashen!
Welcome to FCC forum.

Your page looks nice but there are some things to change.

  • you don’t have the test script.
  • change the color of the link at the bottom as it is not visible at dark bg.
  • add text like “Made by sdrashen” at the footer.
  • your page is not mobile friendly.

Please make these change.

Thanks and Happy Coding :slight_smile:

1 Like

Thanks for the feedback! :slight_smile:

Hi there,
I looked at your project.

  1. The color you used is not very comfortable. (improve your design)
  2. When I resized the window, the horizontal bar appeared at the bottom which is not desirable.
  3. Use a media query to make the website mobile usable.
  4. Always open your project on your mobile phone to check it.

With time you will surely improve.
Thank you.

Check out some of the projects I recently completed.

  1. Tribute page - https://codepen.io/junaidshaikh_js/full/eYzbGOw
  2. Survey form - https://codepen.io/junaidshaikh_js/full/abZXLQm
  3. Product landing page - https://codepen.io/junaidshaikh_js/full/yLJwmwp

Happy coding !!

Welcome to the forums @sdrashen. 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 should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors 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.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • The timeline falls out of the container on smaller screens
    • You’ll have an easier time with responsiveness if instead of hardcoding pixel values you use relative values like em, rem and percentages on fonts and widths
1 Like