Tribute Page - Nicola Tesla

Hi guys!
Nicola Tesla has been a great inspiration and a fine example of human achievement, thus the page dedicated to him.
Any feedback would be appreciated!

Cool.
Here’s mine: http://codepen.io/ThatGuyYupHim/full/EyPJNJ/
I’m struggling to make it responsive.

Hey, looking good so far. I would do the following next:

  • move all of your inline styles out of the HTML and into the CSS file.
  • avoid naming classes after colours/sizes etc:
    • eg what if you didn’t want the background to be grey anymore? as you currently have it, you will have to change your class name in the HTML file and the CSS file to match the new colour so that it makes sense.
    • BEM (block, element, modifier) is a good naming convention. This page will give you a selection of naming conventions and explain their importance.
  • You have already included Bootstrap, why not use their classes to make your page responsive? I found this Youtube Video that explains a lot of Bootstrap in about an hour.

Let me know if you need any help or if the info I gave is a little overwhelming :slight_smile:

2 Likes

Hi guys! Just thought I might chime in and see what you thought about mine that I finished an hour ago.

https://codepen.io/DexPassenger/full/QEEzyG/

Lol the funny thing is now I realize that I could have just put most of the pictures in the grid into their own div and then used $("...").children().css("height","254"); to get rid of all the repeated CSS code, but I guess it's too late now. :)

Hi - your page looks good, also on mobile. Very nice job!

Hi - one of the reasons it doesn’t work on small screens is due to the large margins you have. Consider using %'s for the margins, or just making them smaller in general. You are already using bootstrap, you can use the grid/column system to manage the layout.

1 Like

You can consolidate a lot of that CSS, like the image sizes that are repeated for each image. You can put that CSS into one class, then apply that class to each image. Also, at least one of the images does not include the img-responsive class (not sure if that was intentional).

Hi @DexPassenger,
Great work! It works well on desktop and mobile.
Play around with putting the images into their own div like you said, and try to center them :slight_smile:

[http://codepen.io/ThatGuyYupHim/full/EygxKN/

I kind of like the BEM methodology, though I have not implemented it.
I am not sure about the pros and cons of the methodology I have implemented(class names in sequential order).

The link to the video would be helpful some day, but not in the current circumstance I am in(I have a poor internet connection). Would love to have some comments. :slight_smile:

Oh well done my friend, the page is looking responsive and your code is much cleaner!
Regarding BEM, its about naming your classes based on Block Element Modifier.

From getbem.com:
Block: Standalone entity that is meaningful on its own.
Element: Parts of a block and have no standalone meaning. They are semantically tied to its block.
Modifier: Flags on blocks or elements. Use them to change appearance or behaviour.
mg

It’s a really good habit to pick up early on. There are other naming conventions out there too so find one you like and stick to it for a while. It will make your code readable and logical to others, and even to yourself when you return to a large codebase after not looking at it for a while.

I guess we had the same idea, sort off.
Here is my tribute page,
https://codepen.io/sunnycampcoder/full/PzaRGG/