Feedback for Tribute page, please!

Code Feedback
1

Want to improve on my project, so feedback would be greatly appreciated. Also experiencing a problem where some features of css don’t work when I shift it to the css editor, could someone help me out?

Thank you!!

Project Link - https://codepen.io/KoderJoker/full/MrLBdR

P.S. I looked up how to implement the NavBar and toggle feature from w3schools. Should I credit it?

2

I think the page is generally well-made, but there are a few Bootstrap-specific things that you need to pay attention to since you basically had to hack the CSS (I assume) in order to make things appear the way you want (more below).

General things:

  • It tried transferring the CSS from your HTML to the CodePen CSS input and it seems to work well. Make sure you’re not copying the style tags
  • The way how things like the navbar is implemented is quite standard and I would say that attribution is unnecessary. I personally do leave links to things that I find helpful in my code, perhaps that may be an option for you, too. In the case that the author requests attribution to be made or that the license of the resource you are using requires it (such as a free API sometimes, which you will come across later) then it’s a different story, of course
  • You seem to be using a much older version of Bootstrap (3.3.1, even for version 3). It is perhaps also worth noting that the latest version is Bootstrap 4—if you are comfortable with using Bootstrap, I highly recommend learning the small differences as you will be able to take advantage of more modern CSS methods like flexboxes, too
  • Read through the Dos and Don’ts here with regard to the Bootstrap grid system
  • Following from the point above, it’s because Bootstrap columns should always be inside rows, which is in turn inside either type of containers. The reason is because the margins and padding are designed specifically so that the layout would “just work” if you follow the instructions in the documentation. If I’m not mistaken, you should never have to modify the paddings and margins of the container, rows, and column classes
  • It’s worth noting that you can fit multiple rows inside a a container

EDIT: I forgot to mention that there is a problem with the images overlapping with the text at certain screen sizes; I’m not sure if it’s because of the styles you applied to the containers and/or a lack of responsiveness on the images themselves, but something that you will probably want to look into is the .img-responsive Bootstrap class.

I hope that helps! :slight_smile:

1 Like
3

Added changes!

When I shift css to the css editor the padding and font colour of the text in the jumbotron changes to default, even without the style tag.

Updated the version of bootstrap 3. Unfortunately my navbar goes haywire when I update to bootstrap 4 :frowning:

Got it! :+1: Have adjusted it accordingly.

Seems like I’ve corrected it!

Thank you so much for helping out!! :smile: