Static product card using grid

Hey Moses,

I had the same question as you regarding styling elements when I started coding. I recommend to just use the class selector when styling with CSS. As stated by Bandaru you could use the id but this has some drawbacks. The same class can be used on multiple elements, but you can't do this with id's because they have to be unique.

If you use the class selector for css than when you're ready to start using JavaScript you can add the id's for use with your Javascript. This makes your code alot more flexible and will not break your Javascript when changing classes when trying new layouts etc.

Id's and classes can be used together without issues like this:

<div id="yourid" class="yourclass">

Hope this helped you! and good luck with your next challenge.

Replace<article class="code-card">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

To center .code-card on the page using grid, add min-height:100vh to the body.

To center .code-card on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Replace the padding in .code-card__text with margin, the value of the font-size in rem is 0.9375rem.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello Moses! Congratulations on completing another challenge.

To style an element there is another way that is using id=" some name". And access this in CSS using #. #idname{ your code here; }

Hope this helps!!!