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

@JulioCode13

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


Please provide feedback Constructive criticism would help me improve.

Community feedback

Nipaaaa1 350

@Nipaaaa1

Posted

Congratulations on completing your first Challenge!

I see your code and there's a bit things you could do to make it even better:

First, your using CSS Variables for paragraph and if you write it like this:

--paragraph: 'Figtree';

and implement the font like this:

.date {
  font-family: sans-serif; /* This is the fallback font for older browser */
  font-family: var(--paragraph);
}

The fonts problem will go away. The reason you should use separate font family for fallback font is because it'll break at older browser if you're using CSS Variables, since it didn`t support for older browser.

Everything else is fine, Good Job!

Marked as helpful

0
Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello Julio!

Your solution looks excellent!

I have just one suggestion:

  • Use only main to wrap the main content instead of main and section. Unless you have a specific reason do use them both, it's not necessary. The tag section would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

0

@RanitManik

Posted

  • In the card design challenge, it was stated that the shadow of the card should grow on hover, but in your case, that is missing.
  • The fonts you used are not from the same family as the design.
0

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