Skip to content
Submitted almost 2 years ago

QR Code page using CSS flex-box

Asfer Ali•260
@Asfer-dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

In what ways this could be better? What practices would be recommended to take to write better css?

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <section class="bgcolor-background"> with the main tag and <h3> with <h1> to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/

    Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

    Use the color that was given in the styleguide.md

    Hope am helpful. HAPPY CODING

    Marked as helpful
    1
    Asfer Ali•260
    @Asfer-devPosted almost 2 years ago

    @Hassiai hey, I made some changes, and thankfully the accessibility issues are gone. I also replaced pixels with rem for widths and font sizes. Should I also use rem for padding and margin?

    Btw I used the colors given in the styleguide.md already. Anyways, thank you for helping me.

    0
  • Khondoker Aashabul Imam•260
    @aashabulPosted almost 2 years ago
    • you can use SASS to write CSS with less lines. When projects get bigger we get confused with finding the parent and child elements of a class or id. SASS can help in this case.
    • Also try to use more meaningful names for class, id and variables.
    • I think better CSS comes from better HTML structure. The better the HTML code is organized the better your CSS code will be. I think so.
    • If you find something useful about this topic please be free to share. I am also learning.
    Marked as helpful
    1
  • Sinisa Vukmirovic•1,690
    @SinisaVukmirovicPosted almost 2 years ago

    Hello!

    Definitely start with using semantic element in your html structure. Errors in your report are mostly about that.

    This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.

    This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.

    More about semantic elements

    Hope this helps in your improvement!

    1
    Asfer Ali•260
    @Asfer-devPosted almost 2 years ago

    @SinisaVukmirovic Thanks for your feedback. Just updated the code.

    0

Please log in to post a comment

Log in with GitHub

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