Responsive Tribute Page

Hello, my friends I just finished building a responsive tribute page from freecodecamp, please check it out and give me feedback on I can improve.

Responsive Tribute page

For the HTML there are a few things I would have done differently, but it is mainly just the choice of elements.
Your use of the <h3> tags is wrong. You go from the main <h1> and follow it with an <h3>. This should be an <h2>.
Also the <h3> at the end isn’t really a heading at all. This may be an example of choosing an element for its looks as opposed to its semantics. Always choose by semantics, if it doesn’t look the way you want, CSS can always fix that.
The next one is a bit more subjective, the choice of list type. For that I would probably go with a <dl> as opposed to your <ul>. The year would be the <dt> and the event text would be the <dd>. By default it would put the <dt> and <dd> on different lines, but you can fix that by floating the <dt>.
It could be argued it should be an <ol> since there is a chronological order to the events. Again it would require styling to remove the default numbers of <ol>.

Since you ask about about it being responsive you probably want feedback on the CSS.
Well it is nicely responsive. Though it is fairly simple to achieve on a single column page. The only real issue to deal with there is the image, which you correctly did using:-

  max-width: 100%;
  height: auto;

If I’m going to criticise I would say the CSS could be trimmed down quite a bit.

@supports (position: sticky) {
  #title{
    position: sticky;
    top: 0;
  }
}

There is no real need for @supports in this case. If a browser doesn’t support sticky (most do now) it will simply ignore the rule, nothing will break.

@media (min-width: 100px) and (max-width: 1000px) {

I’m not a fan of the double sided media queries. There is no need for the min-width condition here. For the most part you will only ever need either a min-width or a max-width condition, very rare you would have both.
In fact, in this case, aside from the colour change the media query is largely redundant. Mostly because as I mentioned, responsive design is quite simple for a single column layout. Most elements are naturally responsive with browser default styling, with the exception of the image which you handled well.
I’m also seeing a lot of repeated code in there.

  .list{
  line-height: 1.9;
  max-width: 500px;
  text-align: left;
  margin: 0px auto 25px auto;
  }

There is no need to re-define the line-height and text-align to the exact same value again within the query. The style you set prior to the query will cascade through to it. Only re-define if you need to change something.

One other thing I don’t like, which is more of a general design choice. I would prefer a background on the sticky header. To me it looks wrong overlaying the body text when you scroll down.
But over all, a nice start.

3 Likes

Hi @avwerosuotrust515,

Just a few thoughts.

Spacing between the list items would help, especially when it switches to the dark background. With dark backgrounds you generally want space as it tends to look more crammed than when on a light background.

The subheading ’ The man who saved a billion lives.', should be given more prominence in my opinion. That is a pretty big statement.

Design isn’t my strong point, but I have been having a play, I hope you don’t mind. (Just a bit of fun for me really :slight_smile: )

Given that he was a significant figure in the ‘Green revolution’ I also thought a bit of colour wouldn’t go a miss.

1 Like

@avwerosuotrust515

Possibly stating the obvious, but I just wanted to point out that google comes in handy. For instance googling for ‘text on a busy image’ or ‘design a dark theme’. You can also switch from all to images just to get some inspiration.

Here are a couple of links just for reference.