Melvin Aguilar 🧑🏻💻• 61,240
@MelvinAguilar
Posted
Hi @viktorqjk 👋, 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>
<footer class="attribution">
. . .
</footer>
<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;
}
Additionally, remove the margin to center the card correctly.
.card {
/* align-items: center; */
/* margin-top: 8em; */
/* margin-left: 44em; */
. . .
}
.attribution {
padding-top: 20px;
. . .
}
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).
.
- Improve alternative texts by adding descriptive text to the
altattribute of the images. 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. - Try to use more descriptive names for your classes. I suggest you learn the BEM naming convention standard for CSS class names because increases the readability of front-end code and provides a modular structure. For example, the classes "p-1" and "p-2" do not say what they are.
- Instead of using pixels in font size, use relative units of measure like
remorem. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
I hope those tips will help you.
Good job, and happy coding!
1
Viktor Brychuk• 40
@viktorqjk
Posted
@MelvinAguilar Hello! Thank you for your reply.
I'll try to improve my writing in the future.
1
