My first dev project - Tribute Page - Seeking feedback

Project Feedback
#1

Hi there,
I just completed my first FCC project and would like to seek some feedback. It is very basic but would love to hear some opinions on what I can change or improve.

https://codepen.io/ashley-khor/full/rNWpRve

Thank you all!

1 Like
#2

Hello,
Congratulations on your first completed project! I notice it’s not passing all the tests, so I definitely add the script for the fcc tests. Also, the page is not currently responsive and doesn’t resize for smaller screens.

2 Likes
#3

I really appreciate your response! I didn’t even realize that there’s a tool for me to check if I complete the tasks. I just copied my html and css codes into the test suite and it shows that i passed all tests. Did yours show otherwise?

And ok, let me figure out how to make the page responsive to different screen sizes. Thanks again!

1 Like
#4

When I originally posted you were missing the id for test 7, but you’ve fixed that now.

2 Likes
#5

Oh yeah! I did change that after I posted it. Thank you!

#6

I noticed in my view that your site was unscrollable. Maybe you should look at your css to make sure that your scrollbar is visible. Also, for a more “material” style, you could use sans serif or Roboto on the paragraph text.

1 Like
#7

U didn’t give video and navbar and a form element

1 Like
#8

Welcome to the forums @ashketchum. 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, with all tests passing, should be included when you submit your projects.
  • 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.
  • 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.
    The attached screenshot shows your page appears to be missing content and gives a bad UX. It’s even worse on a smaller screen
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia link” is not accessible

Screen Shot 2021-03-01 at 17.37.32
Screen Shot 2021-03-01 at 17.37.321251×528 191 KB

1 Like
#9

Thank you so much Roma! Your response is extremely helpful as I progress with other projects as well. Appreciate it!

1 Like
#10

Thanks for the input!

#11

Appreciate your input!