Tribute page challenge completed :) - HTML5, CSS3, and Bootstrap

Project Feedback
#1

Here is the link to my tribute page: http://codepen.io/VidhYasa/full/mWMWBo/

With the help of youtube, I learnt some advanced Bootstrap functionalities and tried to implement as much as possible into this project. This is my first website I ever built from scratch.

Please let me know your suggestions and comments.

1 Like
#2

Hi @VidhYasa,

very nice page, congrats!

only some little suggestions:

  • mobile view first heading: more distance to the left (see screentshot)
  • mobile view: <h4 class="text-center">History of Telangana</h4> floats into your h3 (see screenshot)
  • Designed and developed by: Vidhyasa must have more distance to the images in the mobile view
  • would be nice if the menu collapse in mobile view, have a look here: https://getbootstrap.com/examples/navbar/
  • the images in the row should have the same height, i think it would be more clear for the human eye
  • in mobile view some headings do not response well, have a look at the screenshot
  • code look clean 90% pay more attention to clean code i.e.
  • Movement</a> </li>
  • "history"> <a id
  • many double empty lines
  • images should have alt attributes

Kind regards
@daveyx

P.S.

  • If you like any of my answers feel free to like it by clicking the heart-button
  • If you feel like your topic is solved, you may want to mark your topic as solved

screenshot.png897×680 253 KB

2 Likes
#3

Thanks for the feedback. And that link really helps. I didn’t know how to collapse the menu bar for mobile.

Can you please tell me how to make all the images to same size? I tried to do that, but I couldn’t. So, I left them like that.
I am also trying to learn to control one element from floating into another in mobile view. Hope I would be able to do better with my next project.

#4

Hi @VidhYasa,

would be good if the images all have the same height. you can use gimp or any other image manipulating program (i.e. adobe photoshop) in order to resize the images.
as you are referencing the images the only solution in my eyes is to give the images a max-height css rule. not sure about the behaviour, as for sure the images will be scaled and the width will be another one… also have a look on bootstrap3 css classes img-responsive and center-block

you are referencing bootstrap4 in your codepen, which is still alpha. in order to learn bootstrap responsive i recommend to switch to bootstrap 3 and look how to work with their grid system with row and col:
http://getbootstrap.com/css/

Kind regards
@daveyx

P.S.

  • If you like any of my answers feel free to like it by clicking the heart-button
  • If you feel like your topic is solved, you may want to mark your topic as solved
#5