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.
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!
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!
<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!