QR-Component

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 6 months ago

  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•31,090

  @grace-snowPosted 6 months ago

  @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

  

  Suraj Kale•20

  @surajdkalePosted 6 months ago

  Okay@grace-snow

  0
• 

  Suraj Kale•20

  @surajdkalePosted 6 months ago

  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•31,090

  @grace-snowPosted 6 months ago

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

  0

  

  Suraj Kale•20

  @surajdkalePosted 6 months ago

  @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