Well the tribute page is finished. Would appreciate some feedback :)

Well the tribute page is finished. Would appreciate some feedback :)
0.0 0

#1

Here’s the link guys:
my first one

Thanks in case someone is really going to check it out :slight_smile:


#2

Hey, this is a really nice one and I’m also a fan of the subject so extra points there. It responds very well too.

Some of the images and the video overflow the screen rather than respond once you get down to 320px or so, so i suppose thats something you could look at sorting out.


#3

Wow, kudos for the feedback!

Actually I was using boostrap so it should be responsive in general, though I’m not really sure how to make it perfectly adjustable to any screen size. This is not smth I remember learning from Free Code Camp, so I should really dig on this one and try to understand it better.

In general, I’ve read some article (think it was by Quincy) saying that any website should be developed first for a mobile and then for larger screen sizes, so I assume I should dig and learn this approach asap…
If you have any tips on it or where to find a good source on this subject, I will appreciate it a lot mate… :slight_smile:


#4

I’ve actually discovered a concept called “Flexbox” an hour ago…
And I’ve noticed you’ve had some posts on this subject, so.
Am I in the right direction to discover some alternative to Bootstrap which is even more powerful? :slight_smile:


#5

Hi,

Flexbox is purely for making a site responsive and layouts. It doesn’t replace bootstrap by itself, just one feature of it. Bootstrap includes flexbox - as flex grid, or another type of flex system called grid depending on which version you download. Bootstrap also has libraries for things like menus and accordions and aids in cross browser compatibility.

You can mix and match though if you don’t fancy making those things yourself but do want full control of the flex properties. I mean you can use flexbox with media queries to make the layout/responsiveness and use bootstrap for gadgets on the same site. If you fancy learning flexbox, you should definitely look at media queries as they go hand in hand.

Here is a good starting point for flex box. You would apply the rules in css and not bother with the row’s and col-xs-6 classes you would normally use in bootstrap.

If you have room on your plate, learning flexbox is a good candidate to fill it.

Regarding your images, if they are wrapped in container with a % width set (or number of columns in bootstrap) you can apply the following rule;

img {
max-width: 100%;
}

This tells the pic not to go any larger than 100% of its container div, not 100% of its own size. You will then find your picture scales nicely.

It’s a bit more difficult for video iframes… but it is doable - happy googling :smiley:

Regarding mobile first, yes thats the general concept these days. It’s a whole subject on it’s own, but in a nutshell, it means design with your content in a single column, then allow that to expand to a different layout when screen real estate allows. It’s supposed to be simpler than trying to scale a website designed for desktop down to a mobile size.

If you really want to get head aound responsive design, this book is exellent and a nice short read, but it does assume you know a little about html and css first. It does include a chapter called “stunning asthetics with CSS3” and goes into typography,and a little on css transitions and animations too. It has served me well for my experience and skill level and i’m far from an expert in anything.

Cheers

Mark


#6

Very cool! The only thing I would suggest is removing a lot of whitespace at the end of the page, before and after your footer with your social media links.

Other than that, looks good - you stuck to one font, images look good, and different colors are nice as well. Great job! :thumbsup:


#7

Thanks for the feedback!
Regarding the whitespace at the end, I’ve done it on purpose to have full page of black background when I click on the menu’s nav of “more info”. The concept was to make full page of content for each of the menu’s navs, so without whitespace in the end I would have half of the previous section visible when showing the footer with links. But I assume now that it really depends on the screen size so maybe on smaller screens you still see the portion of the previous section…

Can you suggest alternative solution to the concept? Feel free to share it :slight_smile:


#8

It’s funny that you’ve mentioned the Guide to Flexbox from CSS-tricks because I’ve actually bookmarked it as soon as I’ve discovered this concept :wink:
Hopefully when I will dive in, it will give me a good lesson on this subject…

Regarding the max-width:100%, I’m using the images as a background for my jumbotrons by using the following code in css:

.jumbotron { background-image: url("the link..."); overflow: hidden; background-size: cover; background-position: center; }

I’m not sure how can I use this concept here, maybe smth with the overflow type…not really sure…

Regarding the book you’ve recommended, I wonder if there is a tutorial based on it :slight_smile:


#9

Hi,

The background images are fine, you are using cover which is the correct property for the background image of a container.

The images I was refering to are the links to youtube that grow when you hover, adding the following rule will allow them to stay within the screen boundries.

.imglive {
    max-width: 100%;
}

Cheers,

Mark


#10

Aaah I see now :slight_smile:


#11

It is well done, overall. And it seems to be with a minimum of code too, which is a big plus. I am guessing that it works mobile, but I don’t even have one so I can’t comment there. Sorry.

However, I would like to point out a few minor things:

  1. Avoid “Comic Sans”. Always.

  2. The highlighting (magenta and yellow) may work well on mobile, but it looks kind of “chunky” and 'stilted" on the desktop.

  3. The first image of the two riders looks uncomfortably “cut-off” or “chopped” on the bottom leading to the next segment of the scroll section.

Love the bootstrap table. And again, I bet it looks awesome mobile, but take a look on desktop.


#12

Why is that? :slight_smile:
In general, what are the basic rules when specific font shouldn’t be used…?