Hi
There are some foundational practices you need to learn in this challenge. I hope these tips help
- All content should be contained within landmarks. This needs a
main
to wrap around the component and afooter
for the attribution. - You don't need the container div at all. Don't use min-width or the large top margin. That makes the content hidden on some screens forcing users to sceoll down for no reason. The component only needs a little space around it so it doesn't hit screen edges. You could do that with a bit of padding on the body if you like in this challenge.
- Is there a reason you've used a h3? It's not necessarily wrong but I want to check your reasoning for choosing that heading level.
- The image needs a more descriptive alt description. Imagine this component is used in its real context - on a web page, possibly with other QR code cards on the same page. They mustnt all say "QR code" as the image description. Instead, add some extra info to make the image more meaningful. It's a QR code to FrontendMentor.io.
- Get into the habit now of always including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good modern examples you can look up and use.
- The image should not have an explicit width in pixels. It only needs max-width 100% and display block (and both of these properties would be included in the css reset anyway). You can optionally set the image width to 100% but it doesn't need it.
- The heading and paragraph must nit have pixel widths either. If you wanted to limit their width you would set max width but this would need to be in rem or ch units.
- NEVER write font size in px. This is extremely important for an accessible solution.
- These styles would not be usable if this component needed to be placed in a real site. Instead of using element selectors in css get into the habit now of using single class selectors — place classes on what you want to style. This makes modular css that means components can be picked up and dropped into projects as needed; and element styles won't conflict with each other across components. It's an important principle to start grasping early.
- Make sure you fix the font and alignment.
(Ps. You mention mobile vs desktop first styling in the info above but that's not relevant to this challenge as there is no difference between any screen size)
Marked as helpful