Skip to content
Submitted 5 months ago

QR- code Component

Azra•20
@azra316
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learn resposivess using vh, I used fles for layout next time I will try to use grid for layout and media queries for resposiveness.

What challenges did you encounter, and how did you overcome them?

Initially, I struggled to vertically center the component. I learned how to use 100vh with Flexbox for proper alignment.

What specific areas of your project would you like help with?

Since this is my first Frontend Mentor challenge, I would appreciate feedback on the following areas:

Responsiveness:

While my project appears to be responsive without media queries, I'd like to know if there are better practices or approaches I could use to enhance responsiveness, particularly for different screen sizes. Accessibility:

Are there any improvements I can make to ensure the design is more accessible for users with disabilities, such as screen reader compatibility or color contrast adjustments? Code Structure and Best Practices:

Does my HTML and CSS follow industry best practices? Are there ways to make my code cleaner, more efficient, or easier to maintain? Styling Consistency:

Does the visual design of my solution align well with the provided mockup? Any suggestions for better implementation of design elements like spacing, font sizing, or alignment? Performance:

Are there any optimizations I can make to improve load times or performance.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    Congratulations for doing your first challenge. I have some notes I wanna mention:

    • Using min-height instead of height
      • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.
    • CSS reset
      • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    • Use a separate CSS file
    • Each Page should have a h1 heading. In this challenge though, Because in a real scenario the QR code is part of another page It does not need to have h1 and you have to use a h2
    • main element
      • Always wrap all of your contents inside a main tag. You may have a header for nav items and your logo and also footer in future challenges but You should always wrap all of your contents inside a main tag.
    • Do not limit your container
      • Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.
    • font-size in rem
      • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.
  • Software DevelopeR•0
    @softwaredeveloperx9

    Excellent comment.

    I learn a lot from your [Solution retrospective].

  • Nebil-Abdulfetah•50
    @Nebil-Abdulfetah

    Add a width on the text container so you can make it exactly the same, I am a beginner too just sharing my thoughts

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