@MelvinAguilar
Posted
Hi @Lorgensky 👋, 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:
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body>
<main class="container">
<article class="card">
. . .
</article>
</main>
<footer class="attribution">
. . .
</footer>
<body>
- Add descriptive text to the
altattribute of the images. The text must clearly describe the image. The alt attribute enables screen readers to read the information about on-page images and will be displayed instead if an image file cannot load. - The
<br>tag is not a semantic tag, so you should not use it. Also, if a screen-reader reads the text, it will break the flow of reading at the line break tag, so it should be used to add vertical spacing. There are only a few cases where it is necessary (for example, in a poem or an address), and it is possible to avoid them by applying padding and margin styles via CSS. More information here.
For example, you could remove the <br> tag and add margin-inline: 1rem; to the <p> element and you would have the same result.
- Use an h1 tag for 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)
<h1>Improve your front-end skills by building projects</h1>
- 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;
}
Additionally, remove the margin to center the card correctly.
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).
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful
@Lorgensky
Posted
@MelvinAguilar Thanks a lot for your feedback. Sincerly I learn a lot in your feedback, I didn't know the semantics term before. I already done some projects, for my school, and some friends, I have really ignore this rule. thanks.
