Responsive Blog Preview card

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 1 month ago

  Hello Shankarganesh-B, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

  Since this project is only based on a single page component, there is no need for a h1 tag. It's always a good idea to prevent accessibility errors, so I believe it would be beneficial for you to add a "h1" in this component. Don't worry if you forget about "h1," though; it's a good practice for when you are developing larger sites.

  <h1>HTML & CSS foundations</h1>
  

  Consider using rem for font sizes. When font sizes are set in absolute units like pixels, users can't adjust the text size based on their preferences. Relative units like rem adapt to the screen size and user settings, making them more flexible across various devices.

  If you'd rather keep using px, you can download a handy VS Code extension that converts pixels to rem automatically

  link -> px to rem

  The rest is spot on.

  Hope it’s helpful to you. 👍

  0
• 

  Huy Phan•2,300

  @huyphan2210Posted about 1 month ago

  Hi, @Shankarganesh-B

  I checked out your solution and I have some thoughts:

  • Your uncertainty about semantic HTML is understandable. There aren't strict rules, but the main goal of semantic HTML is to improve accessibility. Accessibility encompasses many aspects, but one key goal is to help those who rely on screen readers or other assistive technologies, like people who are visually impaired. Try putting yourself in their position—how would they understand your HTML if they can't see the page? A good starting point is to make each HTML tag as self-descriptive as possible. You could research further to deepen your understanding of this.
  • Regarding your question about responsiveness, I'd advise against setting fixed dimensions on HTML elements (like width: 384px on .preview-card-container). Instead, use relative properties (e.g., max-width, min-height), relative units (e.g., rem, em, %), and CSS functions (clamp, min, max, calc). I noticed you're already using media queries, but it may help to explore the mobile-first approach to optimize your design further.

  In the end, balancing thought and practice is key. Keep pushing forward, and you’ll continue to improve.

  Hope this helps!

  0
• 

  Justin•540

  @iamprincetjPosted about 1 month ago

  Congrats on finishing this challenge, you did great! But looking at the design I noticed your second <p> tag is darker than the design's, try giving it a more grayish color. Also, the user profile picture is larger than it should be try reducing the width. Try putting all your media queries at the bottom of your CSS file, it looks nice that way. Goodluck!

  0