Design comparison
Solution retrospective
Any Feedback ?
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, great work on this one. Layout in desktop looks great , the vector is just smaller than the design, the site is responsive and the mobile state looks great as well.
You already got great feedbacks which is really nice to see, just going to add some suggestions as well:
- Avoid using
height: 100vh
on a large container like thebody
tag as this limits the element's height based on the remaining screen's height. Instead usemin-height: 100vh
, this takes full height but lets the element expand if needed. - You don't really need to create a separate element for the mobile-vector, you could have used a
picture
element so that you could define inside there the images that you want to show based on a certain screen-size. - When using
alt
attribute, avoid using words that relates to "graphic" such as "logo" and others. Animg
is already an image/graphic so no need to describe it as one. But since all images here are purely decorative, hide them. Decorative image must be hidden at all times by usingalt=""
and extraaria-hidden="true"
attribute on theimg
tag. - The accordion is not accessible. Remember, interactive components uses interactive elements. By using
p
you are making it not-accessible. - You could use
button
in here, this will wrap the accordion question as well as the dropdown-icon ( to avoid extra markup, use the dropdown-icon as background-image for the button ). Thebutton
will have a default attribute ofaria-expanded="false"
and will be set totrue
via js, if the user toggles it and vice-versa. - If you don't like to use
button
, usedetails
element. This is already accessible and they are intended for dropdowns. - Your accordion-answer is just being hidden visually but it is still being picked up by other assistive tech. When hiding elements, either use
visibility
ordisplay
, include either one in the transition so that your element will be properly hidden or not.
Aside from those, great work again on this one.
Marked as helpful1@Al-Baraa-BakriPosted about 3 years ago@pikamart very helpful feedback :) .. Thanks <3
0 - Avoid using
- @kens-visualsPosted about 3 years ago
Hey @Al-Baraa-Bakri 👋🏻
I have some suggestion for the overall project.
- First things first, let's fix the background. Instead of a solid color, it should be a gradient, like this:
background-image: linear-gradient(to bottom, #af67e9, #6565e7);
- Next, all the images in the project should have
aria-hidden="true"
. You can read more about aria-hidden here. - Also, try implementing shadow on the card. Check out this link for some cool
box-shadow
s. - Lastly, accordion only works when I specifically click on the arrow. I'd suggest adjusting JS, so it also works when I click on the text.
I hope this was helpful 👨🏻💻 overall, you did a great job especially with responsiveness. Cheers 👾
Marked as helpful1@Al-Baraa-BakriPosted about 3 years ago@kens-visuals very helpful :) thanks so much
0 - First things first, let's fix the background. Instead of a solid color, it should be a gradient, like this:
- @JulienLEUILLIERPosted about 3 years ago
Good work !
I would allow users to click on the whole
.line
element to see the answer. I think you're also missing the mobile background image on mobile layout! Keep up the good work!Marked as helpful0@Al-Baraa-BakriPosted about 3 years ago@JulienLEUILLIER Thank You for a Helpful Feedback :)
0 - @fidellimPosted about 3 years ago
Hi Al-Baraa,
I just want to say your project looks great! I like the animation you made for your accordion :) Keep it up. There isn't much for me to suggest as other members already gave great points!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord