blog-preview-card

Community feedback

• 

  P

  finkusuma-dev•130

  @finkusuma-dev

  Posted 8 months ago

  Hi, your solution looks really nice and it almost identical with the design, good job 👍🏻.

  You have main element wrapping the card and footer element wrapping the attribution, which I think these are the correct semantic to use.

  About the figure, I'm myself still not 100% sure of how to use it. My solution here, completely removed figure from the code. I thought that, as this is a component, it won't relate with the main content of the page when the component is inserted to, so I removed it. And I'm still waiting for more expert person to give feedback on this matter.

  Suggestions

  The interactive element is excellent, I can see the hover effect with a transition when I pointed my mouse over the heading. I think you're just missing a very little here. The challenge is also requires the interactive element to be able to receive focus. Which you can check by clicking the page on an empty area and then press tab. And this focus and hover actually can be done by adding an anchor element. You can add anchor inside the heading like this:

  <h1><a href="#">HTML & CSS foundations</a></h1>
  

  Then you can replace your CSS code .card h1 :hover with .card a:hover.

  For the heading, on my solution I use h2 (I know some other person prefers to use h3). The reason is, once again, it is only a card component. And it will be used on the page somewhere where there will be h1. Because there should be only one h1 element, that means we need choose something else.

  I also noticed that you haven't put the code on the GitHub. Or maybe your repository haven't made public. As when I clicked the view code, I got missing page error.

  That's it from me. You can also give me feedback on the same challenge if you want here. I would really appreciate it if you do. 🙂

  00
• 

  Jacqueline Bento•20

  @jacquebento

  Posted 8 months ago

  The solution includes semantic HTML. The layout look exactly like the design proposed with little changes on the mobile screen. I liked the way you use media query directly on the element, I never seen like this.

  00