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

QR Code Component using CSS Flexbox

#accessibility

@Ugonadia

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


I will appreciate any feedback on how I could have done this better especially the media queries part of my code.

Community feedback

@aviralsharma07

Posted

Hey, Congratulations on creating this project. Here are my few suggestions for you.

  • Use semantics HTML Tags like <article> to wrap card content then <div>
  • You don't need to wrap the <img> inside an <div> it is not required.
  • Write your CSS in a separate file named styles.css and link it to HTML in the <head> section.
  • Use max-width: 25ch instead of width for .text-class
  • There is no need for a Flex basis multiple times in this project. Refer to this to learn Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • Use margin-top for spacing between <p> and heading not padding-top.

Hope it helps. Keep up the good work!

Marked as helpful

0

@Ugonadia

Posted

@aviralsharma07 Thank you

1

@traez

Posted

Nne welcome to frontendmentor. Github seen. You're doing well. Keep building and learning!

For starters you can take note of the Accessibility report (2) and HTML validation report (5) outstandings, and start to perfect your craft from there.

The media query wasn't really good. Responsiveness wasn't neat. But it's your first try and it's allowed. Google and look for an article that explains how to implement media query (when shifting from mobile to desktop and vice versa)

https://traez.github.io/time-tracking-dashboard-main/ You can check out my latest project and see how the look changes when you toggle mobile and desktop view.

Marked as helpful

0

@Ugonadia

Posted

@traez Thank you

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