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
Not Found

Submitted

QR code webpage using CSS and HTML

Gretel Rodriguez• 20

@The-Fat-Cat

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

QR code component
  • HTML
  • CSS
1newbie
View challenge

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

@jemeneradev

Posted

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-Cat

Posted

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

1
Mohamed Fathy• 160

@M0hamedF

Posted

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-Cat

Posted

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
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