Assessment wanted for CSS: building blocks - Assessments πŸ™πŸΎ

Hi there. Please will you look at my assessments and give feedback. Thank you.

Assessment: Fundamental CSS comprehension

My attempt:

Assessment: Creating fancy letterhead paper

My attempt:

Assessment: A cool-looking box

My attempt:

Hi @vusithedev

Assessment: Fundamental CSS comprehension

Just one little improvement:
It’s recommended to use unitless numbers for line-height. (See: line-height | MDN). When you use line-height: 1.5; in the header you’ll get a height of 3em (1.5 * 2em). Same when using line-height: 2; in the footer (2 * 1.5em).

Assessment: Creating fancy letterhead paper

The linear-gradient should go first to be on top of the others. Everything else is correct.

Assessment: A cool-looking box

Same thing about the line-height as in the first exercise. In this exercise you could even use something like line-height: 6; and remove height completely. The rest is all fine.

Conclusion

You did an amazing job with these challenging tasks. :medal_sports:

See you,
Michael

1 Like

Hi Michael. Thank you for this.

Just a quick question regarding the line-height in a cool-looking box. Would the computed value be 10px (from html rule) * 1.8rem (from p rule) * 6 (your suggested line-height)?

1 Like

Yes, exactly. The resulting height of the box is 10px * 1.8 * 6 = 108px.
When using a unitless line-height it’s multiplied by the element’s own font-size to get the pixel value.