Skip to content
Submitted 6 months ago

Qr-code challenge, HTML, CSS, BEM

Gwenaël Magnenat•1,290
@gmagnenat
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

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

I tried do make this solution as quickly as I could. To improve efficiency I should start with a boilerplate where I already set the base CSS reset and custom properties organisation so I don't have to spend to much time on this.

Next time i'll use a build tool and preprocessor with SCSS. It will help keep consistency and speed up the styling process.

I used the chrome "perfect pixel" extension to get as close as possible from the design.

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

Getting spacing correctly and the closest possible to the design. I used a chrome extension to get the design as an overlay in the browser. By inspecting and adjusting the values I think I achieved a decent result.

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

I would need help on code structure. I'm not sure about the card__wrapper, it feels like an extra div that can be simplified;

Community feedback

  • Fastcheettahh•280
    @fastcheetahPosted 6 months ago

    Crazy its so close to the solution

    2
    Gwenaël Magnenat•1,290
    @gmagnenatPosted 6 months ago

    @fastcheetah Thank you for checking it out :)

    0
  • Ehsan•210
    @Ehsan-eslamiPosted 6 months ago

    One of the best and complete solution for this challenge. Thank you, I learned a lot

    1
    Gwenaël Magnenat•1,290
    @gmagnenatPosted 6 months ago

    @Ehsan-eslami Thank you for your comment ! :) I'm glad you liked it.

    There are some improvement to do specially on the css reset with border-box. It will solve the issue I had with padding and the extra div.

    1
    Gwenaël Magnenat•1,290
    @gmagnenatPosted 6 months ago

    @Ehsan-eslami I just pushed an update to this solution with the following changes:

    • fixed html markup, simpler solution, removed non necessary divs and wrapper
    • fixed font sizes values with relative units
    • fixed media query for the footer with relative unit
    • added a modern css reset
    • removed non necessary elements in the css too
    0
  • geomydas•1,440
    @geomydasPosted 3 months ago

    Maybe using hgroup? for .card__content

    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