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 using flex box

@dawit-h

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Emir985

Posted

It's ok that the final outcome differs from the original design if, for a first attempt, you got very close.

A few things that I can recommend that saved me a lot of headaches:

1. Use vw(view width) or vh(view height) instead of px

Px is a set value whereas vw and vh scale with the screen size so it's easier to make it more responsive

2. Using a separate CSS style sheet

By having it in a separate file and linking it from the HTML file, you don't have to continually scroll up and down looking for your code and it's easier to adjust the individual files rather than have it all in one.

3. Use comments for a clear understanding

Doesn't have to be after every line of code, though you can use comments to explain what you're trying to achieve in each section, that way it's easier to feedback and can help you also segment the code so it's easier for you to work with

Marked as helpful

0

@dawit-h

Posted

Thanks!!

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