Submitted 3 months ago

QR Code Challenge

saintnic84• 30

@saintnic84

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Honestly I'm just proud I did this in the first place, and that I was able to at all. I'm trying to make a career change, and doing simple projects like these will definitely help me out. I think I'll try to use bootstrap as my framework for my upcoming projects.

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

The challenges I faced were making sure that my margin, padding, and borders all looked good. I overcame the challenges by watching a few videos about the box model, and reviewing the units of measurement. The rest was simply testing my code in my editor.

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

Any feedback would be appreciated. I've got many mountains to climb, but I'll perserve.

Community feedback

geomydas• 1,060

@geomydas

Posted 3 months ago

Might be more of a personal preference but your <img> tag in the code should need an "alt" attribute.

For the CSS, this challenges includes a .fig file which you can open in Figma to see the borders, paddings and margins to be more accurate. It's really easy to use figma for devs, I'd reccomend one of the articles on this site. https://www.frontendmentor.io/articles/figma-for-developers-how-to-work-with-a-design-file-m6CZKZ1rC1.

Also for the CSS code, I don't see why you would need {margin: 0 auto; padding, and align-items on the body selector just to center the card. It's pretty inaccurate and inefficient and what I would reccomend is to use align-items:center and justify-content: center and add a width and height of 100vw and 100vh.

This only works on small projects which have a only one row or column. It wouldn't work on larger scale projects such as a landing page or etc.

EFEELE• 350

@EFEELE

Posted 3 months ago

Improve your skills using flexbox, and you'll find that it greatly simplifies completing your projects and overcoming those challenges you face. Also, research about box-sizing: border-box;

Click here to more info Flexbox

Click here to more info box-sizing

Much success, colleague!

Please log in to post a comment

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