Submitted 4 months ago

QR Code

Kate• 60

@devknightingale

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?

Proud of: I thought going in that trying to build a page without following a tutorial would take a lot longer than it did.

What I would do differently: With a bit more experience, I would like more knowledge of building for mobile screens. I tried to fiddle with the css a bit and test how the page would look by collapsing the browser window, but I don't think that's how people test mobile sites. I would like more knowledge on how to do that next time.

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

Not enough containers... I had trouble centering it vertically before realizing I needed to wrap the whole thing in another element to allow vertical centering. From what I googled there are other ways but flexbox seemed simplest.

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

I'd like to figure out how to use the MobileView extension in VSCode. I installed the extension but when I start it up, it doesn't seem to actually have a live preview of the site I'm building. I didn't have a lot of time to fiddle with it before work though so I let it go for the time being.

Community feedback

Eirik Andresen• 60

@ehandresen

Posted 4 months ago

While you did attempt to test the page by resizing the browser window, there are more effective ways to ensure your design is mobile-friendly. Consider using tools like Chrome DevTools for responsive design mode or dedicated mobile testing tools to get a more accurate representation of how your site looks on different devices. Addressing the issues with the MobileView extension in VSCode is crucial. Ensure that your development tools are set up correctly to save time and avoid frustration. Look into alternative extensions or plugins that might offer more reliable live previews.

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