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 challenge

Martin 40

@MCoton

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

T
Grace 29,310

@grace-snow

Posted

As well as the feedback above, you need to use a heading element in this

And never style on IDs! That's not what they are for. IDs are for anchoring only. I don't recommend using them as js selectors when you get to that (even though you will see a lot of code examples that do) and definitely never ever use them as css selectors

Marked as helpful

0

Martin 40

@MCoton

Posted

@grace-snow Thank you, I was never 100% clear on the correct use of id over class.

0
JJ Vega 110

@jjvega86

Posted

Great work on this, Martin!

I have a few suggestions:

  • in your HTML, the card component and footer are both wrapped in div elements. This isn't bad for the component itself, but consider using a main semantic element to indicate which portion of the document contains the primary content. You may want to consider a footer element for the attribution as well. This is why you are getting the "

  • I noticed that the design for this component has the "Improve your front end skills" as a bold font-weight, but your final product doesn't have that weight assigned. That would be the last piece to making your code match with design.

Marked as helpful

0

Martin 40

@MCoton

Posted

@jjvega86 Thanks for your feedback JJ. Yeah I was struggling with the Google Font API, turns out I hadn't correctly selected the fonts weights. By the end I think I had a dose of "design blindness" :( Tweaked it now though, the hosted version now looks right.

https://mcoton.github.io/QR_code_component_challenge/

1
JJ Vega 110

@jjvega86

Posted

@MCoton Excellent, looks great!

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