Skip to content
Submitted almost 3 years ago

QR code webpage using CSS and HTML

Gretel Rodriguez•20
@The-Fat-Cat
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

Hi guys! I'm a fairly new coder and wanted to get feedback on my code. Something I struggled with was margin and padding properties. I found that for the most part I was doing guesswork to position my image using the dimensions of the screen. I also wanted to see if there's ways I can make my code smaller and cleaner (i.e achieving the same results using less code). Additional question regarding the position property. I noticed that another way to position my elements were setting the position property to absolute and defining the margins but that wasn't ideal for responsive websites (ex if you resize the window) so if anyone could give me tips on what scenarios the property values are best used for that would be amazing! :)

Community feedback

  • jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    Basically, if you want to have a responsive layout, avoid position: absolute.

    Now, I am not saying it's not useful. Try this out:

    <div class="designspec" style="position:absolute; left:0;top:0;background-image:url(pathtodesignimage.jpg); z-index:-1;opacity:0.5)"></div>

    pathtodesignimage = image location, usually "./images/.../design.jpg"

    This is a reference onto which you can lay on top your design implementation. It takes out the guessing of margin and padding.

    Marked as helpful
    0
    Gretel Rodriguez•20
    @The-Fat-CatPosted almost 3 years ago

    Ohh I see it! Thank you so much this was very helpful. @jemeneradev

    1
  • Mohamed Fathy•160
    @M0hamedFPosted almost 3 years ago

    Hi Gretel Rodriguez Congrats on your first project 🎉, 1- I would suggest to separate CSS from HTML , by creating new file called style.css and connect it to your HTML

    2- The best way to center your dev is using grid "as far as I know". you can use (display: grid; /place-items: center;) to center the card in the middle of the screen For info in details: (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) Or (https://www.w3schools.com/css/css_grid.asp) Keep the good work👍

    Marked as helpful
    0
    Gretel Rodriguez•20
    @The-Fat-CatPosted almost 3 years ago

    Thank you so much! I have a lot to learn and this helps @M0hamedF

    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