All solutions

What are you most proud of, and what would you do differently next time?

Other tasks (Pick figma coordinates, google font API, etc.) other than the coding itself took up too much time.

I plan on doing it faster next time.

What challenges did you encounter, and how did you overcome them?

• It was not possible to capture the size or layout with just the image file.

  So I got the coordinates with Figma.

• Importing only the desired weight from Google Font could not be applied immediately.

  14..32,400;14..32,600;14..32,700 applied.

What are you most proud of, and what would you do differently next time?

It took too long, so next time I'll just implement the parts in the challenge without any additional work.

What challenges did you encounter, and how did you overcome them?

• The task of making the a tag respond to the entire card.

  .card a.link::after {
    position: absolute;
    inset: 0;
    z-index: 1 !important;
    content: "";
  }
  

• Size does not match design file.

  As a result, the inline-flex parent was 3px larger.

  Solved as follows:

  .card .author {
    display: inline-flex;
    vertical-align: middle;
  }
  

What are you most proud of, and what would you do differently next time?

Rewite to using tailwind

What challenges did you encounter, and how did you overcome them?

I want to fill the screen and place the `` at the bottom.

I used

body {
    min-height: 100dvh;
}

If you do not specify the size of, a scrollbar will appear

The problem occurred because the web-extension created a tag.