QR-Code-Component Using React, TypeScript, HTML, styled-components

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 2 years ago

  Hi

  Have you intentionally made this look totally different to the design? The goal of the challenges is to build out the supplied design just like in a real job, so this wouldn't be accepted in those circumstances I'm afraid.

  You need to make some changes (as well as adjusting the styles to match design and using the supplied assets)

  • Use landmarks. Every page should at least have a main element
  • Once you are using the correct image, it does not need wrapping in a div. Only the card itself needs padding on this
  • The alt description should ideally be more meaningful. A QR code is a scannable image, so say where the code goes to. Imagine a real world scenario where this component would be used - There could be multiple cards on one page, so it wouldn't work if every image was described only as "QR code" "QR code" "QR code"
  • The card should not have an explicit width, only a max-width. And this should be in rem, not px. This will allow the component to work on all screen sizes, even if users change their text size, as it allows the card to remain proportional to that text size and allows it to shrink when needed without overflowing the screen.
  • Font size must never ever be in px. Use rem. This is extremely important so that user text size preferences can be respected.
  • You appear to be confusing margin and padding a little in this but part of that may be due to deviating from the design. I would expect the card to have padding as that is for internal spacing - keeping the child elements from touching its edges - and the child elements to only have vertical margins to create external space between each element
  • Is there a reason you've used a heading level 3 in this? (Not necessarily wrong, but depends on your reasoning)
  • This completely breaks on mobile landscape because you have set a wrapping element to height: calc(100vh);. This limits the height of the body and means the card gets positioned off part of the screen, making the QR code unusable. Rule: Never limit the height of elements that contain text, and hardly use height at all. The only exceptions I can think of are for icons or some images. Let the browser decide on the height required for the content. This would be fixed in your case by changing height to min-height, allowing the body to grow and extend beyond the screen height when needed.
  • Make sure either the component has a little margin or a wrapping element has a little padding. This will stop it hitting screen edges on some devices.
  • Always include a CSS reset at the very start of a stylesheet. Look up the modern CSS reset by Andy Bell which has a good explainer blog about it

  I hope this is helpful. These are all really important foundations you need to start building into every project

  12

  Marked as helpful
• 

  Angela Moore•170

  @Cyber-Chic

  Posted about 2 years ago

  Great job starting your project! 😊

  I have not used Vite and am not sure if this is the information you're looking for, but I think my suggestion may be able to help you:

  I build all of my projects with StackBlitz. You link it to your GitHub account then select the type of project you are trying to create. I select the option to create a Static HTML page, but there are many other options to select including Vite. Your project starts with all of the folders you will need. For example, my Static HTML project starts of with a built in style-sheet, Index folder, JavaScript folder and a second HTML page. Once you are done you can instantly upload your project to GitHub. Additionally, you can also instantly upload your current GitHub Repository to StackBlitz and edit it there. It's a free site that's really easy to use and has helped me immensely.

  Hope this is helpful! Happy coding!

  -Angie

  17

  Marked as helpful