Submitted 5 months ago

qr-code-component using HTML and CSS only

Miarinaly• 80

@Mys1337

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?

I'm proud of finishing this project as it is my first step into front-end development. Next time, I will check upon more advices of other developer more.

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

I had trouble with the responsive design when we use a mobile phone size screen. I look up for some code example to know how to do it (I've never used specific css condition for responsive design)

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

I want to learn more about better HTML semantics and more CSS about responsivity

Community feedback

W. Brett Egbert• 80

@crossinguard

Posted 5 months ago

The solution looks pretty good at the two specific sizes but loses its structure when resizing. For example, right at your media query's break point of 768px, the QR code goes from tiny to huge in relation to everything else. In this particular challenge the mobile and desktop designs have the same dimensions so a media query should not be needed.

A few fixed sizes that won't change between the mobile and desktop views can help lock your structure in when resizing to various displays. For example, in the Figma file both mobile and desktop components are 320px wide. Currently, your component size is based on width: 32% making everything resize unpredictably depending on the user's unknown screen size.

Additionally, I would encourage you to review the style guide and reference images as a few colors and font sizes appear off. For example, the header font color is black rather than the "dark blue" specified.

Marked as helpful

Account Deleted

Nice :) The Outfit font is not being applied because the path to the .ttf file is incorrect, in your case it should be src('./Outfit-VariableFont_wght.ttf'), since the font file and the stylesheet are both in the root directory.

Marked as helpful

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