HTML, CSS

Hello @cloudpc7!

You did a very good job there!

I have just a very simple suggestion for improvement:

• Since the title is a clickable element, it's nice to add cursor: pointer to it in addition to the color shift when hovered over.

I hope it helps!

Other than that, you did a great job!

It is great! 😁

Regarding your questions about width and height:

• It is better to use max-width and min-height instead, these will be reduced or extended respectively, if necessary. On the other hand, with width and height they will always maintain the same size. Taking your example code, I made some changes and I think it looks better this way, at least it doesn't look so big:

.container {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    max-width: 22.75em;
    min-height: 33.75em;
    border: 1px solid #000000;
    border-radius: 1em;
    box-shadow: 12px 12px #000000;
    padding: 1.75em;
    margin-bottom: 1.25em;
}

• In your img also do not use width, instead use max-width: 100%, this will make the image fit the container and not overflow
• In the avatar's img, applying height: 100% doesn't change much. In that case, if you can define a fixed width because the image will always maintain the same size, also add a height: auto so that it maintains its aspect ratio:

.illustrator {
    width: 45px;
    height: auto;
}

• Instead of adding a margin-right to the img, you can apply the gap property to your author class, this generates the space you need:

.author {
    display: flex;
    align-items: center;
    margin-top: 1em;
    gap: 1em;
}