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

Basic HTML and CSS , nothing more.

Elliot 80

@MosesElite69

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


1 - I'm not sure if using div within each other was smart, so let me know if there was better option.

2 - I'm not sure how to avoid the QR code from clipping outside the div, so let me know please.

3 - Suggest how to improve as this is my first project :)

Community feedback

@MohammedBentalb

Posted

Hello Elliot, hope you're doing well, as this project isn't that much to show your weaknesses, It's obvious that only the shape matches the design. I'm just an intermediate dev, yet I would encourage you to stick as much as you can to the design and look up for things that u couldn't do/handle (some good ones for CSS and HTML u can look for Kevin Powell, web dev simplified and developedbyed) (those have some friendly beginning videos)

  1. use section instead of the first div since it has better semantic meaning and because the QR card is the only element there.
  2. not quite sure what do u mean but u can look up aspect-ratio in CSS for images, and try to not define its width in CSS unless u have to and let it depend on the width of the outer container while having a padding in the inside.
  3. try not to lock yourself in tutorial hell and build projects as you are learning not until u think u have learned everything

(take this only as reference (maybe what I said wouldn't match your way of building things or maybe not perfect enough) as even I need to keep learning then ) have a good one

Marked as helpful

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