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

@Hiraeight

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


What specific areas of your project would you like help with?

I would like to know if there is a better way of coding the output. Are there best practices that I could have applied or are there unnecessary elements, classes, or CSS that I added that will have the same result if those are removed? I will greatly appreciate your opinions and suggestions. Thanks

Community feedback

P

@fraserjubb

Posted

Nice work! I'm also working on the "Newbie" challenges atm, so take what I say with a grain of salt as I am still learning too.

Small suggestions I would try to implement:

  • I think had you opted for flexbox instead of CSS-grid, it would require less HTML containers, which would also lead to more concise code. You really only want to use containers for grouping. I've not watched this particular video yet, but this has been a good channel for me in the past, it looks like in this video, there will be more detail on when is best to use each one.

As for your CSS:

  • You have a typo on line 80: height: fi;. At least I think it is a typo 😅
  • With your font sizes, try and replace px with rem as this makes your code more responsive. This video should help explain this all in better detail and give better examples as to when to use each unit.
  • Finally, more just for this website, make sure to update your screenshot so that it is the default browser state - it just helps for seeing an easy comparison between your solution and the initial design 🙂

Marked as helpful

1

@Hiraeight

Posted

Hi Fraser! thank you for your suggestions, I will gladly apply your suggestions and update my code for this activity 🙂

1
P

@fraserjubb

Posted

@Hiraeight No worries, happy to help!

0

@SvitlanaSuslenkova

Posted

I think it's a good project, you can go for harder projects.

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