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
1 Like
Thanks for the feedback!
Hi there,
I looked at your project.
- The color you used is not very comfortable. (improve your design)
- When I resized the window, the horizontal bar appeared at the bottom which is not desirable.
- Use a media query to make the website mobile usable.
- 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.
- Tribute page - https://codepen.io/junaidshaikh_js/full/eYzbGOw
- Survey form - https://codepen.io/junaidshaikh_js/full/abZXLQm
- 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.
- Web Accessibility in Mind has a more thorough explanation.
- “wikipedia entry” is not accessible
- 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