Design comparison
Solution retrospective
Please, check my 'main' branch for the code.
- I'm pretty sure I failed in making the site accessible. I would love any feedback on accessibility, since it's something I haven't explored yet.
- If you go to my index.html, do you think I managed to follow the BEM naming convention? I would really like to incorporate it in my practice.
- As for the rest, I would appreciate any kind of feedback 😀.
PS: I'm aware this is a small project and setting up SASS took more time. But I feel like I can experiment more with smaller projects 😅.
Community feedback
- @grace-snowPosted over 2 years ago
Hi
You don't need a section in this, just make that the main tag. Sections when unlabelled just act like divs, they are not navigable landmarks.
I also recommend changing the alt text on that img. It is a QR code yes but say where it's going "QR code to [Web address]". This is much more valuable content.
I hope this is helpful
Marked as helpful1@grace-snowPosted over 2 years agoI've just had a look at your solution and there are some small bugs viewed on mobile. I've checked the code and there are some important learning points that will fix these
-
Attribution is overlapping the card content on mobile. I recommend against having this position absolute - that will always cause this problem.
-
The card is touching screen edges - it should not have an exact width, only max width (and width 100% of you like). Then, as long as it has a little margin or its wrapping element (eg body) has some padding, the component won't hit screen edges. It will grow up until the point of the design but will also become narrower if/when needed.
-
Related, the card should not have a max height. There is no need at all for this. Let the height be determined by the content within + any internal spacing. If I change text size as you have it now, content will overflow out of the card.
Marked as helpful1@ASemeraroPosted over 2 years ago@grace-snow Thank you so much! This is an extremely detailed feedback! Today I will iterate on it and fix it.
0 -
- @kyleebustamantePosted over 2 years ago
I'm inspired by the fact that you used this simple project to learn beyond what it asked for! I think your solution looks nearly perfect. Great job! Fixing your accessibility issues is pretty simple. It can be resolved by wrapping your main content in
<main></main>
tags. In your case it would just be the card section above the footer.<main> <section class="card"> </section> </main> <footer> and so on...
Marked as helpful1@ASemeraroPosted over 2 years ago@kyleebustamante Thank you so much! In the end I might have tried too many new things at once and ended up making several mistakes haha 😅 I'll work on it more today to fix the problems.
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