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
alt
attribute 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
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.
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