Skip to content
Submitted about 1 year ago

QR Component using Css Flex and basic Properties

Nayabi•20
@Nayabi26
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

i find difficulty to center the components always confuse about it . can please check it out ?

Community feedback

  • Gaurav Singh•440
    @Gaurav4604Posted about 1 year ago

    Hi! Congratulations on completing the challenge, it looks great 🥳

    I took a look at your index.css and styles.css files, I see you've used margin: auto to try and center your content, this is good, but css provides you with better tools such as flexbox and grid for more layout customizations.

    here are some reference links on how to use them:

    CSS Flexbox

    CSS Grid

    Also, if you take a look at the design preview, you will see that the challenge expects you to have you text-align: center, on your text content, applying the same, will let your webpage be a more accurate representation of the design provided.

    Hope this was helpful 😊

    Marked as helpful
    3
    Nayabi•20
    @Nayabi26Posted about 1 year ago

    I'm deeply grateful for your congratulations and encouragement. This was my inaugural challenge, and I heavily referenced code snippets from YouTube resources to complete it. While I can't claim it as entirely my own, I appreciate your attention to detail, especially in mentioning the use of grid and flexbox. Moving forward, I'm committed to independently structuring my code, taking your feedback into account.@Gaurav4604

    0
  • Grace•31,090
    @grace-snowPosted about 1 year ago

    Hi, I've had a look through the code and hope this is helpful

    1. always use one main landmark on every page with whatever you build. In this case the container div you have can be the main
    2. The image should ideally have a more detailed alt description. Like "QR code to FrontEndMentor.io"
    3. You don't need a text div in this. Keep it if you want if its helping in some way. In general it's good to try and keep html as simple as you can
    4. it's better for performance to link fonts in the head of the html not @import in CSS
    5. Get into the habit now of always including a modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use. It won't make must difference in this specific project but will be super important later so is still worth getting into that habit ASAP.
    6. Font size and other font properties must never be in pixels. This is extremely important. If you use pixels the site becomes inaccessible
    7. make sure you either add a little padding on a wrapping element or a little margin on the component itself so it can never touch the screen edges
    8. the design has centre aligned text so make sure you match that in your solution. It can be set higher up in the DOM, no need to set it on the heading and paragraph individually

    Well done on this! Although it may look like I've left a lot of points, these are all common foundational issues that are good to iron out now (and actually there are less than usual - you are doing well!).

    Good luck refactoring this and on your next challenge

    Marked as helpful
    1
    Nayabi•20
    @Nayabi26Posted about 1 year ago

    @grace-snow I wanted to let you know how much I appreciate your feedback. Your perspective is valuable to me, and I'm open to making the necessary improvements based on your suggestions. You give me detailed feedback on the solution . I appreciate the time you took to review it thoroughly, especially your comments on best practices , good habits(point 2 , 3) , accessibility(point 6), performance(point 4) and suggested solution example(point 5).

    And also Can You give me clarification of point 1 about main landmark . its quite over the top of my head ?

    0
    Mayank Arora•470
    @mayankdrvrPosted 12 months ago

    @Nayabi26 Welcome to the Frontendmentor community. I used to make the same mistake of using a <div> as a wrapper of all the content in the <body> instead of <main> :)

    Eventually, I learnt from feedback on my code that <main> provides a semantic meaning to the content inside it, indicating that it is the main content of the document. This is helpful for both browsers and users, as it allows browsers to better understand the structure of the document and users to more easily navigate to the main content.

    It is a landmark element, which means that assistive technologies can use it to help users navigate to the main content of the document. This is especially important for users who rely on assistive technologies to access the web.

    Moreover, search engines use the <main> element to identify the main content of a document when indexing it. This can help to improve the ranking of your website in search results.

    I also learnt that <header>, <nav> and <footer> are all outside of the <main> element, as they are not part of the main content of the document.

    Wish you all the best for your future challenges and projects.

    1

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