Request failed with status code 502
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

Responsive QR Design

@Phushyamithra

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?

Learnt how to build a HTML page with CSS styling from scratch without any tutorial HELL.

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

Didn't know how to start CSS styling so actually created all the HTML styling then using the sketch made the changes one by one.

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

CSS Styling, JS, Responsive Design and also Development using React. JS framework.

Community feedback

@MdIrfan-ul

Posted

the layout look good and responsive too. I liked your stylings that you made simpler .Your Code looks however you can use some meaningfull attributes for the non semantic tags like role ="heading" .

0
keltiek 210

@keltiek

Posted

Just starting out, but I believe it would be better to use flexbox and not absolute position. Also better to use h1 header.

0
P

@ValeriaMontoya

Posted

Hi, here are some suggestions to improve the accessibility of your code:

  • Screen readers rely on alt text to describe images to users. Add an alt attribute to the <img> tag with a description of the QR code's purpose. For example: <img src="./images/image-qr-code.png" alt="QR code for Frontend Mentor" />
  • While <div> is generic, consider using more descriptive elements for specific content. In this case, replace the outer <div> with a <main> tag to indicate the main content area.
  • Headings (<h1> to <h6>) should be used in a logical order to structure the content hierarchy. Since there's only one heading currently, you can simply remove the <b> tag for bold styling (use CSS instead) and replace it with a <h1> tag.

I hope my feedback is helpful! 🤓

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