@MelvinAguilar
Posted
Hi @Feng-09 π, good job completing this challenge, and welcome to the Frontend Mentor Community! π
I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:
Regarding your question:
- Use
align-items: center
to thebody
to center the card horizontally.
Here are some other suggestions:
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body>
<main class="flex">
. . .
</main>
<footer class="attribution">
. . .
</footer>
<body>
- Add an h1 tag to your solution. The
<h1>
element is the main heading on a web page. There should only be one<h1>
tag per page, and always avoid skipping heading levels; Always start from<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)
Solution:
<h1 class="bold">Improve your front-end skills by building projects</h1>
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - There is no need to have this media query:
@media screen and (min-width: 376px)
div.flex {
width: 315px;
padding: 18px;
margin: 5% auto;
}
img {
margin-bottom: 10px;
}
}
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful
@Feng-09
Posted
@MelvinAguilar I understand. Thank you so much for the tips, they're really helpful