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 code component using HTML CSS

CodageWithRahulβ€’ 70

@CodageWithRahul

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

@Oluwalolope

Posted

Hello πŸ‘‹, Great attempt at the challenge. I know you didn't ask for feedback but nevertheless I have some suggestions for youπŸ˜„.

  • It is not advisable to leave the "alt" empty: The "alt" helps to give the search engine a description about what the image is all about. It should describe what the image is about. In your code I noticed you wrote this <img src="/images/image-qr-code.png" alt=""> but I suggest you write something like this instead <img src="/images/image-qr-code.png" alt="QR Code that takes you to frontend mentor.io when scanned">

  • Use Header tags instead of assigning a class to a paragraph tag: I noticed that in your code you used <p class="p"> Improve your front-end skills by building projects</p>. Instead use a h1 tag like this: <h1> Improve your front-end skills by building projects</h1> . This is considered best practice because the header tags are specifically used for headings. We mainly assign a class to a p-tag when we have multiple paragraphs in a website and we want to specifically style a paragraph.

  • Using rems for font-sizing: A major drawback of using pixels for fonts is that it is too static. If a visually impaired person is trying to read your website they need to increase the font size in the browser's setting but that is where the problem is. That is where rems come in. rems give the user power to control the font sizing and gives better user experience. By default 1px = 0.0625rem so you can do the calculations and input the rem value.

Once again Congratulations 🎊 on the challenge. I hope you found this helpful 😊🀝

Happy CodingπŸ‘¨β€πŸ’»πŸ˜„

0

CodageWithRahulβ€’ 70

@CodageWithRahul

Posted

thanks a lot for your suggestion actually i am new in this field so i don't know how to use html tag properly i think i have to learn more about that how to use html tags in proper way thanks for your guidance @Oluwalolope

0

@Oluwalolope

Posted

You are welcome! Glad i could help you😊 . I'll be really grateful if you could smash that like button in my comment above 😊. Just remember that practice makes perfect. The more time you dedicate, the more results you'll see. All the best on your journey 🀝@CodageWithRahul

Marked as helpful

0
CodageWithRahulβ€’ 70

@CodageWithRahul

Posted

sure I like to be your friend do you have any social media account like Instagram or fb . this is my Instagram account link https://www.instagram.com/codagewithrahul23/ here we can share our knowledge and skills to each other @Oluwalolope

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