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

Frontend-Mentor-QR-component

@ogabrielfef

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

Joshtemi0 180

@Joshtemi0

Posted

Congratulations 🎉 on completing you first

The height and the width is perfect even compared to mine on my first submit 😄😜

From the little I know

 • After checking out your website and your code I noticed the last two line of code are outside the div of your container which make your ##name and the link jump outside of the content 

 • Another thing I noticed is that you have a lot of " ids " in stead of " class.  Class = " content  " not id =" content " and you will use it in your css and " .Content " make sure you put the dot before the content (in case you have no idea before).  The id is mainly or more useful in javaScript 

Therefore use class name instead of id name

Hope it's helpful

Marked as helpful

0

@MrBradley815

Posted

The one difference that probably stands out the most to me is the font family. Just in case you didn't know, the font for this project is available on Google Fonts.

Your HTML markup overall looks pretty good. One thing I would recommend is for the bold text to use a heading tag.

The sizing of your component is almost spot on. The only real issue being that almost all of your widths are hard coded. Generally you will want to avoid using hard set width/height values like that. Try to stick to a more responsive style so that it will scale properly to larger and smaller screens. An example would be instead of using width, try max-width on your main content div. It won't exceed that value and if the container that this component is ever in is shrinks, it will scale properly without breaking.

Marked as helpful

0

@ogabrielfef

Posted

@MrBradley815 Obrigado pelas dicas. As tags fora de semântica em HTML são mal costume de React kkkk.

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