Tribute page - GAME BOY :P

My first indie project.

It makes me so proud :wink:

2 Likes

Looks really good! No errors in your html or css, and its responsive. Heads up, I noticed that you didnt pass one test case for the welcome-section, so fix that to pass all the tests. But other than thatā€¦canā€™t say anything stands out as an issue.

You should be proudā€¦great job :smiley:

Thanks Candice :slight_smile:
Thatā€™s weird, it shows me 10/10.

It would, of course, be helpful if I selected the correct test suite from the drop down :joy: Yes indeed, you got a 10/10ā€¦ my mistake!!! :smile:

1 Like

Haha, no problem my friend.
Thanks for your time.

Nice work! Really clean, and nice choice of colours.

I suggest trying to make the top part less empty. The image is mostly blank background, so I feel you donā€™t have to show its entire width. Maybe itā€™s just me.

Also, the space under the image is a bit to big, so that also contributes to the empty feel.

With regards to accessibility, the alt attribute is usually used to give information about the image, so I would change it from ā€œalt=ā€œIMAGEā€ā€ to something more informative. Imagine that someone who is visually impaired is going through your page - how would you describe the image?

There are some things you could improve in the mobile display as well:

  • The location of the image title ā€œoriginally created byā€¦ā€ is off on mobile display.
  • You could use a lot more of the screen space ( i.e decreasing the margins/ padding in mobile display).

Thank you very much zurda!
about the image alt, yea I forgot to change it (just put it there for the prototype) so thanks for noticing.

Iā€™ll work on it some more with your tips. This is the learning curve :smile:

p.s
for the mobile display should I use media query?

Sure thing :slight_smile: Thereā€™s no rush, and itā€™s definitely a curve (Iā€™m currently improving my survey challenge, so Iā€™m right there with you in the process).

These are improvements you can do while youā€™re learning. For me, Iā€™m working on the project while completing more items in the curriculum - this way, whenever Iā€™m tired of one thing, I can switch to the other.

Yes, you can use media query to set different CSS for the mobile layout. For example, you set the #main width to 90% in regular layout, and the #tribute-info max-width to 65% -> you might want to make these larger in mobile. You should try changing these values in mobile, until you feel youā€™re using as much as possible of the screen (while keeping a clean and not too ā€œbusyā€ look to the page). Also, maybe there are some margins / paddings you could change to 0 in mobile display.

And again, this is a learning process, so it doesnā€™t have to be perfect, but itā€™s worthwhile changing those values until you find a mobile friendly display. I hope this makes sense.

Keep up the good work, and we canā€™t wait to see your next project :slight_smile: Happy coding!

1 Like

Thanks Michal, I appreciate all the tips you gave me.
Wish you the best and iā€™d be glad to see your future work :slight_smile:

×Ŗודה!

1 Like

I like your tribute page but I must admit, it bothers me a little that you didnā€™t go for an original gameboy. Thatā€™s like making a nokia tribute page and not using the nokia 3310 on your frontpage. To assist you I have added an original gameboy below :slight_smile:

XD thanks a lot tomvbe.
iā€™ll add it asap.