Skip to content
Submitted about 1 year ago

QR code component using HTML and CSS

jaquelina nd•10
@jaquelin9
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

While working on the project, I encountered challenges in adjusting the image size to fit within the container while also readjusting font sizes appropriately. Feedback on the following questions would be greatly appreciated:

  • Image Resizing: I struggled with resizing images to match the container dimensions while maintaining aspect ratios. Any tips on achieving a responsive image layout?

  • Font Size Adjustment: I found it tricky to dynamically adjust font sizes based on screen sizes. Are there best practices or CSS techniques to ensure readable text across various devices?

  • CSS Organisation: Considering the code is relatively concise, I'm torn between embedding CSS within the HTML file or using an external stylesheet. What would be the recommended approach for maintainability and performance?

Any insights and guidance on these points would be invaluable as I seek to enhance the project's user experience and code structure.

Community feedback

  • Mandlakazi Nxumalo•550
    @NxumaloDevPosted about 1 year ago

    Good job jaquelin9.

    • I'd encourage you to store your CSS externally (e.g <link rel="stylesheet" href="style.css"> ) for better readability.
    • As for responsiveness, this project mainly focuses on layout so no need to worry about that on this particular project. However, If you do come across a project requiring responsive images, use the <picture> element. Check out w3schools for better explanation.
    • Use relative units (e.g rem, em ) for font-sizes.
    • Be familiar with CSS Grid and/or Flex-box. CSS Grid will allow to center div effortlessly e.g div { display: grid; place-items: center; }

    I apologize for this long paragraph ( there's still more tips but i mentioned the 'important' ones for this project). Wish you the best, good luck!

    Marked as helpful
    0
    jaquelina nd•10
    @jaquelin9Posted about 1 year ago

    Thank you for the feedback @NxumaloDev - I'll certainly work on more layout projects to improve my knowledge and application of CSS and CSS Grid. Are there any resources that helped you with centering div elements that you could share?

    1
    Mandlakazi Nxumalo•550
    @NxumaloDevPosted about 1 year ago

    @jaquelin9

    • w3schools has pretty much everything
    • ChatGTP as well lol
    • YouTube
    0

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