HTML CSS FLEX/GRID

Looks like the link to your repository may be broken. Might just be on my end though. Anyways, a fairly easy solution to the rating-cards would be to assign a column div for the stars and a column div for the text-blurb and just use display:flex on the parent card .

Something like

.ratings-card{ display:flex; align-items:center; justify-content:space-between; }

.column{ display:flex; align-items:center; justify-content:center; width:50%; }

Width will keep the 2 sides proportioned and the flex/flex-attributes just an easy way to get a horizontal/centering of the children elements (the stars/ the text blurb). Certainly a-lot of playing around to your preferences after that but, as a basic set up it "should" work. lol

Looks good though. The cards collapse and center nicely upon screen resizing. Nice work! 😎

Hello, just a quick help for grid

Your <section class="container"> you applied:

.container {
...
grid-template-areas:
  "title review"
  "cards cards";
}

Meaning on this template you said you have 3 different items that are taking specific areas "title" taking one space " review" too, and "cards" taking 2 grids bottom. Therefore you need in your html, so inside .container 3 children to work, right now you have 8 children inside:

-.heading and .description should be together in one.

-.star-rating divs all together in one.

-etc .. you get it ;)

Now I really encourage you to learn more about semantic, you cannot only use <div> everywhere. And not every content needs to be wrapped in a <div> ;)

Concerning your question about the stars. You could have them as a ::pseudo-element background-image, or you can make a list with 5 separate <li>'s each holding the svg inside. I've seen both work.

I'm looking forward to see the end results ✌️ Good luck !