Feedback on the Tribute Page Project

Code Feedback
1

Hello everyone!
I’d like your feedback on my project: https://codepen.io/channelmobiledev/full/RwWbvWr

It was built with mobile-first in mind, so feel free to spot any mistakes on different screen sizes.

A bit of a moment of self-promotion:
Inspired by @Flopet17, I’ve been doing all the certifications from the beginning and documenting everything on livestream video here: https://www.youtube.com/watch?v=OSHslSk4aM8&list=PLZkwxCe0wc0mQpwz5P-s55o6E--deZpFI
It’s live-streamed every Monday, Wednesday, and Friday at 18h00 GMT. Feel free to drop by and say hello :smiley:

Thank you for your time and feedback :smiley:

2

This is a very solid effort. Very responsive and even handles text size increases well. Not a lot to find fault with here. The few things below are very picky.

  • For the soundcloud iframes, consider using heights in ‘em’ instead of pixels. As I increase the text size there is less room at the bottom for displaying the song titles. Yes, there is a scroll bar, but at larger text sizes you can only see about 1.5 titles at a time.
  • If I start with my browser wide and text size increased to 250%, as I slowly narrow the browser I eventually get a horizontal scroll bar for a while, even though there is still plenty of room for the content. And then as I keep narrowing, eventually the scrollbar disappears again.
  • The keyboard accessibility in the soundcloud player is not great (or maybe I just don’t know how to use it). I could never figure out how to play any song other than the first and the keyboard focus indicator leaves a lot to be desired. I’m not sure if you have any control over this though.
  • If I start out wide with a large text size and then slowly narrow the browser, eventually your first/last name at the bottom overlaps itself for a while and then at some point it shifts below the links and looks fine again.

Very nice job.

1 Like
3

My favorite song is Feathers. I love nujabes and like hearing lo-fi.

GJ I can’t spot anything bad about your project.

1 Like
4

That’s also one of my favorites as well! And it was one of the first ones I herded when I was like “where is the OST of Samurai Shamploo?”.

Thank you for the feedback @BangPeng :slight_smile:

5
  • For the Soundcloud iframes, consider using heights in ‘em’ instead of pixels. As I increase the text size there is less room at the bottom for displaying the song titles. Yes, there is a scroll bar, but at larger text sizes you can only see about 1.5 titles at a time.

That’s a good shoutout, I’m going to try it out as soon as I can. The player came from Soundcloud’s sharing feature and I did not tweak anything. I’ll try to do some adjustments to make it more responsive.

  • If I start with my browser wide and text size increased to 250%, as I slowly narrow the browser I eventually get a horizontal scroll bar for a while, even though there is still plenty of room for the content. And then as I keep narrowing, eventually the scrollbar disappears again.

I just tried with messing with window’s width, I definitely need to try it out with zoom as well thank you for noticing that.

Thank you for the feedback :smiley:

6

Very nice page @alexiorodrigues. You have a good understanding. Just something for you to revisit to help you further your journey;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
1 Like
7

Thanks for the tip @Roma. I honestly assumed that once you select the Tidy up HTML/ CSS it would run a sort of linter system behind. I keep on learning the same lesson that I should assume less and search more :smiley:

8

Codepen does provide a validator, it’s the ‘Analyze’ link. But it misses a lot which is why I recommend the W3C validator.

1 Like