Review my first little project

Well I just started coding, and I’ve made my “tribute page”. Couldn’t really think of a good subject so I just took a random thing. Please don’t be too harsh on me, but tell me what I’ve done wrong/could’ve done different and better. Going to start soon with the portfolio, if you have some tips/advice how to start please let me know!

Good work :wink: but it’s a bit ugly on small screens, you have to use @media ( https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries ) to make it more responsive.

I’m a gamer so I approve of your topic of choice :thumbsup: :smile:.

I few tips:

  1. Learn and use bootstrap. I see you’re making you’re using padding to try and keep content centered and you even have a container-fluid class for your list. You had the right idea, but not so right execution. Read up on .container and container-fluid they will make your life much easier.

  2. Use % not px. Responsive design is very important, and using ‘px’ limits flexibility. it means even on a screen 320px wide, your padding will still be 120px; there’ll be no room for the content. that’s why it’s so squashed on small screens. On the other hand, if you set the padding to say 10%, it means the padding will always be 10% of the dimension of the element (left and right will 10% of the width, top and bottom will be 10% of height). That way, a screen 320px wide will have padding left and right of 32px, leaving tons of room for your content.
    P.S: The examples above assume you’re putting padding on the body. That’s why I’m using the screen width as a base for the calculations.

Phew! I hope that helps. btw, add the class .img-responsive to your image. Good Luck :v:

2 Likes

I suggest you try Firefox with the developer toolbar add-on. It gives you a good preview of what your project would look like on small screens/mobile devices. And I second @DavidTheProgrammer’s case for Bootstrap. It makes responsiveness really easy.

1 Like