Need some insight on my new Tribute page

I am mostly satisfied with the looks, even tho it’s basic. Humbe beginnings. Thanks for the feedback, much appreciated.

A good start. I like it.

My recommendations:

  • Indentation: it is one of the most important practice to learn, when you code, as it helps readability
  • Background image: Either set height(this case it becomes too stretched though, and lack of features hurts the eyes) or width in the background-size property to 100% and the other to auto (it will stretch from bottom to top, or it will set from side to side, and repeat, the image size ratio will be kept this way.
  • Do not fix the height of the thrall image, becouse it will be very much elongated on a small screen this way. You can set the image class like class="img-fluid" with bootstrap.
1 Like

hello i like design but your background image is repeating make the background parallax
if dont know how to make them parallax so learn it from:

1 Like

Thank you so much for taking time to check it out. Much appreciated. I was so exhiliarated about it so i kind of rushed it. I did not check other options ( which i have plenty) and therefore i did not think of those you mentioned. I guess we all learn by mistake.
I have taken some time to re-read the code and make some adjustments. Taking your recommendations into consideration, i indented some elements, changed the style of the background,main picture and some other minor styling to elements.
There is a long way ahead of me :slight_smile:

Thank you for you input. Even though that looks amazing, I am far away from implementing that. I still have a lot of basics to learn,and parallax might overwhelm me. :slight_smile:

Bump. I did some changes to the tribute page as well as adding new link to compare the two.


The looks have definitely improved,
The colors are more harmonic

Further recommendations

  • Create an unordered list of Thrall`s affiliations and titles
  • You could make 2 columns divs with bootstrap, and place thrall image on the left, the the unordered list on the right for example(you could do other way as well)
  • Remove the fixed margin from the main container, becouse this case, it squeezes the container, when screen width is of phone size(you can always test responsivity, by resizing your browser)
1 Like

Thank you alot. Practice makes it perfect, I guess. With my portfolio page, I’ll focus more on learning bootstrap.

There is no “responsive” class in BS4. the class is called “img-fluid”. You should change it in here: <img class="responsive" id="main-picture" ...... Take a look also into css at #main-picture {...} your width and height is distorting the image. You may use ether max-width: some value; height: auto; or width: auto; max-height: some value;

1 Like

Thank you for taking your time to review the code. What you were looking, is my first attempt to create something, namely project called Thrall, which was, by default by CodePen, done in BS3. Later i changed it to BS4 and therefore styling was done different.
Take a look at the project bellow Thrall, Thrall V.2.