Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Qr-code challenge, HTML, CSS, BEM

T

@gmagnenat

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@fastcheetah

Posted

Crazy its so close to the solution

2

T

@gmagnenat

Posted

@fastcheetah Thank you for checking it out :)

0
Ehsan 210

@Ehsan-eslami

Posted

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

1

T

@gmagnenat

Posted

@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
T

@gmagnenat

Posted

@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,060

@geomydas

Posted

Maybe using hgroup? for .card__content

0

Please log in to post a comment

Log in with GitHub
Discord logo

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