@KapteynUniverse
Posted
I think you can move the flex on the .container to the body and remove container div.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
flex-direction: column; on the .container-box doesn't do anything because container box is a child of the flex div, but you can use flex-direction to the element you used flex. I recommend you to check this page for flex tricks
Imgs needs to have meaningful alt text, but here the img is decorative so you can leave alt text empty.
"Learning" doesn't need to be a button but if you are going with button, a hover effect would be nice.
Avoid using hard coded values, like width: 380px; use max-width: 380px; instead, max-width: 25rem; would be even better. Em/rem units are better for responsiveness. I recommend you to check Kevin Powell's this video for better understanding.
A modern css reset for every project will help you.
Do not skip headings and also don't use them for sizes, you can always style them.
Also this component is for to use in a web page and every page should only have one h1(mostly). This is a simple card, it would never be used to serve the main heading on a page, using a h2 "HTML & CSS foundations" for the would be better. But on the future challenges doing this will give you a warning on the HTML report when you submit a solution. If it bugs you, you can create a h1 with some text and make it for screen reader only.
I would use p tag for the "These languages are the backbone of every website, defining structure, content, and presentation." too
flex-direction: row; on the .container-avatar is also doing nothing because by default it is row.
For margins; Instead of giving everything a margin, you can use gap and padding on the flex container. Gap works with flex and grid.
Marked as helpful
@jmprz
Posted
@KapteynUniverse Thank you for the feedback and also for the helpful tips/links provided! I will update the code once I apply all the lessons I learned
