Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive qr code page using media query for max-width.

@HonkyTonkTP

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Should I just give the img, h1 & p elements a class each instead of going through .card h1 etc? Since in this challenge I could've done either that or just used h1, img, p selectors by themselves.

In short, is there a preferred way to do it?

Community feedback

@Enmanuel-Otero-Montano

Posted

Hello HonkyTonkTP!

About your question. I recommend using classes on most occasions, since I suppose you know that one of the CSS pillars is the Cascade and Specificity, I am telling you this because by giving styles with classes, you make sure you always have the same specificity, for which you would only have to worry about the waterfall. This will benefit you in having a more maintainable code and developing faster, since you will not encounter problems of the type that one style steps on another.

In many Frontendmentor projects it might seem silly to use classes for all the elements that need styles, since they are small projects, but I recommend that you imagine it as big projects and try to style it only with classes so you can adapt to doing it like this. , in this way in larger projects it will be much easier for you.

Excuse me for the length. I hope I have helped you with your question. Feel free to ask and keep coding.

Marked as helpful

1

@HonkyTonkTP

Posted

@Enmanuel-Otero-Montano Thank you, it does help :)

0

@Akhil-Nagpal

Posted

Hi There! 👋 Congratulations on completing your first challenge! 🎊

First you should fix your asseccibility errors.

  • You should use <main> tag after <body> tag. But you used <main> after <div>, it raised errors.

Other Suggestions

  • Use flexbox or grid to center anything. Learn more 👉 CSS Grid Vs Flexbox
  • Yes, you can use classes for headings and paragraphs.
  • You should work on width & height of tbe card.

Otherwise, You did a great job.

I hope this will help you.😄

Marked as helpful

1

@HonkyTonkTP

Posted

@Akhil-Nagpal Thank you for taking the time to comment. Really helpful.

0

@Akhil-Nagpal

Posted

@HonkyTonkTP Anytime!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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