Tribute page - GAME BOY :P

Tribute page - GAME BOY :P
0

#1

My first indie project.

It makes me so proud :wink:


#2

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:


#3

Thanks Candice :slight_smile:
That’s weird, it shows me 10/10.


#4

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:


#5

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


#6

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).

#7

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?


#8

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!


#9

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:

תודה!


#10

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:


#11

XD thanks a lot tomvbe.
i’ll add it asap.