Skip to content
Submitted 6 months ago

A Simple QR Code Project using only HTML and CSS

Nafis Sazzad Niloy•190
@methane-js
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud because I have successfully completed a project of a renowned website. I want to learn further about frontend development from this website.

What challenges did you encounter, and how did you overcome them?

I am basically very weak in responsive web designs. So I encountered a challenge for making this project responsive. But I overcame them with very simple codes.

What specific areas of your project would you like help with?

I would like to know about placing an object to the center of a website. I think there is a better way to place the QR code in the center.

If you know, please tell me.

Code

Please log in to post a comment

Log in

Community feedback

  • Mahmoud-AbdelKarim•600
    @Mahmoud-Abdelkarim777
    • i saw your coding it needs some improve.
    • remove margin: auto; margin-top: 200px; from main
    • add to the body this { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
    Marked as helpful
  • P
    Boris•4,110
    @makogeboris

    Great job completing your first challenge, here is how you can better place the QR code in the center.

    • To properly center the card, using flexbox on the body is better suited than margins, add this on your body and remove the all the margin properties from the main and also remove all the br tags
    display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2rem;
min-height: 100dvh;
    • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the main to max-width and it should be defined in rem. Also, remove the height property completely
    • Media queries are not required for this challenge as the styles remain consistent across all screen sizes. You can remove them.
    • Font-size should be written in rem not px
    • Use a separate file for your CSS as it improves maintainability.
    • Wrap a footer tag around the .attribution
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps, Good luck!

    Marked as helpful

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