Responsive Blog Preview Card

Community feedback

• 

  matbac85•600

  @matbac85Posted 8 months ago

  Hello,

  I'm a beginner too, but I hope my comments help you.

  HTML:

  • This challenge is a card component. The empty <h1> in your code doesn't seem necessary to me. Opting for the h2 in your component is a good thing.

  • The main container you called <div class="container"> could be an <article>.

  • Take a look at the resources offered by Front End Mentor. One of them talks about how to fill in the "alt" attribute.

  • The little component with the profile photo and name could be an <figure> with an <figcaption>

  CSS:

  • There's a really good CSS reset written by Josh Cormeau. Feel free to take a look.

  • The width property is deprecated. Better to opt for min-width and max-width. To manage the width of my components in these FEM challenges, I do two things: - Either I work with the max-width property (I say that my element can't have a width greater than "x "rem) and I use the clamp() function to define a maximum size in mobile and desktop mode. - Either I put a padding on the container that contains the component (usually a <main> and I set a max-width for the desktop version. To centre my component vertically and horizontally on the page in desktop mode, I use flex.

  • I see that you haven't put the hover effect on your h2. If you want to, you need to change your HTML and make your h2 a link on which you can put a hover effect. Imagine that this component is a summary of a blog article and that to access it, you have to click somewhere. In this case, you need to be able to click on the h2.

  • It's best to avoid px and use em or rem.

  • To make the text responsive, use clamp() and a clamp() generator like this one

  • Your "learning" tag is too wide. To manage its size, use the fit-content value and add the appropriate paddings.

  • For colours, use CSS classes. You set them at :root and then, if you ever want to change them, just change them there and they'll change everywhere. Go and have a look.

  That's all I can see. Well done and keep up the good work!

  0

  ---

  

  Yahaya Auwalu•30

  @yauwalu84Posted 8 months ago

  @matbac85 Thank you for the reply, I will check as you suggested. I will learn and implement the changes. Thank you once again.

  0