Blog Preview Card using CSS Grid

Community feedback

• 

  Jacob Stone•130

  @jacob-stone9554Posted 6 months ago

  Hi Joy, you have a great start on your solution, it looks fantastic!

  There are only a handful of small, fine-grained tweaks you could make in order to get your solution a little closer to what the design is asking for as some changes to your HTML for a better overall structure.

  As far as the structure of your HTML goes, you used a <section> to develop your blog card. Generally, this tag should be reserved for designating a section of your webpage. For example, if you were developing a webpage about global wars, you might have a <section> on WWI and a <section> on WWII. To get around this, you could create a .card rule in your CSS file and style that instead, using a <div class='card'> in place of <section>. With that being said, you still got your design really close to the solution, great work :)

  As far as the overall style goes, one very minor thing you could try is adding a border to your card. You can achieve this by adding border-width, border-color, and border-style properties to the rule where you style your card.

  Another very minor change you could try is setting the <p> text of your card to hsl(220, 15%, 55%) so that the color of the description matches that of the design.

  The final piece of feedback I have for your solution is regarding the active state (like hover). You have an error on line 36 of your CSS file. You need to remove the space from the rule such that it reads section h1:hover. Then the hover styles should be applied appropriately.

  Feel free to reach out if you have any questions, happy coding :)

  Marked as helpful

  0