Review & Feedback on tribute Page

1

Hi, I’ve just completed the tribute page and I need feedback.
I did not use any framework, so just html and css( scss actually ) and The page is not responsive.
So please guys, I need honest feedback and how to make it better, as well as some ideas for improvements.

follow me on twitter and github: https://twitter.com/thoomau https://github.com/thooma

also I just found out the background image is 1.7mb and more than one image is higher than 150kb, so if it loads slow it’s because of that, I’ll fix it later. :stuck_out_tongue:

Update: I’ve reduced the size of the images and now it loads much better.

1 Like
2

Looks great. Image heavy, but it sounds like you’re already aware of that and the issues of load time caused by that.

One problem, at a smaller screen resolution the images become distorted.

Also, I was wondering if you’d mind sharing why you chose to style it using scss rather than use a framework like Bootstrap?

1 Like
3

Update! I reduced the size of the images and now it loads much better :smiley:
As I said it’s not responsive ( cuz I don’t know how to make it responsive :stuck_out_tongue: ), and I didn’t use bootstrap although I know how to use it and I used it many times before, is because It’s simply more fun ! really. I mean you should try it out. ( and also to practice my css skills).

4

to make it responsive you can use a grid like bootstrap:

mixins:

@mixin mobile {
    @media (min-width: #{$mobile-width}) {
        @content;
    }
}
@mixin desktop {
     @media (min-width: #{$desktop-width}) {
         @content;
     }
}

and the grid

[class*="col-"] {
  float: left;
  padding: 0 $grid-gutter;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-   -12 {
  float: left;
}

@include desktop {
    @for $i from 1 through $grid-columns{ 
       .col-md-#{$i} {
	    width: 100% / $grid-columns * $i;
       }
    }
}

now you can use on your tags “col-xs-[columnsNumber] and col-md-[columnsNumber]”