Design comparison
Solution retrospective
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?I'm up to any suggestions
Community feedback
- @vgt3j4d4Posted about 2 months ago
-
Does the solution include semantic HTML? Mmmm it could be improved I believe. There is no
<main>
.<section>
has been used but I don't think it fits there, same as<i>
. You could find this useful HTML5 Element Flow Chart -
Is it accessible, and what improvements could be made? Not sure if
<picture>
is needed (as there is only 1 image under it). Also,alt
properties on images could be more descriptive. Moreover, the share button ends up opening a "section", either at the bottom or as a tooltip. For thataria-expanded
andaria-controls
could be benefitial. Another thing is that, the share links should be accesible using the keyboard, and that's not possible with your approach. Consider changing thespan.share-icon
to a button and making the share links<a>
or<button>
. That way the user will be able to navigate through them using the keyboard and something can be done once the user clicks them. -
Does the layout look good on a range of screen sizes? Kind of. When changing the screen size from landspace to portrait mode, I see the image scales which not sure is expected.
-
Is the code well-structured, readable, and reusable? Yes.
-
Does the solution differ considerably from the design? No.
-
What specific areas of your project would you like help with? I think you are trying to use BEM but I'm not really sure as I see class names like
card__content__text__title
which is violating BEM. Check this for more information MindBEMding. Also, I see you added the font import inside_reset.scss
, maybe put it in a separate file or instyle.scss
.
0 -
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