Prajwal Gautam’s questions for the community
Can someone review my work and give feedback, best practices, how you would do certain aspects differently. Any feedback would be highly appreciated.
Hey, really great work on this one. Layout in desktop looks really good, responds well and the mobile layout looks good as well.
Some suggestions would be:
h1on the topic title of the person's testimonial? blog? I don't know what that is but it is certainly from the person itself. Since in a real website, this would be like a mini component, an
h1on it is not really suited. Maybe an
h2for this one, the
h1would be a screen-reader only text, it will have a
sr-onlyclass, you can search up the net for some css stylings of that one, or you could reply in here and I can help and explain it as well :>
- The person's name as well the date shouldn't be using
ulelement, since those are not really list items. The person's name should be a heading tag, while the date is just
- The toggle on the right side should be using
buttonelement. An interactive component needs to use interactive element.
buttonas well should have an
aria-expandedattribute on it. This will inform the user if the
buttonhas expanded something. The code will look like:
aria-label informs the user that this
button is for a popup for the social media.
- Those social media links should be inside their own
atag since those are links. The links will be wrapped inside a
ulelement, since those will be "list" of social media links.
atag that wraps the social media should have an
aria-labeland the value points to the name of the social media they wrap. For facebook
atag, it should have
aria-label="facebook", this way, users will know that this link would take them to facebook.
imgbeing used for the social media should have used
aria-hidden="true", since those images are just decoration, you should always hide them by applying those.
Aside from those, really great job on this one. If you have questions about on what I stated, just drop it here and I can help with it.
Marked as helpful
@pikamart That was very insightful. Half of the stuff you wrote like
aria-label i have no idea about. I will have to look into it more deeply and write back to you.
Thanks for taking the time to write in so much detail.
Your solution is really good! Just one thing should add is a
cursor: pointer; to the share button and if possible some hover effect too.
Rest of the site is really great!
@Dharmik48 Thanks for the reminder, I forgot about that cursor