Skip to content
Submitted almost 2 years ago

Basic QR Code Challenge

nzcastilan•40
@nzcastilan
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

a bit new in front end web development, Like to know if I'm using the @media properly to make the web page responsive for both mobile and desktop application or if there is a better alternative. Thanks!

Community feedback

  • Jeroen Leijnse•1,420
    @jrleijnsePosted almost 2 years ago

    Hey there! Great job completing your first challenge! 🎊

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

    HTML 📄:

    • Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.
    • If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to the website frontendmentor.io

    CSS 🎨:

    • To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

    For more information on this topic, you can read the following article: PX or REM in CSS? 📘

    • An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    I hope you find my suggestions useful, and above all: the solution you provided is very good!

    Keep it up and happy coding! 😃

    Marked as helpful
    1
    nzcastilan•40
    @nzcastilanPosted over 1 year ago

    @jrleijnse Thanks a lot, that gave me some insight on how I"ll approach my next challenge! :)

    1
  • Nebil Nejmudin•230
    @Nebil-NejPosted almost 2 years ago

    i have seen the code and it is good, but I would not recommend a 'margin: auto;' and 'width: 100%;' for this project,as it is in the design that the qr code be center left and right, the width will make it contain all the view width. So i suggest a 'width: 90%;' with a 'margin: 0 auto;'

    1
    nzcastilan•40
    @nzcastilanPosted over 1 year ago

    @Nebil-Nej Noted on that one, thanks a bunch!

    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