Give me some feedback for my tribute page

Code Feedback
1

Tribute Page

Please review and give some feedback even if it is good or bad feedback, I need it to improve more please thanks … and I got 9/10 when I test it but I don’t know what I need to change or add so if you got any idea I would love to have your help thank you.

2 Likes
2
  1. For the test, you just need to move the #img-caption div inside the #img-div div
<div id="img-div">
  <img id="image" src="https://user-images.githubusercontent.com/50773442/57976317-545d2780-7a0f-11e9-87aa-545b5b1ca1a2.jpg">
  <div id="img-caption">
    The man who invented the 20th century.
  </div>
</div>
  1. This is not valid SCSS
#tribute-link {
  a: link {
    color: black;
  }
  a: visited {
    color: black;
  }
  a: hover {
    color: black;
  }
}

You can always check the compiled CSS, the above SCSS complies to this

#tribute-link {
  a: link;
  a-color: black;
  a: visited;
  a-color: black;
  a: hover;
  a-color: black;
}

You can use this syntax

#tribute-link {
  &:link {
    color: black;
  }
  &:visited {
    color: black;
  }
  &:hover {
    color: black;
  }
}

Complies to this:


#tribute-link:link {
  color: black;
}
#tribute-link:visited {
  color: black;
}
#tribute-link:hover {
  color: black;
}
  1. I would increase the font-size and line-height on the body. Then increase the max-width on the UL and add a max-width to the OL. I’d also give everything a bit more vertical space (add or increase top/bottom margins).

Side note: I would really suggest not formatting the CSS the way you are (although I’m not sure if some tool was used or you did it yourself).

You have:

h1 {text-align: center;
font-family: "Ubuntu";}

I would much prefer:

h1 {
  text-align: center;
  font-family: "Ubuntu";
}
2 Likes
3

Noted! thank you for the feedback sir this gives a lot of help, about the CSS i did it myself can you give me some guideline, pointers or tips to get better in CSS i have the doubt when I am making it that I am not doing it right. Thanks again sir @lasjorg for the feedback

1 Like
4

it does’t look bad. I think you did a good job since it is your first time. I will take into consideration the changes that @lasjorg pointed out. Also, there is a lot of html code that does not have to be in there. You can read more about that here. Codepen automatically does things for you so it is nice to be aware of that! :slight_smile:

2 Likes
5

Thank you very much sir I really appreciate it.

2 Likes
6

You are welcome pal :slight_smile: