Skip to content
Submitted about 2 years ago

Responsive QR code page using css Gride.

web-components
Alejo2304•40
@Alejo2304
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What did you find difficult while building the project?

+In most parts because I didn't had much practice in CSS or HTML I am more likely to work with Backend than frontend.

Which areas of your code are you unsure of?

+In the main.html file, I am unsure about the amount of <div> I use. +In the Styles/style.css I am not really sure if I use the right amount of properties. I just tried to make the website responsive.

Do you have any questions about best practices?

+Yes a lot, I am an student, so I haven't work yet in the industry, I really try to do best practices, but I am unsure if I have any on my code.

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    QR iMAGE ALT TEXT 📸:

    • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with QR code is not even explaining for what the QR image need to be used.
    • So update the alt with meaningful text which explains like QR code to frontendmentor.io
    • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • Ayokanmi Adejola•1,390
    @Ayokanmi-Adejola

    Addressing Your Questions & Areas for Improvement :

    You asked about the amount of <div>s and CSS properties, and best practices as a student – these are excellent questions, and it shows you're thinking critically about your code!

    1. HTML Semantics (Addressing <div> usage):

      • You're right to question the amount of divs. While divs work visually, they don't convey meaning. For best practices (which improve accessibility and SEO), consider these changes:
        • Main Wrapper: Wrap the entire card component inside a <main> tag. This semantically identifies the primary content of your <body> on the page.
        • Card Element: Your div class="card" is a good container. You could make it more semantic by using <article> or <section> if it represents a self-contained piece of content.
        • Headings: Instead of div class="text", use proper heading tags (<h1>, <h2>, <h3>). For this component, "Improve your front-end skills by building projects" should likely be an <h1> (as the main title of the page or component), and "Scan the QR code to visit Frontend Mentor..." could be a <p> or an <h2> depending on its hierarchical relationship. This is crucial for screen readers and search engines.
        • Image Alt Text: You've correctly used alt for the image, which is excellent!

    2. CSS Properties & Responsiveness (Addressing "right amount of properties"):

      • You achieved responsiveness, which is the main goal here, so your properties worked! As a best practice, the "right amount" often means achieving the desired look with the fewest necessary properties, and using modern techniques.
      • Centering: You likely used Flexbox (or Grid) to center the card, which is a fantastic and modern best practice! For instance, body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } is a very robust way to center a single item.
      • Sizing: For responsive sizing, max-width on your card is a great choice to prevent it from getting too wide, while allowing it to shrink. Using rem or em units for font-size and padding/margin (relative to the root font-size or parent font-size) can also help with scalability compared to fixed px values.
      • CSS Variables: For best practices, consider defining your colors (e.g., --card-background: #fff; --text-primary: #1F3149;) and common font sizes at the top of your stylesheet using CSS Variables (Custom Properties). This makes your CSS much more organized, easier to update, and ensures consistency.

    3. General Best Practices (as a student):

      • Consistency: Aim for consistent naming conventions (like BEM methodology for classes, which you might explore), indentation, and commenting.
      • Separation of Concerns: Keep your HTML for structure, CSS for styling, and (if applicable for other projects) JavaScript for behavior.
      • Accessibility First: Always think about how your code will be perceived by screen readers and navigated by keyboard-only users. Semantic HTML is a huge part of this.
      • Cross-Browser Testing: Always test your projects on multiple browsers (Chrome, Firefox, Edge, Safari) to catch any inconsistencies.
      • Version Control: You're already using GitHub, which is excellent! Continue to make regular, small, descriptive commits.
    Marked as helpful

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