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

MacSmod 10

@MacSmod

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


Looking for honest feedback. I'm just learning HTML and CSS and this is the first challenge I've attempted. I've only been learning for about 2 weeks.

Community feedback

Mikhail 440

@MikeBeloborodov

Posted

Hello! Nicely done work! Some feedback:

  • Try to use more semantic tags, for example you could use article for your card

  • Read about BEM naming convention, and try to use only classes to style your components.

  • Try to make your final result look as close to the design as possible, including paddings, margins, font sizes. You can use "PixelPerfect" addon for chrome to use the design image on top of your document to eyeball all the sizes more correctly.

  • Try to avoid using pixels and instead use rem or em units, because this way your page will be more accessible for people who want to change their default font-size in the browser and your document will adjust to that, otherwise they will have to zoom in your page and it's a bad practice.

Good luck!

Marked as helpful

0

MacSmod 10

@MacSmod

Posted

Thanks for the feedback. I looked into BEM naming conventions and it makes a lot of sense to do things that way. I'm tinkering with PixelPerfect and can see how that's a great tool for getting everything just right.

Thanks for tips. I'm just getting started and only really know the basics so far so this is all very helpful.

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