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

Responsive qr code challenge using flex

@mike15395

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?

This is the first project that i have hosted on github pages, so i am proud of it.

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

Most challenging part was deploying the project to github pages. It was not working as expected on github pages so i switched to vercel and it worked fine.

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

writing reponsive css using media queries.

Community feedback

@atomic-variable

Posted

Hi Mikhil,

Congratulations on completing your first challenge. I've some suggestions that might interest you,

  1. Though you have set the exact width and height as per design, it did not reflect on the website. Because by default in the CSS box model, the width and height you assign to an element is applied only to the element's content box, padding and border will take additional space. Setting box-sizing to border-box would fix this issue for you. For detailed information, refer here.
  2. It is always advisable to add width & height to the images. Apart from matching the design, it allows the element to take up space before it loads and avoid layout shifts.
  3. I noticed a few unused styles in the head tag, it's better to remove them to avoid unnecessary load.
  4. The font import is missing from the head tag. You might need to add something like this in your code
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

I hope my suggestions help you, Happy coding!

Thanks

1

@nahuejandro

Posted

Hi! first thing, colors are not the correct ones. second thing, you need to fix the padding and margin. third thing, you can try spliting your screen and see the final job so you can compare them. keep going, you are nearly close. bye

0

@mike15395

Posted

Hey @nahuejandro Thanks for your feedback! I will make the required changes but i have one doubt, solution and design comparison shows different as compared to preview site. Have you checked that? Please let me know why does that happens?

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