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 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 .
I few tips:
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-fluidthey will make your life much easier.
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
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.