@mattstuddert
Posted
Nice work on this challenge! Your overall layout looks good. Here are some pointers I've got after taking a look at your project:
- You've got a paragraph tag with a class of
.heading
for the heading. It's much better to use actual heading tags to create a proper content hierarchy. In this design, I'd say the "10,000+ of our users..." content would be ah1
, and the names of the people would beh2
elements. Creating a content hierarchy is especially important for accessibility purposes as screen readers use them to structure the content. - For the star images, you've got
alt="star"
on each of them. This means screen readers would read out the word "star" 5 times before each review. To improve accessibility, I'd recommend leaving the value blank. This means the screen readers would skip the images and jump straight to the content to read the review. - Beware of nesting selectors unnecessarily in Sass as it can lead to overly specific selectors in the generated CSS file. For example, you have this selector
.container .wrapper .ratings-container .rating .rating-description
which could be this.rating-description
. - Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
- Small details, like line heights and spacings, go a long way to refining a project and getting it closer to the design. You can see in the design comparison slider where some of these differences are.
- The responsiveness could also do with a few tweaks, especially at tablet sizes where the content looks quite squashed in places.
I hope these tips help. Let me know if you have any questions. Keep up the great work! 👍
@rontoyhacao
Posted
@mattstuddert Yayy thank you so much for your advice I really appreciate it, I'll surely apply them next time. I always get confused on which element to use on my projects especially with short texts like names.
@mattstuddert
Posted
@rontoyhacao you're welcome! Knowing what element to use where is something that will come with practice and experience. So just keep at it 🙂