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

HTML CSS FLEXBOX

kudos2Shef 170

@kudos2Shef

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


Hi, My second challenge so far. Curious to know how to write efficient HTML/CSS code. Feedback are welcome!

Community feedback

@rohitd99

Posted

Hi kudos2Shef

Congrats on completing the challenge.

I noticed that to center the card you've used properties like position : relative etc on your card, well to center something you don't need these but simply use a flex or grid on main


main {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

add these to your solution and remove the position : relative and top : 120px from your card. Also I see you've used headings in the wrong way. The card title must he a h1 instead of an h3. Each page must have a single h1 heading for the title. Headings must be in order from h1 through h6. Same for the footer instead of h6 , I think semantically a p element should suffice as I don't think that is a heading.

Hope it helps

Marked as helpful

0

@azelalynetan

Posted

Good job! Nice work. My only suggestion is don't skip heading levels. For accessibility, it's recommended to use heading in a logical order. Keep it up.

0

@A-pixel-ux

Posted

Bro nice work, There is no much comment on this you did a perfect job especially on the responsive part. I will just advice to keep on practicing, They normally say practice made perfect. Keep it up, Thumb ups for this once again.

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