Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview card

raya 2,850

@rayaatta

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Project completed with lots of love. I had problems with making my text bold since I didn't see the imported font giving any effect on the text-boldness Second can any one tell me which tag was more appropriate for writing in the publishing date. Any other feedback is welcome After all I used lots of media queries and I want to know how I would have used less code while leaving the page responsive. Thanks all.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @rayaatta!

Your project looks great!

On your questions:

  • You can use span or even p for date in this case because it's a piece of text. So it's ok to use either of these two.

  • Also, you can add a hover effect on the main title to match the original design. A color shift to yellow and cursor: pointer to indicate that is a clickable element are just fine.

I hope it helps!

Other than that, you did an excelent job!

Marked as helpful

1

raya 2,850

@rayaatta

Posted

I had not noticed the hover effect. Thanks for the feedback but are you likely to know why my imported font didn't make the text bold automatically@danielmrz-dev

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

Which text are you refering to? @rayaatta

I opened your project and the font-weight is working fine. 😊

0
raya 2,850

@rayaatta

Posted

I though this link

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;800&display=swap);

would import the figtree font family and weights of 600&800

But it didn't work so I just went on the individual tags and made them bold

h1 {
Font-weight:800;
}

@danielmrz-dev

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

Oh I understand it now @rayaatta

It doesn't make your text bold just by importing it.

It just makes this font and those font-weights available for you. But you have to apply to the texts manually, otherwise your code does not know which weight to apply on which text 😊

0
raya 2,850

@rayaatta

Posted

Thanks alot@danielmrz-dev

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord