Submitted over 1 year ago

Responsive QR code scan

Yahaya Auwalu• 30

@yauwalu84

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 managed to finish the challenge despite my limited HTML and CSS expertise. However, I faced numerous challenges, particularly due to my oversight of the importance of prioritizing mobile design. Moving forward, focusing on mobile design from the outset would be my top priority for improvement.

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

I encountered various challenges during the project, primarily because I overlooked the significance of prioritizing mobile design initially. I only became aware of this oversight after submitting the challenge and receiving feedback from someone who advised me to start with mobile-first design.

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

I would greatly appreciate the opportunity to learn more about responsive design.

Community feedback

Ecem Gokdogan• 9,380

@ecemgo

Posted over 1 year ago

Some recommendations regarding your code that could be of interest to you.

HTML

If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

CSS

After adding them to the HTML, you can add this font-family to the body in CSS file:
In order to center the card correctly, you'd better add flexbox and min-height: 100vh to the body
You don't need to use padding for the body

body{
   font-family: 'Outfit', sans-serif;  
   /* padding-top: 70px; */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}

If you use flexbox in the body, you don't need to use margin in the .div-center to center the card
If you use max-width instead of width, it makes the card responsive

.div-center {
   /* margin: auto; */
   /* width: 20%; */
   max-width: 300px;
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% for the img in this way:

img {
   display: block;
   /* margin-left: auto; */
   /* margin-right: auto; */
   /* width: 90%; */
    width: 100%;
    border-radius: 5%;
}

When this solution is in mobile and tablet size, the texts are not visible because you use vw for the font-size. Therefore, you can use px or rem.

h3 {
   /* font-size: 1.5vw; */
   font-size: 1.5rem;
}

p {
   /* font-size: 1vw; */
    font-size: 1rem;
}

You don't need to use media queries for this solution. If you update your code like above, the card will be responsive.

Hope I am helpful. :)

Yahaya Auwalu• 30

@yauwalu84

Posted over 1 year ago

@ecemgo Thank you for the feedback. I will go through the process to implement and learn more.

Andrea Y Costas• 190

@a-costas

Posted over 1 year ago

Hello! Nice job on completing your first challenge!

There are a few things that could help you in the future regarding CSS.

A mobile-first approach to implementing the design can be very helpful. While it is less noticeable in this project as the appearance is the same on both mobile and desktop, I'd encourage you to try mobile first in the future, then use the @media queries to help you put together the desktop view.

I noticed that for font sizes, you used vw as your unit. I'd encourage you to use rem instead. vw units should be reserved for occasions where you need an element to fill up a lot of width. rem will help a lot in your future work as it is a relative unit and will adjust itself accordingly when the sizes of your elements change. If you have trouble with px to rem conversion, there are good VSCode extensions out there that can help.

To centralize elements on a page, I'd recommend reading about Flexbox and/or grid. Both of these layouts allow easier manipulation of how elements are placed on your page and how you align them. Doing that will make it unnecessary to use elements like <br> in your HTML. <br> should be reserved for very specific situations and not generally used to add this kind of line break, it should be automatically handled with other styling choices.

One more thing regarding accessibility, try to stick to semantic HTML. Where you used <div class="div-center"> you could have used <main class="div-center"> which would have been better for someone using a screenreader for example.

Hope that's helpful! Good start and happy coding!

Yahaya Auwalu• 30

@yauwalu84

Posted over 1 year ago

@a-costas Thank you so much for the feedback. I will do more research on the properties and elements you talked about so as to be able to use them in the future.

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