Skip to content
Submitted almost 3 years ago

QR-code using CSS Cards

Harsh Kumar•3,410
@thisisharsh7
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

While building the project I was unable to center the card body at the center perfectly so it consumes almost 1 hour to made it perfectly. I think I should focus on CSS position and flex property.

Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hi Harsh Kumar,

    Congratulation on completing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • Use the <footer> for the attribution, it should live outside the <main>. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • In my opinion, the alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. The alternate text should not hyphenated , it should be human readable.
    • In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser. Then you can remove .card-top margin.
    • width: 300px; an explicit width is not a good way to have responsive layout . consider using max-width to the card in rem instead .
    • Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
    • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.
    • Using percentages for widths, using max-width and avoiding to set heights for the components, with these things is the key to mastering responsive layouts.

    Last , It's a good practice to have the styles in separate file he reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document also it's useful If multiple pages on your site have the same look and feel.

    Overall, Your solution is good. Hopefully this feedback helps.

  • Abhilashpandey•270
    @freakyjones

    Hi Harsh, Congratulation on completing the task . Also here is one of my favorite videos regarding the basics of HTML, and CSS. Hopefully, it will help you master HTML and CSS a lot faster. https://www.youtube.com/watch?v=-8ORfgUa8ow.

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