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

Kept simple. Used Flexbox for basic positioning.

@roger06

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@devid8642

Posted

Firstly congratulations on your solution.

I have some considerations about your project:

It is interesting to structure the page content within a <main> tag instead of a section. As this type of card is self-contained content, it is interesting to place it inside an <article>. And finally, the card footer can be placed inside a <div>, since the <footer> tag is used for the page footer and not for the content footer. See more about the semantic elements of HTML here.

Regarding the design, I believe it is interesting to make just a few adjustments. For example, increasing the size of texts, adding a border-radius in "Learning", changing the font weight to bold for the date and author's name and finally creating a shadow effect without using borders, to do this research on the box-shadow property.

Again, congratulations on the solution, I hope you found my comment helpful.

Marked as helpful

0

@roger06

Posted

Thanks, very useful! To be honest it's not really finished - it was just as much about understanding how to post on FEM and to see others' work.

I couldn't get the name at the bottom in bold - 'bold', 'bolder', 800 etc didn't do the job. I assume there's another Google font derivative I needed to download, but didn't have time to investigate.

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