Skip to content
Submitted almost 3 years ago

CSS Flexbox

Sami NASRI•240
@SilverWings47
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

Any feedback would be appreciated.

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted almost 3 years ago

    Hi

    • Consider semantic elements such as main, " The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application." - source (mdn)
    • the alt value for an image should be text that is readable and is meaningful to assistive technology users. Decorative images can have an empty alt value.
    • a site should have a heading element especially the first heading element.
    • preferably , do not use fixed values like px for fonts, use rems instead . See the following rems vs px for further details
    Marked as helpful
    1
    Sami NASRI•240
    @SilverWings47Posted almost 3 years ago

    @ChamuMutezva Thank you

    0
  • Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    Hello there! Great job with this one! Looking at your solution, I would suggest the following for you...

    • Adjust the margin inside the .card rule set into margin: 80px auto; to align in the center
    • Change the color value of the background into something blueish grey like background: hsla(223, 20%, 85%, 1);
    • Wrap the container with main tag and attribution with footer tag for readability
    • Remove the style property and import the styles in the CSS file

    Once again, Well done and Keep it going!

    Marked as helpful
    1
    Sami NASRI•240
    @SilverWings47Posted almost 3 years ago

    @RioCantre Thanks for the feedback, appreciate it a lot !

    0
  • Sami NASRI•240
    @SilverWings47Posted almost 3 years ago

    The screenshot is messing up my design.

    0
    Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    @SilverWings47 I would be grateful of you mark it as helpful. Cheers!

    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