Skip to content
Submitted over 1 year ago

Basic HTML - QR Code

Michael•240
@mksoofian
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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?

Community feedback

  • Tamana•210
    @Tamana123-2Posted over 1 year ago

    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
    1
    Michael•240
    @mksoofianPosted over 1 year ago

    @Tamana123-2

    Thanks for the feedback! I will definitely keep that in mind on my next challenge.

    0
  • RabbitMaid•1,020
    @AgbortokoPosted over 1 year ago
    • 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!

    1

Please log in to post a comment

Log in with GitHub

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