@vanzasetia
Posted
Hello, Esther! 👋
Congratulations on completing this challenge! 🎉
I have some feedback on this solution:
- Accessibility
- All the page content should live inside landmark elements (
header,main, andfooter). By using them correctly, users of assistive technology navigate the website easily. In this case, wrap all of it withmaintag,except the attribution. The attribution should be lived inside thefooter.
- All the page content should live inside landmark elements (
<body>
<main>
page content goes here...
</main>
<footer class="attribution">
attribution links goes here...
</footer>
</body>
- For any decorative images, each
imgtag should have emptyalt=""andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - Next time, when you write alternative text to images, make sure that it is not hyphenated. Alternative text for images should be descriptive and meaningful.
- Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
- Make the stats element as
uland wrap each stats item withliinstead of usingdiv. - The stats number should not be heading. The content below it is too small. You might find it helpful if you think of a heading like a title on a document.
- I don't see any
pxunit in the CSS, well done! 👍 - Styling
- Make the card in the middle of the page vertically by
- Remove the
margin-topfrom the.cardelement - Add
min-height: 100vh;to thebodyelement
- Remove the
- I had done this only with flexbox. It is not a complex layout so there's no need for using grid.
- Make the card in the middle of the page vertically by
- Best Practice (Recommended)
- Always use classes to reference all the elements that you want to style. Using
idis going to make your stylesheet have high specificity (hard to maintain).
That's it! Hope you find this useful! 😁
Marked as helpful
@estaarrr
Posted
@vanzasetia
Hello Vanza, Thank you so much for the detailed and informative feedback! I went back to my codes and edited them accordingly; as with classes and id's, I will start practicing them on my next project. If it wouldn't be too much of a bother, please take a look at the edited version once again please. Thank you once again. I am so glad to have joined this community, where people build each other up. I am already learning so much by doing hands on and receiving feedback from people like you.
@vanzasetia
Posted
@estaarrr I took a look at your updated solution, and everything's looking better now. Great job on the updates! 👍
