Skip to content
Submitted about 2 years ago

QR Code w/ pure HTML and CSS. Semantic, no media queries and bem style

cesar hernan ruscica•320
@hernanruscica
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 have doubts about wherever to put a div container to center the card or margins to the card itself. what do you think? and the other question is if it is necessary and usefull to use BEM style in smalls projects like that? did i use it right? This is my first chellenge. so i have doubt about that, i really like your answer!!

Community feedback

  • Nneoma Njoku•1,210
    @SatellitePeacePosted about 2 years ago

    hello @hernanruscica, you did a nice job so congrats

    now to answer your questions

    • question

    • I have doubts about wherever to put a div container to center the card

    • Answer

    • The best way to center an element is usually to wrap the contents of that element in a container, like div, section, article, main, etc, or you can give classes to these tags and target the element you wish to center with their class name just as you did below

    .container{
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    • second question (if it is necessary and useful to use BEM style in small projects like that?)

    • ANSWER

    • BEM is a wonderful convention for naming classes not only does it reduce the headache of how to name your classes, it makes your CSS easier to understand

    • In small projects like this one it is not really necessary to use BEM because there are only a few classes but it is not also considered bad practice. So whether or not you use it in small projects like this does not really change anything

    • As to whether you used BEM is correct, well the answer is not really for example

      <img class="card_img" src="images/image-qr-code.png" alt="QR Code">    
        <h2 class="card_title">
          Improve your front-end skills by building projects
        </h2>

    -the above should have double underscores like the example below

    • should be
      <img class="card__img" src="images/image-qr-code.png" alt="QR Code">    
        <h2 class="card__title">
          Improve your front-end skills by building projects
        </h2>

    for more on BEM check out this site (https://css-tricks.com/bem-101/)

    i Hope this helps

    Marked as helpful
    0
    cesar hernan ruscica•320
    @hernanruscicaPosted about 2 years ago

    @SatellitePeace thank you very much for your comments! I really forgot the double underscore, and now i realize that !! it helps, sure!!

    1
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hi cesar hernan ruscica, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    Reduce your code by removing unnecessary elements. The HTML structure is working but you can reduce at least 20% of your code by cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    <body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    ✌️ I hope this helps you and happy coding!

    0
    cesar hernan ruscica•320
    @hernanruscicaPosted about 2 years ago

    @correlucas thank you very much for you comment. I put the div.card just for the purpose to be like a module that you can reutilize. Obviously that I can remove then, but I thought that it wasn't correct. Greetings!!

    1
    Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    @hernanruscica Ah okay! Was only one tip to improve your code bro anyway your solution is working perfect. Keep it up =)

    Marked as helpful
    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