Blog preview card using using Vanilla CSS and ReactJS

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  @nonoza

  Hiya! 👋

  Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

  Things I like about your solution 🎉

  • Clear descriptive CSS classes
  • Use of React.js
  • Clear component structure

  Things you could improve ✍️

  • Try making your CSS values more reusable by using CSS custom properties.
  • Use CSS relative units like rem and em.
  • Make the card more responsive by making it fluid when the viewport gets too small.
  • Replace the <small> element by an element that's more semantically meaningful.
  • Wrap your main content in a <main>.
  • Replace the <div> for the .blog-preview-container by an <article>.
  • Experiment more with Flexbox, try using the gap property.
  • Be careful with setting a fixed width and height on elements like your .blog-preview-container. At the moment you will run into overflow issues when the content of your card gets bigger than the width and height. I suggest keeping the height fluid. The default height of auto which is set on block elements would suffice.

  I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

  Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

  Happy coding! 😎

  Marked as helpful

  0

  ---

  

  Pretty Kunene•690

  @nonozaPosted 5 months ago

  @DylandeBruijn Thank you so much for your comment. I will do some changes on my project and ask you when I have questions.

  1

  

  Pretty Kunene•690

  @nonozaPosted 5 months ago

  @DylandeBruijn One more question, for this comment "Replace the <small> element by an element that's more semantically meaningful." : Is it fine if I use a p tag for things like category?

  1

  

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  @nonoza

  Hiya, yes it's completely fine to use <p> for the category and description!

  Marked as helpful

  0

  

  Pretty Kunene•690

  @nonozaPosted 5 months ago

  @DylandeBruijn thanks alot

  1