Skip to content
Submitted over 1 year ago

QR- Component Design

Ayush namdev•120
@ayushprojects
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone successfully completed the this QR-Component challenge by frontend mentor please review this and comment, where I can improve my styling skills. thankyou

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    HTML 🏷️:

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.

    Alt text 📷:

    • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

      If you want to learn more about the alt attribute, you can read this article. 📘.

    Font 🔤:

    • It's recommended that you always use the font provided by the challenge's style guide.To import a font, follow the steps below:

      • Go to the font's page on Google Fonts: https://fonts.google.com/specimen/Outfit.
      • A sidebar will appear with a code snippet that you can use to import the font.
      • Copy this code snippet and paste it into the <head> section of your HTML document.
      • Now you can use the "Outfit" font in your CSS by specifying font-family: 'Outfit', sans-serif;.

    CSS 🎨:

    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    CSS Reset 🔄:

    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

      CSS resets that are widely used:

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
    Ayush namdev•120
    @ayushprojectsPosted over 1 year ago

    @MelvinAguilar Thankyou for your comment I will try this way of styling. thanks for your advice.

    0

Please log in to post a comment

Log in with GitHub

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