Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS Flexbox

Sami NASRI 240

@SilverWings47

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback would be appreciated.

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

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

@SilverWings47

Posted

@ChamuMutezva Thank you

0
Rio Cantre 9,690

@RioCantre

Posted

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

@SilverWings47

Posted

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

0
Sami NASRI 240

@SilverWings47

Posted

The screenshot is messing up my design.

0

Rio Cantre 9,690

@RioCantre

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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