Skip to content
Submitted over 2 years ago

Basic HTML - QR Code

Michael•240
@mksoofian
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I was overthinking about the layering of objects in this project.

I was trying initially to break the image, header and paragraph into three boxes and set them to fill the card in a ratio proportion but wasnt having luck with that. Especially because I thought this would be responsive design and I would be able to just include a max-width on the card to keep it from getting too large. However, I wasn't having any luck with that.

Would someone be willing to share how I could have accomplished that?

Code

Please log in to post a comment

Log in

Community feedback

  • Tamana•210
    @Tamana123-2

    Hi mksoofian! Great job for completing the project. Although I wanted to check you code, but I could not find the CSS file. For the whole design you can get a container, so that you can set the padding, background-color margin ..., then one div for the image, one div for the first text and finally one div for the second context. As your first project, it is a great attempt. Keep moving forward. Nice time!

    Marked as helpful
  • Mr Rabbit•1,020
    @rabbitmaid
    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your html you can use the <section> tag. In most cases as well you may have to put all your main site content in a landmark element <main>

    I hope you find the above solution useful! 😄 Nevertheless, the solution you submitted is great! Happy coding!

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