Tribute Page Feedback Johnny Cash

Tribute Page Feedback Johnny Cash
0.0 0

#1

Sorry for posting another one of these, but this is my first project ever and I don’t have anyone else to critic my work. BE HARSH!

Thanks much,


#2

Nice page but your

  margin-right: 175px;
  margin-left: 175px;

on the blockquote are too high for the mobile. Think that you are throwing away 350px off your width screen. I would make them like

blockquote {
  align: center;
  margin-right: 50px;
  margin-left: 50px;
  font-size: 30px;
}
@media (min-width: 576px){
  blockquote {
    margin-right: 175px;
    margin-left: 175px;
    font-size: 40px;
  }
}

so on small screens will be smaller and also the font size and on desktops you increase the margins and font size


#3

Looks good.
You have some problems with responsiveness though.

The title has some problems. Since the line-height on the <h1> is lower than the font-size it overlaps when the screen width gets too low. You could set it the same as the font-size or try to use 1em.

Your HTML also has some tags that are not closed properly. For example you closed the <h1> tag with<h1> instead of </h1>.


#4

Hi.
I like your tribute person. Really legendary man.
But grey color as a background looks not good. You can make it lighter or just stay white. I think it’ll be look ok then too.
Johnny Cash name looks like a link with an underline but it’s not.

By the way it is not responsive. Please fix it.
2018-06-26%2023_41_48-tribute%20page%20FCC
Your image responsive and that’s cool. I’m not sure about so big box-shadow. I prefer less with some blur maybe. And at the small viewports your box-shadow on the sides brokes your design.
2018-06-26%2023_38_17-Telegram

It looks mess.

Another one is a caption of the image. At the first view I thought it’s a header to a timeline.
2018-06-26%2023_40_36-tribute%20page%20FCC
Make a font of the camption smaller or use another methods to make it cleaner.

Your blockquote is not responsive because of your margins. You can fix it by media queries but that is not the best solution. Better to use responsive width styles with centering the blockquote.
2018-06-26%2023_45_53-tribute%20page%20FCC
Because of the reason above your page has a horizontal scroll.
2018-06-26%2023_47_11-tribute%20page%20FCC
And one most important thing for responsive design: use em,rem etc. instead of fixed px. Because you can see your page on the desktop with 2500px width and your fonts for example will 20px and you’ll not see more because your letters will be too small too read. And another one when you see your page on the viewport at 320px width - your letters will be too big too read. With em,rem,% etc. it will be ok on the different devices.
You can read about them at W3C: CSS Units page

By the way I like your clean HTML. If you really want to make good design then dive deeper in the design theory. But if you better like make actions on a webpage - just be great with back-end technology. You do not have to understand anything. Just choose your happy way and keep going.

If this’s your first project - congrats, really good for the first project.