Hey guys just finished my Tribute page and I’d love some solid feedback from as many of you as possible. For the record this is the first thing I have ever coded and it took me a while and don’t know how clean or efficient my code is. I also used the tidy up html but like I said not sure about efficiency. Don’t hold back at all I want the criticism. Thanks!!
Good work From my point of view you can do this things:
- Move your stylesheet in an external file to divide better your code
- Add
col-sm-12
class to the quote div ( and remove your quote id ), to be more pretty when the screen is small and change the style using the bootstrap ( Redirecting… ) - Add
img-responsive
class to your img, andalign="center"
to the parent div
On top of what @NeckersBOX has said. I took the liberty to fork your pen and I’ve made about 3 changes to make it more responsive. If you have any questions on why I did certain things, just ask.
A few tips on bootstrap:
-
Try to put all your
.row
div in.container
divs. It sorts out some margin issues that show up when left out. -
Use the
.img-reponsive
class. It’s really helpful with images. -
When dividing columns using
.col-*-*
, scale upwards: I mean start by.col-xs-*
and write the appropiate classes when need be. For example, if i want a column to take 12 at extra small screens and keep this layout until a medium screen where I want it to take 6 spaces instead (skipping small), I’d use.col-xs-12 .col-md-6
. This means it’ll forever hold 6 spaces upward of here, even on extra large screens. I noticed you only declared.col-md-*
styles, this means scaling down, at small and extra small screens, the grid won’t know how to arrange your columns it’ll always stack them on top of each other full length, which might not be the desired behaviour. It’s just a little precaution, good coding practice.
https://codepen.io/davidtheprogrammer/pen/eBKRKM?editors=1000