Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm using mobile-first flow.
What challenges did you encounter, and how did you overcome them?I tried to set the background to the entire height of the page and found several solutions.
What specific areas of your project would you like help with?I would like to receive a code review from my colleagues and accept changes if there are any.
Community feedback
- @grace-snowPosted 8 months ago
I tried to preview this but the text is unreadably pale when I view on mobile. I think you need to check the colors you're using!
Here's other feedback
- the use of landmarks is very muddled in this. The wrapper div should be a main, the main should be a div or article or section (whatever you prefer there are no benefits to any of them in particular). There should be no extra article inside the card wrapping only the text content.
- The image is the most important content on the page. That means it needs a properly written alt description. That needs to say what it is (QR code) and where it goes (to FrontendMentor.io). There is a good post in the resources channel on discord about how to write good alt text. Remember it is content readable by site users, it's not "code".
- When doing single component challenges like these remember to think about the context of where this is going to be used. This kind of card would never act as a page title. That tells you the heading level cannot be h1.
- It's better for performance to link fonts in the html head instead of css imports.
- Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- This really is only a simple card with a few basic styles. There's no need for things like position relative and z-index. Strip out anything you don't need in the styles.
- There is no benefit to making the card a flex column unless you want to use the gap property for vertical spacing between it's children. All of the elements in this challenge stack by default so again the flex column properties could be removed.
- There should be no explicit widths or heights in this challenge. Remove them all. The card component only needs a single max width in rem. The image only needs display block and max-width 100% (and width 100% if you want).
- Font size must never be in px. Extremely important!
- There is no need for a media query in this challenge. But if you need them in future remember to always define media queries in rem or em not px
- The card should have padding on all sides. Make sure you understand the difference between padding and margin (there's another post about that on FEDmentor.dev).
- Make sure the component cannot touch the screen edges. That means either a wrapping element like body in this case can have a little padding on all sides or the component itself can have a little margin on all sides.
Marked as helpful0 - @UlpiMaheshPosted 8 months ago
N/A
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