Blog Preview Card using Flexbox

Community feedback

• 

  P

  Darkstar•1,100

  @DarkstarXDDPosted 4 months ago

  • You shouldn't give a fixed width for the container. Because of that on smaller screen sizes your component is not responsive. Instead of width, use max-width.
  • The date and the user name are not headings. They are paragraphs. If it was somehow a heading it won't still be a h3. Because your site does not have a h2. Headings should go in order. h1, h2, h3 etc. You can't skip headings.
  • That looks like a shadow to me rather than a border. With box-shadow you could have easily got the result.
  • It may not be very clear in the design file, but your whole card should be clickable. Not only the heading. So when you hover over the card, the the box shadow should get bit bigger. You can make the whole card clickable using a pseudo element.

  Marked as helpful

  1

  ---

  

  Aradhana Nayak•50

  @aradhana1807Posted 4 months ago

  @DarkstarXDD Thank you for your input, I'll definitely make these changes and keep this in mind in future.

  EDIT: I have made all the changes you have helped identifying, thank you 🙌

  1

  

  P

  Darkstar•1,100

  @DarkstarXDDPosted 4 months ago

  • The "HTML & CSS foundations" is a heading. You have made that also a <p>. Make it a heading. You can make it a <h1> or a <h2>. Remember a site should always have a <h1>. But looking at this component, this won't ever be alone in a website. This will most probably be in a website with more components like these. The <h1> will be on the top of the full webpage. So in that case the heading on this component won't be a <h1>. So you can make this either a <h1> or a <h2>. Either is fine in this case.
  • The username, "Greg Hooper" is not a heading. It should be a <p>.

  When you are unsure about whether it's a heading or not, think for a bit. Does this line of text describe what is below it? Does the username "Greg Hooper" describe anything that is below it? No. Does the line "HTML & CSS foundations" describe what is below it? It certainly does. So it should be a heading.

  Marked as helpful

  1
• 

  GOWTA231•20

  @GOWTA231Posted 4 months ago

  Hi mam recently i have seen your work in blog preview card . So i believe that you could help me in this project because i am currently learning frontend development so if you help me it will be greatest help for me . I am waiting for your positive response thank you mam

  0

  ---

  

  Aradhana Nayak•50

  @aradhana1807Posted 4 months ago

  @GOWTA231 hello there, thank you for reaching out. As for the project, where are you finding difficulties? If you want to approach this challenge, I would highly recommend you to have a look at

  • CSS Flexbox
  • Media Queries
  • Centering

  I hope these resources will help you in completing the challenge.

  0

  

  GOWTA231•20

  @GOWTA231Posted 4 months ago

  @aradhana1807 Thank you so much for your prompt response and the helpful resources! I appreciate you pointing out specific areas like CSS Flexbox, Media Queries, and Centering. I'll dive into these topics to overcome the difficulties I'm facing with the project.

  Thanks again for your assistance!!

  0