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

QR-Component

P
Dontae15 40

@Dontae15

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?

I used Codepen to plan code. I will continue this.

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

Media-queries. I used Chat Gpt

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

Improving the responsiveness of the design.

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi @Dontae15

I'm afraid there are quite a lot of issues in this code that you should correct before moving on to anything else.

I recommend you read the comments I've left already on two other QR code solutions as these will really help you I think and it saves me writing all the same stuff again. These are really common beginner mistakes and it will help to fix them as soon as possible so you have a good foundation for future challenges.

  1. https://www.frontendmentor.io/solutions/qr-code-component-ZB_RG6fh_M
  2. https://www.frontendmentor.io/solutions/used-flexbox-to-build-responsive-card-6qH73__GuI

The only additional feedback for you specifically that comes to mind is:

  1. Don't style on IDs!. That's not what they're for. Use classes to style things.
  2. Make sure all content is contained within landmarks. This component should be wrapped inside a main and if you include the attribution that should be inside a footer separate to the main.
  3. This challenge does not need a media query. You can see the designs look exactly the same. So if you find yourself reaching for media queries it's a sign there's a problem somewhere else in your code. Pause. Rethink. The advice given on the solutions above will fix this and remove the need for media queries... BUT note for future: When you do come to challenges that need a media query, this isn't how you should approach them. The mobile styling should be the default, then you add a min-width media query to change properties that need to change for larger screens. Also media queries should always be defined in rem or em not px so that the layout scales correctly for all users, including those with a different text size. I've written a full post about media queries but I recommend you only read this once you've finished refactoring this challenge first, as its not applicable here and there are more important learnings to master before media queries.
0

T
Grace 29,310

@grace-snow

Posted

@surajdkale I also recommend you read these pieces of feedback as your blog preview card solution is suffering a lot of the same issues and overflowing my screen. There are additional feed backs needed on the HTML of that one but I'm sorry I am out of time to do that today.

0

@surajdkale

Posted

Okay@grace-snow

0

@surajdkale

Posted

Guys, this is my First project through the FrontEndMentor. It was awesome experience, Let me tell you the solution from my side , you should have to be focused on Display properties like Position:(absolute,relative) Which is most important to Make your component flexible in your entire viewport , by using this Position Property we can decide on which position should our component would be.

That much i wanted to tell you guys.. thank you..

0

T
Grace 29,310

@grace-snow

Posted

@surajdkale sorry but that's not true. Its bad advice for this challenge. This component must not use the position property.

0

@surajdkale

Posted

@grace-snow I'm an junior developer so your feedback will be valuable for me thank you 😊.. I'll be looking forward to your feedback and address my issues to make it right 👍..

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