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

Used CSS media queries

@jainaparana

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 time I worked on CSS without any support videos

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

Understanding how to use figma design was a challenge

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

Initial designing

Community feedback

geomydas 1,330

@geomydas

Posted

Hi @jainaparana, I have finished reading your code and your solution and code looks good also. Apart from that, your code has unfortunately few major issues.

My Tips and Feedback

  1. Use a CSS reset. What it does is that it makes your CSS more easier to work with and also more consistent across devices. Take a look at Josh Comeau's and Andy Bell's CSS reset. I personally prefer using the first one. This applies to all of your projects aswell.
  2. The .attribution div should not have a font-size set in px. Remove the styles in the the `` landmark according to accesibility guidelines. The main tag indicates the primary content of a page. Replace the .attribution div with a main tag instead.
  3. Never ever set fixed widths and heights!. For example, width: 632px. There is no need to so, set a max-width instead. You don't even really need to set a height on an element since the content (text, paddings, margins, .etc) will already take it up. It will be unresponsive and will likely cause overflow issues at some screen sizes. If you really need to set a height, use min-height instead. The only exceptions for this are small icons such as an avatar profile or a small icon.
  4. Don't set unnecesarry properties in your CSS. It just bloats up your code and it does nothing at all. It makes your code messier also. There is no need for the .attribution div to have display: flex and flex-direction: column at all since you aren't using flex properties like gap, justify-content, align-items and all of the child elements are block-level already
  5. Learn when to use paddings and margins. Instead of setting margin-left and margin-right on the child elements, just set a padding on the parent element which is .attribution
  6. Use box-shadow instead of border. Inside your .attribution div, remove the border property and set a custom box-shadow instead. It makes it more closer and accurate to the design
  7. Remove the .scanner div There is no point of it, you can just apply the styles directly to the image

Don't be overwhelmed by all of this. Mistakes like this are completely normal at this level, I did this once before. Update your code after reading all of this aswell, I will follow up with other feedback. Have a nice day and have fun coding!

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