Frontend Mentor | atif128873806's profile

P

@vercthuSubmitted about 2 months ago

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

Tried paying extra attention to semantic HTML.

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

Wasn't sure how to make the buttons, I decided going for an unordered list instead of real buttons. Also learned that I can change the link color when the mouse hovers the list item instead of only when it hovers the link with "li:hover a".

Social Links with CSS and HTML

1

atif128873806•30

@atif128873806Posted about 2 months ago

nice

1

coyoteshkw•150

@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?

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.