Feedback request for Tribute Page

Feedback request for Tribute Page
0.0 0

#1

Hello everyone,

I am new to HTML5 and CSS and learnt them via freecodecamp. I’ve completed my first project “Build a Tribute Page” and below is the link for the page

My Tribute Page

I would really appreciate some feedback on this on what I can improve on.

Cheers,
Balaji


#2

Greetings Balaji,
I`m a new Codecamper as well.

My notices:
I like the basic outline of your project.
Your code structure:
-Use indentation according to the DOM tree.
Meaning the more parents a DOM element has,
the more tabs or space you use in the new line,
so its easier to read your code(like _<div ><div><div></div></div></div>_ ).

-I have noticed multiple </br>-s after each other and you also use<br> simply.
You use</br>in text to start a new line, if you specifically want to break the text.
You dont need an opening tag of
<br>.
When you create a new DOM element under the same parent
(example:
_<div> <p></p> <p></p></div>_), if you dont specify it in the styling,
it will always be in a new line as far as I know.
-You created multiple divs, just to apply different bootstrap preset classes to certain elements.
(div class="col-xs-2"><div class="well">…) You can add multiple classes in the same field like this: (class="col-xs-2 well ..." ) so your fields will work more consistently

Other possible improvements:
-By adjusting the screen size, your site looses its composure.
The links fall out of the background. (You could use for example word wrap,
or fixed min-width, or check how to set that your objects get under each other in bootstrap
(Im not sure of this now either))
-The image slides out of the container background:
I would use the position property for the image object relative to the container div,
something like this top:10px; right:10px for example.
You could also use the float: right; css property which would set the position of the image on the right side of it`s container.

Regards, Tibor.


#3

Hey @oomti,

Thank you very much on the feedback, I will work on formatting my code even more.
I had viewed my site on the mobile and noted that the text and images went out of the container!

I will work on fixing these.

Cheers,
Balaji


#4

Hi, I am new to code camp as well . I would like to highlight some points here:

  • use " img-responsive " class for your image to resize properly

  • I noticed you are using bootstrap 3, also have a look on bootstrap 4, it has a lot better customization options. Documentation link: https://getbootstrap.com/docs/4.1/getting-started/introduction/

  • you can use “Blockquotes” on your quotations https://getbootstrap.com/docs/4.1/content/typography/

  • image tags are self closing unlike other closing tags such as divs etc…

  • i think you should use either CSS3 flexible box or bootstrap flexbox for your well items (used below in awards section of ur page).For reference see: CSS3 flexible box. Use the flex wrap property for proper responsive behavior.

other:

  • make use of proper indentation , a must to write clear readable code
  • use comments to marks sections of your code

Overall, I think you have done a great job with your first project:grinning:
Happy Coding!


#5

Thank you very much @ridafatima15h1 for your comments! I will work on the provided suggestions!

Cheers,
Balaji


#6

Hey @oomti and @ridafatima15h1,

I’ve changed my code with a few changes suggested, please can you let me know how this looks now.

I haven’t done anything to the <br/>s and the bootstrap4 yet, I will look into them tomorrow.

Cheers,
Balaji


#7

hi,

  • you should add the image classes within the image
<div class=" col-xs-3 ">
  <img class="img-responsive"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQcQx15eDFfB-tmTrqcRAFEYuhhMXwC4Jq7yl8qiTSN5u7bN9rag" alt="Image of Dr.A.P.J. Abdul Kalam">
</div>
  • when using thumbnails , use images with a perfect square dimension to avoid distortion of image when changing the screen size. OR here you can preserve the image’s aspect ratio by adding following to your CSS
img {
    object-fit: contain;
}

By this content is scaled to maintain its aspect ratio while fitting within the element’s content box.

Other then that,
Your page looks good and responsive. Now you can experiment with various customization.
GoodLuck!


#8

Looks great.
Ridafatima gave great tips

I tried adding one more property in your pen:
max-width: 120 px
for the .well-container class.

It makes the wells look more neat.


#9

Thanks for your suggestions, I’ve made the changes and can see the site getting better visually as well as responsive!

Thanks much again! I’ll post my portfolio page once am done creating it!

Cheers,
Balaji


#10

hey @ridafatima15h1 and @oomti,

I’m done with my portfolio! Please can you give your comments here