@coyoteshkwSubmitted about 2 months ago
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?
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.
I noticed that there may be more than one card__tag and card__author. So I create wrapper just in case.
maybe child element border radius can /2 to make it beautiful.
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.