Feedback on tribute page please :)

Code Feedback
1

Hello! I’ve just completed the tribute page project. Feedback would be much appreciated!

Here’s a link to it: (https://codepen.io/LizzieWa/pen/MWjdPLW)

2

Congrats on completing your first project. I do like the color combinations you chose.

The first big issue is that your page isn’t responsive. As I narrow the browser window I get a horizontal scroll bar and the elements on the page never adjust for the narrow view. Responsiveness is one of the primary goals of these projects so you’ll definitely need to fix that.

Also, do not use view port units (vw and vh) only for font sizes. This is an accessibility issue that prevents the user from manually increasing the text size on your page.

1 Like
3

Thank you! I’ve gotten rid of the vw’s, and I’ve added a lot of media queries, but it’s a work in progress to make it fit screens of different sizes. Is there a faster way to do it than manually adding media queries for various widths?

4

I would recommend you use a narrow-first approach. Narrow your browser as skinny as it will go and then style the page so it looks good at that skinny width. Don’t use any media query break points. This will be your base CSS.

Then after you have it looking good above you can gradually widen your browser and when you have enough horizontal room to rearrange things on the page for a wider layout add your first break point there (using min-width and em units). Repeat as needed.

1 Like
5

Welcome to the forums @lizziewasil. 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. (Be sure and read more than just the first line of the failing message.)
  • 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.
  • And as mentioned, make your page responsive. Remember, the R in RWD stands for Responsive
1 Like
6

Thanks everyone!

It passed the 10 tests when I originally submitted it, but right now I’m making changes to the website based on the above feedback. I’ll run in through the tests again soon, after it’s more responsive.

7

Ok, finally finished with the revision! (At least, I hope I did it right :smiley: ) Media queries are tricky but they seem to be working properly at last - not getting any horizontal scrollbars in my browser.

Edit: just realized I forgot to run the HTML through the w3 validator, that will be next…

1 Like
8

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