Skip to content
Submitted over 2 years ago

QR code solution using HTML and CSS. Text styling and centering image

Bianca Aragon•10
@Biankii48
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had difficulty centering the QR image to the div, but after long research, I found a solution. This is the final result.

Code

Please log in to post a comment

Log in

Community feedback

  • Hatem Henchir•530
    @hatemhenchir

    Hey Faith Bianca Aragon, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • you can use flexbox to center something with CSS like this : display:flex; justify-content:center; align-items:center; .
    • you use grid like this : display:grid; place-items:center;
    Marked as helpful
  • Aanu-TT•150
    @AanuTT

    Hello @Biankii48. Well done on the delivery of your project 👍. However, there are a few tips you should take note of

    1. Use a h1 tag rather than a h2 tag at the beginning in HTML. It makes it easy for screen readers to locate the beginning of the page. https://www.w3schools.com/html/html5_semantic_elements.asp has examples
    2. Using the root selector to store base information such as colors makes coding a bit faster and more tidy https://www.w3schools.com/cssref/sel_root.php, https://www.w3schools.com/cssref/css_selectors.php for more info.

    Happy coding

    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