Melvin Aguilar 🧑🏻💻• 61,220
@MelvinAguilar
Posted
Hi @Xlence1624 👋, good job on completing this challenge! 🎉
Here are some suggestions you might consider:
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body>
<main class="card">
. . .
</main>
<body>
- The container isn't centered correctly. You can use flexbox to center elements:
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Links with more information:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
.
- The music icon is for decoration purposes only, so it could be hidden from screen readers by adding aria-hidden="true" and leaving its alt attribute empty:
<img src="./images/icon-music.svg" alt aria-hidden="true">
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful
2
Orji Michael• 160
@Xlence1624
Posted
@MelvinAguilar thank you so much. I appreciate your helpful comments. I'll ensure I get back and apply everything you pointed out.
Thanks for the links too.
1
