Responsive blog card using flexbox

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

I noticed that there may be more than one card__tag and card__author. So I create a wrapper just in case.

And I checked the Figma design file and found the space is the same. So I decide to use gap property controlling the space.

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

• use variables

I realized if I use variable in CSS, it's easier to make my webpage responsive. Example:

:root {
  --font-small: 16px;
  --font-smaller: 14px;
  --font-big: 24px;
}

when max-width < 375px, I can modify this to make it done everywhere.

@media screen and (max-width: 375px) {
  :root {
    --font-smaller: 12px;
    --font-small: 14px;
    --font-big: 20px;
  }
}

• import local fonts using @font-face

I never used it, that's funny. And I found on src format() must use truetype instead of ttf.

@font-face {
  font-family: 'Figtree Medium';
  src: url(./assets/fonts/static/Figtree-Medium.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

• serif and sans-serif and why use them

sans-serif is easier for people to read and a better choice. Serif is more often used in places with lots of text, such as body text.

• let pic fill the parent element

I don't know why but only

.card__img {
  overflow: hidden;
  border-radius: 10px;
  width: 336px;
  height: 200px;
}

.card__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

will work nice. width, height 100% and object-fit:cover necessary.

• prepare in advance

I noticed that there may be more than one card__tag and card__author. So I create wrapper just in case.

• border-radius 20/10/5

maybe child element border radius can /2 to make it beautiful.

• use flex(or grid)

I checked the figma design file and found the space is same. So I decide to use gap property controlling the space.

I also tried grid layout because I thought it was a simpler solution, but it gave me unexpected spacing so I gave up.

What specific areas of your project would you like help with?

I fixed the width and height, but I'm not sure that's a good solution. And I use flex layout to make my card center, if I cancel the height and width, the width will change when larger the browser.